Cara Membuat Breadcrumb Di Blog

Daftar Isi [Tampilkan]

Cara Membuat Breadcrumb Di Blog
siang sahabat blogger saya akan berbagi sedikit ilmu tentang menu navigasi Bread Crumb ini berupa beberapa link yang menuju ke halaman homepage blog ( Home / Beranda ), link kategori atau label artikel serta judul artikel yang sedang terbuka. Untuk lebih jelasnya, lihat di bagian atas artikel ini.
Hampir semua blog menggunakan breadcrumb. Alasan utama blogger memasang menu navigasi SEO ini adalah untuk meningkatkan SEO Blog. SEO yang yang kuat akan mendatangkan trafik yang melimpah. Blog tarfik yang melimpah akan menjadi sebuah ladang online dan pemiliknya akan panen dollar. Mau ???
Contoh Breadcrumb Punya saya

1. Login ke Blogger

2. Masuk ke Template

3. Klik Edit HTML

4. Centang "Expand Template Widget"

5. Sekarang tekan CTRL + F dan cari kode <div class='post-hentry'>

6. Letakkan kode berikut SEBELUM (diatas) kode diatas :

    <b:if cond='data:blog.homepageUrl == data:blog.url'>

    <b:else/>

    <b:if

cond='data:blog.pageType == &quot;item&quot;'>

    <div class='breadcrumb'>

    <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> - <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' itemprop='url'> , <span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'/></b:loop></b:if></span> - <span itemscope='http://data-vocabulary.org/Breadcrumb' itemtype='http://data-vocabulary.org/Breadcrumb'><span itemprop='title'><data:post.title/></span></span>

    </div>

    </b:if>

    </b:if> 

7. Sekarang tekan CTRL + F dan cari kode ]]></b:skin>

8. Letakkan kode berikut SEBELUM (diatas) kode diatas :

    .breadcrumb{margin:2px 2px 5px 2px;overflow:hidden;border:1px solid #000;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color:#000;}

9. simpan template.

Semoga ini akan berguna bagi anda semua, dan dapat berbagi kepada yang lain (jangan lupa untuk saling berbagi iya)

ilmutipsTips Blogger

• Share