Cara Memasang Breadcrumb Di Template Terkemuka

Seo v6 - Cara memasang Breadcrumb Di Template Bawaan Terbaru Blogger Terkemuka, Breadcrumb merupakan sebuah code yang didesain untuk mempermudah navigasi dimana dengan adanya breancrumb ini kita akan tau jalur dari home ke url yang dituju.

Pada hasil penelusuran di mesin telusur, beradcrumb ini termasuk Rich snippet yang di rekomendasikan olah web master dan tentunya ini bisa menambah nilai seo sebuah template. Pada template bawaan blogger masih belum bisa kita temukan breadcrumb sehingga diharuskan kita harus memasang manual.

Berikut ini langkah-langkah yang bisa sobat terapkan untuk memasang Breadcrumb Di Template Terkemuka - Seo v6 :

Baca juga : Cara Membuat Title Blog Post Jadi Kecil Pada Template Terkemuka

1. Cari code ini <b:includable id='main' var='this'> Lalu hapus ganti dengan code dibawah ini

  <b:includable id='breadcrumb' var='posts'>
      <b:if cond='data: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'/>

2. Selanjutnya copy paste CSS dibawah ini di atas code ]]></b:skin>

 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 { font: 400 12px Open Sans, sans-serif; padding-left: 24px; padding-top: 24px; padding-right: 24px;} }

Selanjutnya tinggal di save dan lihat hasilnya, jika ada yang eror , kurang jelas atau masukan lainnya bisa langsung coment ya, selamat mencoba - Seo v6 .