Cara Memasang Breadcrumbs yang Terindeks Google

Cara Memasang Breadcrumbs yang Terindeks Google - Salah satu blog saya lainnya yang berjudul Intips-Busana telah berusia satu bulan dengan beberapa artikel di dalamnya. Template yang digunakan untuk blog tersebut tidak terdapat menu navigasi breadcrumbs-nya.

Kemudian saya memasang breadcrumbs pada blog tersebut beberapa hari yang lalu. Setelah saya cek di Google hari ini, ternyata ada beberapa artikel yang breadcrumbs-nya telah terindeks oleh Google. Screenshot-nya bisa dilihat di bawah ini.

Breadcrumbs yang Terindeks Google

Nah, berikut ini langkah-langkah memasang breadcrumbs yang terindeks Google pada template yang belum terdapat menu breadcrumbs-nya.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" > "Template".

3. Backup template dulu dengan cara klik tombol "Cadangkan / Pulihkan" > tombol "Unduh template lengkap".

4. Klik tombol "Edit HTML" > "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Cari kode ]]></b:skin> dan letakkan kode berikut di atas kode tersebut.

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

7. Selanjutnya cari kode <b:includable id='main' var='top'> lalu hapus kode tersebut dan ganti dengan kode di bawah ini.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div> 

<b:else/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<!-- 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' 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:else/> 

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div> 

</b:if> 

</b:loop> 

<b:else/> 

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 

<!-- breadcrumb for the label archive page and search pages.. --> 

<div class='breadcrumbs'> 

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <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'>Home</a></span> &#187; <span>All posts</span> 

<b:else/> 

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span> 

</b:if> 

</div> 

</b:if> 

</b:if> 

</b:if> 

</b:if> 

</b:if> 

</b:includable> 

<b:includable id='main' var='top'> 

<b:include data='posts' name='breadcrumb'/>

8. Klik tombol "Simpan template".

Cukup sekian tulisan singkat yang dapat saya ketikkan di Blog Mulyono Website ini. Semoga dapat berguna buat teman-teman sekalian, terutama buat sahabat blogger di indonesia. Jangan pernah lupa untuk membagikannya di jejaring sosial facebook, twitter dan google plus. Sampai ketemu di informasi berikutnya, thanks sobat, Heppy Bloging!

Memunculkan Lebih Dari Satu Label pada Menu Breadcrumbs

Pada template Thesis SEO Blogger yang sedang saya gunakan ini (saat artikel ini ditulis) memang sudah tertanam 'menu breadcrumbs'. Namun, jika artikel atau posting yang mempunyai label lebih dari satu, label yang tampil pada 'menu breadcrumbs' tersebut hanya satu. Tidak semua label yang dimiliki artikel tersebut muncul.

Untuk menyiasati agar artikel yang mempunyai beberapa label dapat tampil label-labelnya pada 'menu breadcrumbs', maka kita perlu mengedit sedikit kode 'menu breadcrumbs' tersebut.

Label yang muncul hanya satu pada menu breadcrumbs.

Berikut ini langkah-langkah untuk membuat semua label tampil pada 'menu breadcrumbs' pada template Thesis SEO Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian pilih menu "Template".

3. Selanjutnya klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template. Hal ini berguna untuk memudahkan mengembalikan template ke keadaan semula bila terjadi kesalahan dalam pengeditan.

4. Klik tombol "Edit HTML" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Cari kode seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

7. Perhatikan kode <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> lalu tambahkan kode &#187; sehingga menjadi <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

Selanjutnya amati kode:

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Kemudian ganti tanda"=" yang pertama dengan "!" dan tukar letak kedua kode tersebut sehingga menjadi seperti di bawah ini:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

8. Setelah kode nomor 6 diedit, maka hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

9. Klik tombol "Simpan template" dan periksa hasilnya pada artikel yang mempunyai lebih dari satu label.

Semua label tampil pada menu breadcrumbs.

Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot

Sebelumnya saya sudah memposting artikel tentang cara membuat menu navigasi breadcrumbs di Blogger. Untuk membaca postingan tersebut silakan klik di sini. Kali ini saya akan membahas hal yang sama. Namun, cara yang berikut ini agak sedikit berbeda. Bila pada cara yang sebelumnya tidak berhasil, Anda dapat mencoba cara yang satu ini.

Langsung saja, berikut ini langkah-langkah dalam membuat menu navigasi breadcrumbs di Blogger atau Blogspot. Silakan disimak dan semoga sukses.

1. Masuk ke akun Blogger.

2. Klik Rancangan > Edit HTML.

3. Silakan klik Download Template Lengkap untuk membuat salinan template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode ]]></b:skin>, lalu letakkan kode di bawah ini di atas kode tersebut. Gunakan tombol Ctrl + F untuk mempercepat pencarian.

.breadcrumbs {

padding: 5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height:1.4em;

border-bottom:3px double #e6e4e3;

}

6. Selanjutnya cari kode yang seperti di bawah ini.

<b:include data='top' name='status-message'/>

      <data:adStart/>

    <b:loop values='data:posts' var='post'>

7. Kemudian letakkan kode <b:include data='posts' name='breadcrumb'/> setelah kode <b:include data='top' name='status-message'/> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:include data='top' name='status-message'/>

  <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

    <b:loop values='data:posts' var='post'>

8. Berikutnya cari kode <b:includable id='main' var='top'> dan letakkan kode di bawah ini tepat di atas kode tersebut.

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

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

&#187; <span><data:post.title/></span>

</b:if>

</b:loop>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel

<b:else/>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Artikel pada Label <data:blog.pageName/>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

9. Klik tombol SIMPAN TEMPLATE.

10. Lihat blog Anda untuk mengetahui hasilnya.

Cara Membuat Menu Navigasi Breadcrumbs di Blogger

Menu navigasi breadcrumbs merupakan menu hirarki untuk mengelompokkan artikel dalam suatu kategori atau label yang sama. Untuk lebih jelasnya perhatikan tulisan kecil yang ada di atas judul posting ini atau lihat gambar di samping. Bila di template Anda belum terdapat menu navigasi breadcrums ini dan Anda ingin memasangnya, berikut ini langkah-langkahnya.

Masuk ke akun Blogger Anda.

Klik Rancangan > Edit HTML.

Back up template dulu dengan mengeklik Download Template Lengkap untuk mengantisipasi kalau nanti terjadi kesalahan.

Beri tanda centang pada Expand Template Widget.

Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian).

Copy kode di bawah ini dan paste di atas kode tersebut.

#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:3px double #333;
}

Selanjutnya cari kode <div class='post hentry'>

Kemudian copy kode berikut ini dan paste di bawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot; '>
<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>
</b:if>

Klik tombol SIMPAN TEMPLATE.

Lihat artikel Anda untuk melihat hasilnya.