Cara Membuat Breadcrumb

Breadcrumb adalah sebuah navigasi mengenai asal artikel yang di klik atau dibuka pengunjung blog kamu. Breadcrumb dapat mengindeks konten atau artikel secara otomatis seperti termasuk dalam kategori atau label apa artikel tersebut dimuat. Kelebihannya dapat memudahkan pengunjung melihat asal konten pada blog anda, indeksi otomatis, dan merupakan salah satu sarana pendukung dari optimalisasi SEO blog anda yang berhubungan dengan artikel. Silahkan ikuti cara pembuatannya.


Pemasangan breadcrumb cara pertama
Log in ke blog anda
Klik Rancangan


Klik Edit HTML


Centang Expand Template Widget


Masukkan kode berikut di atas kode ]]></b:skin>
.breadcrumbs {
border-bottom:1px double #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}
Selanjutnya masukkan kode berikut di atas kode <b:includable id='main' var='top'>
<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<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:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>

</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>
Selanjutnya masukkan kode berikut di atas kode <b:if cond='data:post.dateHeader'>
<b:include data='post' name='breadcrumbs'/>
Selanjutnya klik simpan template
Selesai dan lihat hasilnya

bila cara pertama tidak berhasil anda bisa pilih pemasangan breadcrumb cara kedua

cara pemasangan breadcrumb kedua
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
Kemudian pasang kode berikut di bawah kode <div class='post hentry uncustomized-post-template'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>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>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>
Selanjutnya klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu


"keep blogging smiley"

Leave a Reply

    About Me

    Category

    • (4)
    • (1)
    • (4)
    • (15)
    • (17)

    Responses