Cara Membuat Breadcumbs Blogger Responsive dan Seo Friendly - Blog Buat Web Id - Info Seputar Dunia Teknologi Informasi

Latest

Blog Buat Web Id - Info Seputar Dunia Teknologi Informasi

Kumpulan Tips Info Seputar Teknologi

Recent Posts

Wednesday, January 10, 2018

Cara Membuat Breadcumbs Blogger Responsive dan Seo Friendly

Cara Membuat Breadcumbs Blogger Responsive dan Seo Friendly
Buat.Web.ID - Pada Kesempatan Hari ini saya akan membagikan Cara Membuat Breadcumbs Blogger Responsive dan Seo Friendly, dimana ini sangatlah penting untuk membuat blog Anda lebih Seo lagi dimata search Engine, Banyak tutorial yang menjelaskan cara membuat breadcrumbs di Blogspot/Blogger. Kali ini saya akan menjelaskan cara membuat breadcrumbs yang SEO friendly dan semua label terindeks oleh Search Engine.

Breadcrumbs merupakan menu navigasi yang berada di atas judul postingan seperti yang ada di blog saya. Struktur ini tentu berbeda dengan WordPress, yang bisa membuat child category. Struktur di blogger hanya Home kemudian Label. Apabila memiliki beberapa label, maka akan terbaca seperti ini
Cara Membuat Breadcumbs Blogger Responsive dan Seo Friendly
Berikut Caranya :
  • Buka akun blogger anda
  • Pilih menu Template > Klik Edit HTML.
  • Silahkan anda cari kode seperti ini  ]]></b:skin>.
  • Copy Kode berikut diatas tepat diatasnya.
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
  • Kemudian cari kode berikut <b:includable id='main' var='top'>, ganti dengan kode dibawah ini.
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>


  • Save Template dan lihat Hasilnya,
  • Untuk melihat dan mengeceknya silahkan Anda cek  di

    No comments:

    Post a Comment