Cara Membuat Navigasi Breadcrumb di Blog

Apa sih Breadcrumb?? Breadcrumb bisa dikatakan sebagai alat navigasi yang menunjukkan setiap isi menu label pada setiap atikel terkait yang sangat membantu sekali bagi para pembaca menulusuri blog Sobat .

Nah Sobat dah pada tau kan maksud dan tujuan ane setelah melihat Screen Shot nya untuk Postingan kali ini dan juga dengan memasang Breadcrumb juga bisa meningkatkan optimasi SEO kita sehingga menjadi lebih baik. Ok bisa kita lanjutkan?? ya mungkin itu sedikit penjelasan tentang Breadcrumb, langsung aja ya kita praktekkan Cara Membuat Navigasi Breadcrumb di Blog . Langkah-langkahnya sebagai berikut :

1. Pertama seperti biasa Sign in ke akun blog Sobat, lalu pilih Layout ==> Template ==> Edit HTML ==> sebagai berjaga-jaga jika terjadi kesalahan silahkan download template terlebih dahulu. Lalu jangan lupa untuk mencentang Expand Template Widget.
2. Selanjutnya carilah kode ]]></b:skin> untuk mempermudah pencarian gunakan ctrl+f. Lalu letakkanlah kode script dibawah ini tepat diatas kode ]]></b:skin>
Kode :
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double
#e6e4e3;
}



Keterangan : Bisa diedit sesuai selera Sobat.

3. Selanjutnya carilah kode 
<div class='post hentry uncustomized-post-template'> dan letakkanlah kode script dibawah ini tepat dibawah kode <div class='post hentry uncustomized-post-template'>
Kode :
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
4. Jika sudah klik save. dan lihatlah hasilnya. buka salah satu artikel blog untuk melihat apakah Navigasi Breadcrumb telah terpasang dengan benar atau belum.

Selamat Mencoba & Berkreatifitas. Semoga Bermanfaat... ^_^
Cara Membuat Navigasi Breadcrumb di Blog Cara Membuat Navigasi Breadcrumb di Blog Reviewed by Abdul Hamid on 7/22/2018 09:13:00 PM Rating: 5

No comments:

Labor Blog Info sangat menghargai pendapat Anda. Bijaksana dan etis lah dalam menyampaikan opini. Pendapat sepenuhnya tanggung jawab Anda sesuai UU ITE.

Powered by Blogger.