Cara membuat breadcrumb di blog

Cara membuat breadcrumb di blog ~ Seperti yang kita ketahui bahwa tampilan breadcrumb membuat hasil tampilan browsing kita menjadi lebih menarik dan juga membantu para pengunjung mengetahui posisi artikel pada saat membaca artikel tersebut, bahkan ada yang berpendapat bahwa membuat breadcrumb atau memasang breadcrumb juga menambah seo suatu blog. Nah, yuk langsung kita membahas cara membuat breadcrumb tersebut

1. Login ke Blogger

      

2. Pilih Tabs "Template"  kemudian Pilih "Edit HTML"

     

3. Sobat Cari kode seperti    <b:includable id='main' var='top'>

4. Kemudian copas kode di bawah ini  dan di letakkan di atas kode <b:includable id='main' var='top'>
  

<b:includable id='breadcrumb' var='posts'>

<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' 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'>&#187; 

<span typeof='v:Breadcrumb'>

<a expr:href='data:label.url' property='v:title' rel='v:url'>

<data:label.name/></a></span>

</b:loop> &#187; 

<span><data:post.title/></span> </div> 

</b:if> </b:loop></b:if>

</b:includable>

5. Cari kode <b:include data='top' name='status-message'/> 
    setelah ketemu silahkan sobat paste code di bawah ini dan letakkan di atas kode tersebut
    <b:include data='posts' name='breadcrumb'/>

6. Cari lagi kode seperti  ]]></b:skin>, kemudian letakkan kode CSS  di bawah ini tepat di atas kode tersebut

  .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;font-size:95%;line-height: 1.4em;border-bottom:3px double #009999;}

7  Dan Safe Template, selesai breadcrumb blog anda
Demikian postingan artikel cara membuat breadcrumb di blogspot semoga dapat memberi manfaat, salam blogger

Tweet