Cara Membuat Navigasi Breadcrumb `

Navigasi Breadcrumb atau Breadcrumb navigation yang terletak pada bagian atas postingan,yang linknya adalah halaman  home >> Tips Seo >> Cara membuat navigasi breadcrumb
navigasi breadcrumb ini biasanya nampak pada halaman posting, dan tidak muncul pada halaman beranda/home,apabila Terindex Google tampilannya seperti berikut :Home > Tips Seo > nah ..kira kira seperti itu.navigasi breadcrumb ini sangat membantu dalam optimasi seo blog menurut pakar seo dengan membuat navigasi breadcrumb akan memudahkan google mengindeks Keyword/kata kunci postingan - postingan blog kita karena letak linknya yang berurutan.
Sobat Tertarik Untuk Mencoba?,, Ikuti Langkah Langkah Berikut:
Cara Membuat Navigasi Breadcrumb

  • Login ke blog >> rancangan >> Edit HTML
  • beri centang 'expand widget templates'
  • lalu cari kode  <b:includable id='main' var='top'> (CTRL+F cara cepat mencari kode) Jika ada dua kodenya pilih yang pertama.
  • Kemudian copy kode dibawah letakkan diatasnya
    <b:includable id='main' var='top'>
    tadi.


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<!-- 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' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</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 == "archive"'>
<!-- 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 == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<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>


Cari lagi kode seperti ini   <b:include data='top' name='status-message'/> 
jika sudah tempelkan kode berikut di atas kode tadi.
  <b:include data='posts' name='breadcrumb'/>
  • kalau sudah cari lagi kode ]]></b:skin>


  • copy kode CSS berikut ini letakkan di atas kode ]]></b:skin>
tadi
 .breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
 
  • jika sudah SAVE template sobat,

catatan : kode peletakan  sering terjadi kesalahan pada <b:include data='posts' name='breadcrumb'/>  untuk lebih jelas sobat lihat kode pemasangan dibawah :

<b:includable id='main' var='top'>
 <b:if cond='data:mobile == &quot;false&quot;'><!-- posts -->
    <div class='blog-posts hfeed'>
 <b:include data='posts' name='breadcrumb'/>
<b:include data='top' name='status-message'/><data:defaultAdStart/>

Demikian Cara Membuat Navigasi Breadcrumb.
Semoga Bermanfaat,,

Terima kasih Anda telah membaca Artikel mengenai Cara Membuat Navigasi Breadcrumb dan Kata kunci untuk Artikel ini yaitu Cara Membuat Navigasi Breadcrumb

2 komentar:

  1. bagus sob tutorialnya, tapi ini untuk blogspot ya???

    saya juga pernah nulis artikel yang hampir saya, tapi ini untuk wordpress http://www.arie.pro/blog/cara-membuat-navigasi-situsblog-breadcrumb/

    salam kenal ya, jika ada kesempatan berkunjung ke blogku ya!

    BalasHapus
    Balasan
    1. @ arie : iya sob,soalnya saya belum pernah pake WP,sebenarnya dulu saya udah belajar DI WP CMS,lewat hosting idhostinger.com namun belum sempet otak atik,Terima kasih Kunjungannya..

      Hapus

Silahkan Anda Komentarkan Tentang Post ini yang baik dan sopan,
Jangan sampai komentar anda dianggap spam . . .