» » Cara membuat breadcrumb di halaman posting blog versi 2

Cara membuat breadcrumb di halaman posting blog versi 2

Cara membuat breadcrumb di halaman posting blog versi 2


Hai Sobat Blogger ! Kembali update nih, kali ini saya akan membagikan tutorial tentang widget yang sebenarnya bisa dibilang sudah kuno alias sudah banyak yang memposting tentang artikel ini, tapi jika dimodifikasi sedemikian rupa, tutorial ini akan menjadi lebih menarik dan sedap untuk dipandang , selain itu juga memberikan kemudahan bagi para pengunjung kita. Langsung aja kali ya, kali ini saya akan memberi sedikit tutorial tentang cara membuat breadcrumb di halaman posting blog versi 2. Melanjutkan postingan yang sudah saya buat yaitu Cara membuat kamu ada di (breadcrumb) di halaman postingan blog. Kali ini saya akan memberi sedikit alternatif modifikasi yang juga saya terapkan di blog saya ini. Berbeda dengan versi yang pertama, versi kedua ini lebih elegan. Versi pertama menggunakan pembatas garis yang mengelilingi breadcrumb tersebut sehingga berbentuk kotak. Pada versi yang kedua ini pembatas breadcrumb hanya ada di bagian bawah dengan 2 garis yang berjajar membatasi breadcrumb ini. Selain itu versi kali ini ditambahkan icon gambar yang biasa terdapat di icon windows 7, yaitu icon download dan folder kosong. Nantinya icon ini bisa dirubah sesuai keinginan sobat. Penasaran dan tertarik untuk membuatnya? langsung aja kita bahas dan simak bersama disini.

UPDATE JUNI 2012 ( FIX CODE ) 100% TESTED

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda  Expand Template Widget  
5.) Tekan Ctrl + F , cari kode ]]></b:skin>
6.) Jika sudah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
Kode
.breadcrumbs{padding:5px 5px 5px 0px;margin:0px 0px 15px 0px;font-size:95%;line-height:1.4em;border-bottom:3px double#e6e4e3}.breadhome {padding:0 0 0 17px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMhILy5CuXFO9Spovvx3kKTApWn_Od6KVXLTVluEnYDoBtxET4wxR-cKHI2RW4gXs4mXNcgWnYX7l-8wmPDXZgd3vNjhof1_Rj6rUbzW-MQ0NPREPsYGHPW8v6nP7xS2r-VjyOeMVH_OXS/s1600/browse.jpg) left no-repeat;}
.breadlabel {padding:0 0 0 28px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEnlUcRyr4gbVXd2v8FFTOv_60CnI1hM0xspADiYztc19IpSSx0BPKjM_d6lM9dpdGtVWSwNa1lQmgqDFem_uXWNZQBJb7gykiiXvO7p7Crn3n4YpSWeKUGz7-ixLuD6BDDhZR78_WUKD/s1600/breadlabel.jpg) left no-repeat;}.breadpost {padding:0 0 0 28px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEnlUcRyr4gbVXd2v8FFTOv_60CnI1hM0xspADiYztc19IpSSx0BPKjM_d6lM9dpdGtVWSwNa1lQmgqDFem_uXWNZQBJb7gykiiXvO7p7Crn3n4YpSWeKUGz7-ixLuD6BDDhZR78_WUKD/s1600/breadlabel.jpg) left no-repeat;}
7.) Lalu cari kode <b:includable id='main' var='top'> , ganti kode <b:includable id='main' var='top'> dengan kode dibawah ini
Kode
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- 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 class='breadhome' 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'><b:if cond='data:label.isLast == &quot;true&quot;'>&#187; <span class='breadhome' typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:if></b:loop><span class='breadpost'><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'> Home</a></span> &#187; <span class='breadlabel'>Unlabelled</span> &#187; <span class='breadhome'><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Dokumen untuk <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><span class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span class='breadlabel'>Semua Posting</span><b:else/><span class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span class='breadlabel'>Artikel terkait tentang <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'/> 
8.) Ganti alamat url gambar berwarna hijau dengan alamat url gambar icon sesuai keinginan sobat
Ganti kata bewarna merah dengan kata sesuai keinginan sobat blogger masing-masing
9.) Simpan Template dan lihat hasilnya

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Contact Us

Nama

Email *

Pesan *

Back To Top