Menambahkan Breadcrumbs Navigation Untuk Blogger adalah salah satu cara untuk membuat blog/situs menjadi seo.
Menambahkan Breadcrumbs Navigation Untuk Blogger membantu pembaca Anda untuk melacak posisi mereka di blog Anda dengan menunjukkan jejak breadcrumb dengan cara ini ( Home »Label Nama» Judul Posting ) Ini navigasi muncul tepat di atas dari judul posting Anda dan link yang jejak dari homepage untuk title. Posting juga pilihan untuk menampilkan beberapa label dalam navigasi yaitu jika posting apapun memiliki lebih dari satu label maka ia akan menampilkan semua ide. Breadcrumbs Navigation asli diberikan oleh HOCTRO dan Aneesh dari bloggerplugins lebih lanjut dapat bekerja seperti di atas.


Cara Menambahkan Breadcrumbs Navigation Untuk Blogger


1. Pergi ke akun blogger Anda.

2. Pada Dasbor klick Template Edit HTML.

3. Centang Expand Template Widget ➨ Backup template Anda.

4. Sekarang Anda harus bisa mencari kode HTML, bila kesulitan mencari kode HTML silahkan klick DISINI.

5. Dalam Edit HTML temukan kode berikut

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

Tepat di atasnya letakkan kode ini

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

6. Sekarang cari kode di bawah ini (jika Anda menemukan dua kode yang sama, maka pilih yang kedua)

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

Tepat di atasnya sisipkan kode berikut

<!-- Breadcrumb Navigation By http://www.otowebsite.blogspot.com/ -->
<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>
<!-- Breadcrumb Navigation By http://www.otowebsite.blogspot.com/ -->

  • Kode ini hanya akan menampilkan label terakhir dari posting di breadcrumb. Jika Anda ingin menampilkan semua label, maka Anda harus menghapus kode di baris 16 dan 18. Sekarang cari kode di bawah ini,
Mencari kode ini

]]></b:skin>

Dan letakkan kode css berikut ini tepat di atasnya

.breadcrumbs {
background: #F7F7F7;
float: left;
border: 1px solid #E6E6E6;
width: 575px;
font-size: 11px;
margin: 10px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}

Sekarang simpan perubahan Anda dan Anda selesai.

Jika menemukan masalah tentang kinerja Breadcrumbs Navigation ini silahkan untuk bertanya!

Posting Komentar Blogger Disqus

  1. Boleh dicoba nih tipsnya.. kok sobat gak menggunakannya..? :D

    BalasHapus
  2. @Andy BorneoSaya sudah menggunakan Breadcrumbs hanya dengan nama Admin saja seperti yang Anda lihat di atas.

    Saya menggunakan Breadcrumbs seperti tutorial di atas hanya di blog yang satunya saja. :Q

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top