Cara Membuat BreadCrumbs Di Blog

breadcrumb adalah bentuk bantuan navigasi yang digunakan dalam antarmuka pengguna. Hal ini memungkinkan pengguna untuk melacak lokasi mereka dalam dokumen atau artikel.
Cara membuat breadcrumbs di blog
1. Login Ke Blogger.
2. Klik Template, Backup template untuk jaga2 bila diperlukan,
atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode)
Dan cari kode berikut ]]></b:skin>
Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas ]]></b:skin>

123456/* breadcrumbs
----------------------------------------------- */
.breadcrumbs{padding-top:5px;padding-bottom:5px;margin:0 0px 5px 0px;font-size:11px;border-bottom:1px solid green;font-weight:bold;font-family:Tahoma;height:auto;}
.breadcrumbs a, .breadcrumbs a:visited{color:#CC0099}
.breadcrumbs a:hover{color:#00477D}

Warna Hijau dapat disesuaikan dengan keinginan.

7. Cari kode <b:includable id='main' var='top'> dan setelah ketemu tekan panah sebelah kirinya untuk memperluas.

8. Hapus dan Ganti kode <b:includable id='main' var='top'> dengan kode dibawah ini. Kode dibawah ini saya dapat dari Kang Ismet Breadcrumbs SEO Friendly dan valid HTML 5 

Test Valid HTML 5

12345678910111213141516171819202122232425262728293031323334353637383940414243<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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></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'/>

Demikian postingan tentang cara membuat Breacrumbs, mudah-mudahan dapat bermanfaat.

Sumber :

http://www.aura-ilmu.com

Tweet