Rabu, 19 Desember 2012

Cara Membuat Breadcrumb di Blogspot


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.

Langsung aja tu de poin, berikut cara membuat breadcrumb di blogspot:

Masuk ke blogger.com, Pilih Tab Design, Pilih Tab Edit HTML, ceklis pada Expand Widget Templates

Cari kode ini pada template anda.
]]></b:skin>
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;
}


Cari kode berikut di template Anda.

<b:includable id='post' var='post'>

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>

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.

SEMOGA BERMANFAAT

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →
Powered By: BloggerYard.Com

0 komentar: