coretan Fuad

Trik Cara Membuat Breadcrumb di Blogspot

Pastinya sudah banyak yang tau kan apa itu breadcrumb
? Ya breadcrumb adalah menu navigasi
yang biasanya terdapat diatas postingan. Tujuannya adalah untuk menunjukkan
urutan isi halaman dari Home sampai ke posting artikel yang sedang dibaca.
Kalau kita menilik asal muasalnya, menu
navigasi breadcrumb ini berasal dari platform Wordpress yang secara default sudah disetting
otomatis urutan navigasinya mulai dari Home > Parent Category (kategori
utama) > Subcategory > Posting. Sedangkan untuk platform blogger, karena
belum ada setting otomatisnya maka kita perlu melakukan sedikit trik cara membuat breadcrumb di blogspot ini. Menu navigasi breadcrumb di blogspot ini kita
buat berdasarkan urutan Home > Label > Posting.  Sama seperti di WP, breadcrumb di blogspot tidak akan terlihat pada halaman Homepage,
tetapi dapat terlihat pada halaman posting, label dan juga arsip.

• Login ke dashboard blogger anda, pilih Rancangan
  > Edit HTML, centang Expand widget template.

• Cari kode ini
  
  
  
  
  
  
  
  
  
  ]]></b:skin>
  pada template anda. Copy kode CSS dibawah ini dan paste-kan kode CSS tepat
  diatas kode
  
  
  
  
  
  
  
  
  
  ]]></b:skin>  

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

• Lanjutkan dengan mencari kode ini
  
  
  
  
  
  
  
  
  
  <b:include data=top
  name=status-message/>  pada template anda. Letakkan kode dibawah
  ini dibawahnya.

<b:include data=posts name=breadcrumb/>

• Kemudian cari lagi kode 
  
  
  
  
  
  
  
  
  
  <b:includable id=main
  var=top> . Copy script dibawah ini dan letakkan tepat
  diatas kode tadi.

<b:includable id=breadcrumb var=posts>
<b:if cond=data:blog.homepageUrl == data:blog.url>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond=data:blog.pageType == "item">
<!-- breadcrumb for the post page -->
<p class=breadcrumbs>
<span class=post-labels>
<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 == "true"> »
<a expr:href=data:label.url rel=tag><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond=data:blog.pageType == "archive">
<!-- breadcrumb for the label archive page and search pages.. -->
<p class=breadcrumbs>
<span class=post-labels>
<a expr:href=data:blog.homepageUrl>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond=data:blog.pageType == "index">
<p class=breadcrumbs>
<span class=post-labels>
<b:if cond=data:blog.pageName == "">
<a expr:href=data:blog.homepageUrl>Home</a> » All posts
<b:else/>
<a expr:href=data:blog.homepageUrl>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

• Cek sekali lagi apakah anda sudah meletakkan
  kode CSS/script yang diberikan pada tempat yang dimaksud pada langkah 2-4
  diatas. Sebaiknya download dulu template anda sebelum dimodifikasi.

• Jika sudah yakin semua langkah diatas sudah
  dilakukan dengan benar, Save template anda.

Diposting oleh Unknown di 06.15

Kirimkan Ini lewat EmailBlogThis!Bagikan ke XBerbagi ke FacebookBagikan ke Pinterest

Label: blogspot, breadcrumb, cara, di, membuat, trik