Senin, 07 Mei 2012

Cara Membuat Breadcrumb Di Blog


Cara membuat breadcrumb di blogspot/blogger ternyata tidak sulit. Banyak blogger yang sudah memposting di blognya masing-masing tentang tutorial membuat breadcrumb di blogspot seperti 'cara mudah membuat breadcrumb', 'buat template blogger seo friendly dengan breadcrumb', 'cara membuat navigasi breadcrumb', 'cara pasang breadcrumb di blog', dan lain-lain.
Pada template bawaan blogger, semuanya tidak ada yang sudah menyertakan breadcrumb, oleh karena itu kita harus memasangnya secara manual. Pada template blogger dari luar bawaan blogger.com, ada beberapa yang sudah menyertakan fitur breadcrumb, bila tidak adapun kita tetap bisa membuatnya dengan mudah.

Bagi yang belum tau apa itu breadcrumb, silahkan baca artikel sebelumnya tentang definisi breadcrumb dan fungsi breadcrumb di blogspot.

Langsung aja tu de poin, berikut cara membuat breadcrumb di blogspot:
  1. Masuk ke blogger.com, Pilih Tab Design, Pilih Tab Edit HTML, ceklis pada Expand Widget Templates

  2. Cari kode ini pada template anda.
]]></b:skin>
  1. Copas kode berikut diatas kode ]]></b:skin> :
.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
  1. Cari kode berikut di template Anda.
<b:includable id='post' var='post'>
  1. Copas kode berikut dibawah kode <b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<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 != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
  1. Klik Save Templates.

Kalo berhasil, maka di setiap judul postingan akan ada navigasi yang disebut breadcrumb. Sekedar catatan, sebaiknya download dulu template blogspot Anda sebelum melakukan pengeditan HTML, agar bila ada yang salah nantinya template bisa dikembalikan seperti semula.

Terima kasih telah membaca cara membuat breadcrumb di blogspot, semoga bermanfaat khususnya untuk memaksimalkan template blogspot agar lebih SEO friendly. Silahkan komen kalo ada yang ga jelas.

0 komentar:

Posting Komentar

Pemberitahuan

Selamat Datang di Website Blog fcfarid10.blogspot.com, Jika anda Ingin mendownload tapi Filenya rusak Komentar ya