Cara Memasang Navigas Breadcrumbs

Navigasbreadcrumbs merupakan petunjuk arah berbentuk internal link yang dapat mempermudah pengunjung dalam mengetahui dimana letak suatu konten blog. Navigasi breadcrumbs biasanya terletak diatas atau dibawah judul postingan / artikel.

Navigasibreadcrumbs berfungsi untuk mempermudah pengunjung dalam mengetahui posisi atau letak suatu konten atau artikel pada suatu blog. Dan menurut kebanyakn blogger bahwa Navigasi breadcrumbs juga dapat mempermudah mesin pencari dalam mengindex artikel yang ada di blog.

1. Login ke akun blogger
2. Klik "Template"
3. Kemudian "Edit HTML"

4. Cari kode  ]]></b:skin>
5. Letakkan kode berikut di atas  ]]></b:skin>]

.breadcrumbs{ padding:5px 5px 5px 0; margin:0; font-size: 90%; line-height:1.4em; border-bottom:1px solid black; }

6. Selanjutnya cari kode  <b:includable id='main' var='top'>
7. Lalu ganti dengan kode berikut !!!

<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'><b:if cond='data:label.isLast == &quot;true&quot;'> &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:if></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'/>

8. Kemudian simpan template dan lihat hasilnya

NB : Untuk memudahkan pencarian kode tekan ctrl + F pada keyboard
Baca juga cara menggunakan tombol navigasi di sini !

Semoga berhasil !!!

SHARE SHARE SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•