Skip to main content

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
letak code html Cara Memasang Breadcrumb Di Template Terkemuka
  <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 .


Comments

  1. Mantap om 😊👍

    Kebetulan skrng saya lagi dirumah mertua.

    Nanti setelah balik ke Jakarta akan saya coba pasang melalui PC.

    ReplyDelete
    Replies
    1. Silahkan om, kalau ada kendala lain nanti bisa di tanyakan lagi

      Delete
    2. udah saya coba pasang tapi belum berhasil om hehehe

      masalahnya yg kode ada banyak,,,, klo gak salah ada 4 kode,,, ada yg label, kategori, dll

      yg bener buat dipasang yg bagian mana?

      :)

      Delete
    3. Baca artikel saya : cara-mengedit-template-blogger-contempo-jadi-seo-friendly (liat poin cara memasang breadcrumb nya), disitu ada gambar dimana letak codenya, nanti kalo kurang jelas bisa ditanyakan lagi

      Delete
  2. Keren bang template jadi kaya gini..

    ReplyDelete
    Replies
    1. Trimakasih sis, mudah koq bikinnya :)

      Delete
  3. Cara-cara bgini yg msh krng paham. Maklum br bljr

    ReplyDelete
    Replies
    1. Silah kan ditanyakan sis kalau ada yg kurang paham , nanti saya bantu pelan-pelan :)

      Delete
  4. saya sudah mencari kode ini tapi ada banyak saya tidak tau untuk menaruhnya dimana

    ReplyDelete
    Replies
    1. sudah saya update artikelnya, ada gambar petunjuknya,kalo ada yang kurang jelas lagi bisa ditanyakan

      Delete
  5. kode ini ada 11 di template saya om... kira2 yg mana ya...

    ReplyDelete
    Replies
    1. lihat petunjuk gambarnya itu gan, letak codenya dibawah widget id blog1

      Delete
  6. Udah Coba di Template Soho tapi gagal mas.

    ReplyDelete
    Replies
    1. code css nya itu hanya untuk template terkemuka mas

      Delete
  7. wuih..disini rupanya...kemaren saya coba-coba..nggak bisa-bisa..... ntar ane praktekin punya nya mas..... klu nggak bisa juga ane tanya lagi ntar ya....

    ReplyDelete

Post a Comment