Cara Menciptakan Breadcrumb Di Halaman Posting Keren

Assalamu'alaikum blogger semuanya.. kali ini saya akan membagikan tutorial Cara menciptakan breadcrumb di halaman posting keren dengan gambar folder. sebenarnya widget ini sanggup dibilang sudah kuno alias sudah banyak yang memposting wacana artikel ini, tapi jikalau dimodifikasi sedemikian rupa, tutorial ini akan menjadi lebih menarik dan sedap untuk dipandang , selain itu juga memperlihatkan fasilitas bagi para pengunjung kita Langsung aja kali ya, kali ini saya akan memberi sedikit tutorial wacana Cara Membuat Breadcrumb di Halaman Posting Keren dengan Gambar Folder. 

Perbedaan breadcrumb pada kali ini ialah pembatas breadcrumb hanya ada di bab bawah dengan 2 garis yang berjajar membatasi breadcrumb ini. Selain itu breadcrumb kali ini ditambahkan icon gambar yang biasa terdapat di icon windows 7, ialah icon d0wnl0ad dan folder kosong. Nantinya icon ini sanggup dirubah sesuai impian sobat. Penasaran dan tertarik untuk membuatnya? eksklusif aja kita bahas dan simak bersama disini.

Langkah-Langkah Cara Membuat Breadcrumb di Halaman Posting 

1. Baca Basmallah agar 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 arahan ]]></b:skin>
6. Jika sudah ketemu, letakkan arahan dibawah ini sempurna diatas arahan ]]></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/AVvXsEgbxTkmI_Z8kqYEXqXHFzb-ObbAia3LBuO2_mlG9896daVbIO63ijwt2lfA1mWVvJ2LEWfxelujdaNvAPSy6XUaWJHDqEqUu3vz3Xim48uSqxfU3Fvd9CM3_KDcYfdJNLgj3qeRU6hza7uV/s1600/browse.jpg) left no-repeat;}
.breadlabel {padding:0 0 0 28px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWMzfneA78h-l-iYBg4F6GBgPDNxgduNVtbgU12upYIqvpoXZleGpLBxyQYRn2Ttl98OoFAj0t93eDm6VLNTFgxE9fbrdrqUnZgQCMcaYTm9OqMu_bKAhq7IuvmpYRpsCQxOsEYyobnqp/s1600/breadlabel.jpg) left no-repeat;}.breadpost {padding:0 0 0 28px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWMzfneA78h-l-iYBg4F6GBgPDNxgduNVtbgU12upYIqvpoXZleGpLBxyQYRn2Ttl98OoFAj0t93eDm6VLNTFgxE9fbrdrqUnZgQCMcaYTm9OqMu_bKAhq7IuvmpYRpsCQxOsEYyobnqp/s1600/breadlabel.jpg) left no-repeat;}

     7. Lalu cari arahan <b:includable id='main' var='top'> , ganti arahan <b:includable id='main' var='top'> dengan arahan 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 impian sobat
         Ganti kata bewarna merah dengan kata sesuai impian sahabat blogger masing-masing

     9. Simpan Template dan lihat jadinya

Sumber http://nandarious.blogspot.com