Ini solusinya cara mudah membuat breadcrumbs menu navigasi pada blogger

Hallo sahabat webmuna dimanapun anda berada, pada kesempatan kali ini saya akan membahas sebuah tutorial tentang bagaimana cara membuat breadcrumbs menu navigasi yang berada dibawah header atau menu navigasi seperti pada contoh gambar di atas. 

Dalam membuat breadcrumbs menu navigasi pada blogger sebenarnya sangat mudah hanya dengan mengedit sedikit CSS breadcrumbs untuk berada di bawah menu navigasi blog.

Nah jika sobat ingin mencoba mempraktekkan berikut ini saya akan membahas sedikit tutorial menurut pengalaman yang sudah pernah saya praktekkan dalam membuat breadcrumbs menu navigasi yang berada di atas postingan blog.

Baiklah jika sobat sudah siap ikuti dan praktekkan sesuai dengan tutorial dibawah ini. Saya sarankan sebelum sobat mempraktekkan backup dulu template blog sobat untuk jaga-jaga supaya jika terjadi kesalahan bisa di kembalikan seperti semula.

CARA MEMBUAT BREADCRUMBS MENU NAVIGASI PADA BLOG

1. Untuk langkah pertama login dulu kedalam blogger sobat kemudian pilih Tema / Template - Edit HTML
2. Jika sudah selesai selanjutnya cari kode ]]></b:skin> tekan tombol Ctrl + F untuk memudahkan pencarian.
3. Selanjutnya Copy kode CSS dibawah ini kemudian letakkan atau Paste tepat di ATAS kode ]]></b:skin>
   

   #breadcrumbsss {float: left;width: 100%;background: linear-gradient(to right,#c00b45 0,#4c5792 100%);padding: 20px 0;margin: 0px;z-index: 1;position: absolute;}
   .breadcrumbs{position: relative;z-index: 2;padding-bottom: 30px;color: #fff;width: 1150px;}
   .breadcrumbs a{color: #fff;}
   

4. Kemudian copy kode dibawah ini dan letakkan dibawah menu navigasi atau di atas postingan blog. Letakkan kode tersebut dengan baik supaya tidak terjadi kesalahan.
   

   <b:if cond='data:blog.url != data:blog.homepageUrl'>
   <div id='breadcrumbsss'>
     </div>
   </b:if>
   

5. Jika sudah selesai selanjutnya cari kode <b:includable id='main' var='top'> Jika sudah ketemu GANTI kode tersebut 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> / 
   <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 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 == &quot;archive&quot;'>
   <!-- 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 == &quot;index&quot;'>
   <div class='breadcrumbs'>
   <b:if cond='data:blog.pageName == &quot;&quot;'>
   <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. Terakhir klik menu SIMPAN untuk menyimpan template blog sobat kemudian lihat blog sobat sudah terpasang menu navigasi breadcrumbs yang berada di atas postingan blog.

Sedikit tambahan :

* Jika setelah sobat ikuti semua tutorial di atas dan menu breadcrumbs nya tidak sesuai dengan keinginan anda atau tidak beraturan maka sobat harus mengedit CSS breadcrumbs nya supaya sesuai dengan template blog yang sobat gunakan.  

* Dalam mengedit CSS lihat MARGIN dan PADDING nya atur sesuai dengan posisi template blog sobat.

Demikianlah sedikit tutorial dari pengalaman yang sudah saya praktekkan dalam membuat breadcrumbs seperti menu navigasi yang berada di atas postingan post.

Semoga bermanfaat dan dapat menambah sedikit pengalaman dalam membuat breadcrumbs pada blog.

Bagikan artikel ini jika menurut sobat bermanfaat.