Cara Mudah Membuat Breadcrumb - Breadcrumb merupakan susunan link yang merupakan struktur lokasi dimana halaman blog kita berada. Breadcrumb bagi para pengguna, user atau pembaca blog mudah untuk mengenali dihalaman mana mereka berada. Menurut beberapa pakar SEO breadcrumb sangat berguna bagi mesin pencari untuk memetakan lokasi dimana konten blog kita berada dan bagi pengunjung memudahkan untuk mengetahui dan menavigasi lokasi halaman blog kita. Dan struktur paling umum dari breadcrumb ini di blog ini seperti contoh berikut ini Home » Blogging & Internet » Cara Mudah Buat Breadcrumb Di Blogger. Sedangkan struktur untuk mesin pencarai tampilannya akan terlihat seperti ini:
Breadcrumb biasanya ditempatkan pada bagian bawah tepat dibawah header blog atau yang paling sering ditemukan diatas postingan artikel blog. Untuk membuatnya pada blog kita harus menambahkan beberapa kode HTML di bagian template blogger sedangkan untuk wordpress sangat mudah karena memang banyak plugin yang menyediakan fitur ini, anda tinggal download lalu menginstallya di wordpress anda, sedang untuk memasang breadcrumb di blog dari blogger berikut tutorial tentang cara mudah memasang Breadcrumb di Blogger:
1. Log in ke akun Blogger
2. Klik Template dan edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya (anda bisa mengeditnya sesuai tampilan yang anda sukai seperti keinginan anda):
4. Jika sudah terpasang lanjutkan dengan mencari kode seperti berikut ini:
<b:includable id='main' var='top'>
5. Tiap kode template untuk masing masing blog berbeda yang jelas anda menemukan id main dengan variabel top, Kalau sudah ketemu hapus kode itu dan ganti dengan kode seperti dibawah ini:
6. Klik Simpan dan lihat hasilnya.
Nah breadcrumb anda sudah jadi, untuk mengubah tampilan sesuai keinginan anda seperti jenis font, background atau jenis tampilan lainnya silahkan edit pada CSS kode breadcrumb tersebut diatas kode ]]></b:skin>. Nah semoga artikel diatas bermanfaat dan jika menemui kesulitan, saran atau masukan silahkan berkomentar di form komentar yang telah disediakan, terima kasih.
Breadcrumb biasanya ditempatkan pada bagian bawah tepat dibawah header blog atau yang paling sering ditemukan diatas postingan artikel blog. Untuk membuatnya pada blog kita harus menambahkan beberapa kode HTML di bagian template blogger sedangkan untuk wordpress sangat mudah karena memang banyak plugin yang menyediakan fitur ini, anda tinggal download lalu menginstallya di wordpress anda, sedang untuk memasang breadcrumb di blog dari blogger berikut tutorial tentang cara mudah memasang Breadcrumb di Blogger:
1. Log in ke akun Blogger
2. Klik Template dan edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya (anda bisa mengeditnya sesuai tampilan yang anda sukai seperti keinginan anda):
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 0px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
4. Jika sudah terpasang lanjutkan dengan mencari kode seperti berikut ini:
<b:includable id='main' var='top'>
5. Tiap kode template untuk masing masing blog berbeda yang jelas anda menemukan id main dengan variabel top, Kalau sudah ketemu hapus kode itu dan ganti dengan kode seperti dibawah ini:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
6. Klik Simpan dan lihat hasilnya.
Nah breadcrumb anda sudah jadi, untuk mengubah tampilan sesuai keinginan anda seperti jenis font, background atau jenis tampilan lainnya silahkan edit pada CSS kode breadcrumb tersebut diatas kode ]]></b:skin>. Nah semoga artikel diatas bermanfaat dan jika menemui kesulitan, saran atau masukan silahkan berkomentar di form komentar yang telah disediakan, terima kasih.
|
|
Jika Anda menyukai Artikel di blog ini, Silahkan share di media sosial melalui tombol diatas atau
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Cari Cara
Atau jika artikel ini bermanfaat silahkan muat ulang namun hargailah dengan menempatkan link web blog ini, Menghargai karya orang lain sama halnya menghargai diri Anda sendiri,Terima kasih!
Atau jika artikel ini bermanfaat silahkan muat ulang namun hargailah dengan menempatkan link web blog ini, Menghargai karya orang lain sama halnya menghargai diri Anda sendiri,Terima kasih!
 |
Baca Juga Artikel Terkait Lainnya
No comments:
Post a Comment