Blog tempat belajar blogging pemula

Cara Pasang Navigasi Breadcrumbs di Blogger

Cara Pasang Navigasi Breadcrumbs di Blogger

Setelah membuat blog baru dan menentukan template blog pilihan kemudian memasang tag judul posting agar blog memenuhi standar SEO, sebaiknya kita langsung memasang navigasi breadcrumbs pada template blog yang gunanya untuk memberikan informasi posisi halaman yang sedang dibuka kepada pengunjung dan mempermudah dalam penelusuran konten artikel. Selain itu semua bloggers berharap agar navigasi breadcrumbs diindeks dan muncul pada hasil penelusuran search engine yang akan terlihat dan memberikan informasi kategori konten artikel blog anda oleh pengguna internet yang melakukan pencarian di SERP. Contoh berikut hasil pemasangan Navigasi Breadcrumbs yang warna hijau:
Alamat URL blog tersusun rapi dengan beberapa kategori konten di bawah judul artikel dan judul blog.

Harap membackup sebelum melakukan perubahan pada template!
Silahkan ikuti langkah berikut: login ke Dashboard > Template > Edit HTML
Gunakan Ctrl + F  dan cari kode berikut:
<b:include data='top' name='status-message'/>
Simpan kode berikut tepat di atasnya:
<b:include data='posts' name='breadcrumb'/>
Lalu cari  kode:
<b:includable id='main' var='top'>
Kemudian simpan kode berikut tepat diatasnya:
<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>
 Simpan template

Berikutnya, klik menu Template > klik tombol Sesuaikan > Tingkat lanjut > Tambahkan CSS > simpan kode CSS berikut pada kotak CSS:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
Download Script
Contoh seperti ini:
Navigasi Breadcrumbs CSS
Anda dapat mengubah ukuran huruf dan warna garis yang di tandai sesuai template blog.
Lalu klik tombol orange Terapkan ke Blog di sudut kanan atas. Selesai.
Kemudian buka langsung laman posting blog anda. Jangan buka dengan preview! (tidak akan kelihatan hasilnya).
Contoh hasil pemasangan navigasi breadcrumbs di atas judul posting:
Navigasi Breadcrumbs
Jika ada pertanyaan dalam cara pasang navigasi breadcrunbs pada blogger agar diindex dan muncul di search engine, silahkan isi di kotak komentar.
Back To Top