Cara Membuat Breadcrumb Di Blog
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 ???
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 == "item"'>
<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 != "true"'/></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
Gampang bener kan ? hehehe semoga berhasil bagi yang mencoba ya :)
Oke Segitu Dulu Postingan dari Abang Semoga berguna
Ditunggu komentarnya :)
Artikel Menarik Lainnya
Cara Membuat Breadcrumb Di Blog
Diulas oleh 798 Pembaca Tips Blogging And Computer
5
Rabu, 25 Juli 2012
Langganan:
Posting Komentar (Atom)
2 Responses to “Cara Membuat Breadcrumb Di Blog”
awalnya aku gak tahu nama menu ini , tapi akhirnya tahu juga...trima kasih gan... 23 Januari 2013 pukul 19.20
terima kasih tutorialnya gan, ijin mencoba ya... 23 Januari 2013 pukul 19.21
Posting Komentar