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}
- Sampai disini proses Cara Membuat-Menampilkan Breadcrumb Diatas Judul Posting Blog di Blogspot selesai, selanjutnya Save Template.
- Cek dan lihat hasil dari setiap artikel / postingan Blog Anda. Kalau tidak mncul, mungkin Anda belum membuat / menuliskan Label pada posting atau artikel Blog Anda.
Jadi intinya dalam setiap artikel / posting dari Blog Anda harus lah ada atau di ketikkan Kategori / Label apa yang sesuai untuk pengelompokkan artikel / posting Anda kali ini. Agar pembaca mudah untuk menelusuri setiap postingan / artikel yang telah Anda buat.
Dengan begitu, page view / kunjungan pada halaman posting / artikel Anda juga akan bertambah. Coba saja cek atau daftarkan / register-kan dahulu Blog / Website / Situs Anda di HiStat. Maka Anda akan tahu setiap kunjungan dari para pembaca dengan laporan yang lebih lengkap dan akurat...( koq jadinya promosi yak...??? ™Ќîiîk.·:::D Ќîiîk :D::·. Ќîiîk™ ).
No comments:
Post a Comment