Telah banyak Kita jumpai Para Master dari situs / website yang membahas tentang Search Engine Optimization (SEO) blog dengan memiliki Menu Navigasi Breadcrumb yang konon punya daya Search Engine Result Page (SERP) yang tinggi di mata search engine seperti Google.Com, Yahoo.Com, Bing.Com, dan lainnya, dibanding dengan yang tidak memakai / menampilkan Menu Navigasi Breadcrumb yang selalu muncul pada setiap Posting pada Artikel-artikel yang telah Kita buat ini.
Cara Membuat atau Menampilkan Menu Navigasi Breadcrumb Diatas Judul Posting Blog tidaklah rumit.
Menu Navigasi Breadcrumb adalah Link Navigasi yang biasanya tampil di atas judul atau title posting dalam modus postingan bukan dalam modus Home seperti terlihat pada blog ini dimana Breadcrumb menampilkan Halaman Depan atau Home » Label » Judul Posting. Seperti pada gambar dibawah ini :
Langsung ke topik bahasan Cara Membuat Menu Navigasi Breadcrumb di Blogger :
--Log in ke account sobat di blogger.com
--Klik tanda panah, lalu pilih Template
--Sebaiknya lakukan dulu backup template dengan klik Backup / restore atau Cadangkan / Pulihkan,
lalu klik download full template.
--Klik tanda x untuk kembali ke menu template
--Selanjutnya plih Edit HTML --> klik Procced atau proses
--Centang pada Expand Widget Templates
--Cari kode <b:includable id='main' var='top'> untuk memudahkan mencarinya gunakan Ctrl +F
Hapus Kode diatas dan ganti dengan paste kode di bawah ini :
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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' rel='tag'>Home</a> »
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> » </b:if>
</b:loop>
»
</b:if>
<data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>
--Selanjutnya sobat blogger cari kode ]]></b:skin> dan copy paste kode ini di atasnya :
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:13px;border-bottom:1px dotted #ccc;font-weight:normal}

0 Responses to "Cara Membuat-Menampilkan Breadcrumb Diatas Judul Posting Blog"
Post a Comment