Cara membuat breadcrumbs di templat bawa'an blogspot

Breadcrumbs

Templat bawa'an blogspot ini memang keren2 dan cantik2 namun templat bawaan masih standar dalam hal fitur.

Tapi kalian tetap bisa buat templat bawa'an blog lebih menarik.
Seperti tutorial kali ini admin akan bagikan cara membuat breadcrumbs di templat bawaan blogspot.

Sebelum kita lanjut ke tutorial alangkah baiknya kita mengetahui apa itu breadcrumbs?

Breadcrumbs adalah navigasi pada sebuah blog yang berisi lokasi kategori blog yang sedang di buka.dengan mata lain kita bisa msngetahui jalur blog yang kita buka

Untuk membuat breadcrumbs di templat bawaan blogspot kalian bisa ikuti tutorial di bawah, ikuti sampai akhir artikel supaya tidak ada kesalahan dalam memasang breadcrumbs ini

Pertama
Pada edit html, cari code ini <b:incudable id='main' var='this'> Lalu hapus ganti dengan kode dibawah ini

<b:includable id='breadcrumb' var='posts'>        
 <b:if cond='blog.pageType == &quot;item&quot;'>         
  <b:if cond='data:blog.pageType == &quot;item&quot;'>        
<b:loop values='data:posts' var='post'>    
     <b:if cond='data:post.labels'>      
   <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; 
<b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187;<span><data:post.title/></span>         
</div>         
<b:else/>         
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span>
</div>      
</b:if>         
</b:loop>       
<b:else/>         
<b:if cond='data:blog.pageType == &quot;archive&quot;'>         
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span>      
 </div>        
<b:else/>         
<b:if cond='data:blog.searchQuery'>         
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><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' rel='nofollow'>Home</a></span> &#187; <span>All post</span>         <b:else/>         <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>          </b:if>         </div>       </b:if>       </b:if>       </b:if>       </b:if>       </b:if>     </b:includable>        <b:includable id='main' var='this'>    
<b:include data='posts' name='breadcrumb'/>

Kedua

Cari kode ]]><b:skin> dan tambahkan css berikut di atasnya

body.item-view .Blog .post-title-container{ 
padding-top: 0px; 
} 
.breadcrumbs { 
padding-left: 140px;     padding-top: 50px;     background: #25a186;     font: 400 14px Open Sans, sans-serif;       color: rgba(255, 255, 255, 0.25);
 } 
.breadcrumbs span { 
font-style: italic;     color: rgba(255, 255, 255, 0.50); 
}
 @media screen and (max-width: 1168px)
{ 
.breadcrumbs {
padding: 62px calc((100% - 920px) / 2) 1px;}} 
@media screen and (max-width: 968px)
{  
.breadcrumbs 
{  

Dan kalian bisa sesuaikan backgroundnya dengan templat kalian dengan cara mengganti kode yang berwarna biru dengan warna kalian.
Jika ingin background breadcrumbs transparan kalian tinggal ganti kode tersebut dengan #

Terakhir simpan templat kalian.

Dan ada satu lagi yang penting agar breadcrumbs bisa muncul di templat bawa'an blog, karna kode <b:incudable id='main' var='this'>  lebih dari satu seperti templat yang saya pakai, kalian bisa meletakan kode breadcrumbs di <b:incudable id='main' var='this'> pada halaman utama supaya bisa muncul yaitu dengan cara

• Masih pada edit html
• Dan cari kode blog1 ini kode widget halaman 
• Dan letakan kode bredcrumbs di kode  <b:incudable id='main' var='this'> di blog1 ini selesai

Share this post