Cara Membuat Breadcrumb di Halaman Posting Keren

Assalamu'alaikum blogger semuanya.. kali ini saya akan membagikan tutorial Cara membuat breadcrumb di halaman posting keren dengan gambar folder. sebenarnya widget ini 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 Keren dengan Gambar Folder. 

Perbedaan breadcrumb pada kali ini yaitu pembatas breadcrumb hanya ada di bagian bawah dengan 2 garis yang berjajar membatasi breadcrumb ini. Selain itu breadcrumb 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.

Langkah-Langkah Cara Membuat Breadcrumb di Halaman Posting 

1. Baca Basmallah biar berhasil hehe
2. Masuk ke akun blogger
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>

.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/AVvXsEhtuZk-cjP12VOnK7hRTGk4QS7f5sUdF5VBRXpBPMHF_-iDfHgTY5OYf3v1hkrYAcmW8okFjvGbruli4Ag89We4DAesk7zVVV1ytdBc52zNjzOqUPhi_K_u9JCihkNofkmDVdFY1Z99fop5/s1600/browse.jpg) left no-repeat;}
.breadlabel {padding:0 0 0 28px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISZm1NpM33H7DsdQez_XpLMtabFqC-5SD5G16CMNRQipl_Post1Cuql9amy0AE44J68jHkhR3QHGJTTOA6yPM9YvKdXMaI9zu4-ihEqb8rNmt6R5e-eP6Uu-2wrx1ZtcdSCIgo0DXMtCU/s1600/breadlabel.jpg) left no-repeat;}.breadpost {padding:0 0 0 28px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISZm1NpM33H7DsdQez_XpLMtabFqC-5SD5G16CMNRQipl_Post1Cuql9amy0AE44J68jHkhR3QHGJTTOA6yPM9YvKdXMaI9zu4-ihEqb8rNmt6R5e-eP6Uu-2wrx1ZtcdSCIgo0DXMtCU/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

<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 biru 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