Cara membuat breadcrumbs seo sederhana di blogger

Cara membuat breadcrumbs seo sederhana di blogger

Cara membuat breadcrumbs seo sederhana di blogger

Cara membuat breadcrumbs di blogger

Breadcrumbs bisa dikatakan sangat penting buat blog kita.
Selain sebagai pendukung seo, breadcrumbs juga seperti layaknya peta.

Dengan breadcrumbs pengunjung akan lebih mudah mengetahui sedang dimana dia sekarang.
Juga pengunjung dapat menemukan kategori artikel bersangkutan dengan mudah.

Pokoknya tergantung penilaian kalian.

Nah disini saya akan membahas cara pemasangan breadcrumbs.
Mengenai plus-minusnya mungkin kalian bisa mencari referensi lagi.
Namun menurut saya, breadcrumbs banyak berguna buat blog kita. Bahkan situs raksasa seperti google pun ikut menyarankan pemasangan breadcrumbs.

Cara memasang Breadcrumbs di blogger

Pertama, edit template html blogger kamu
Jika kamu mengedit file template xml, sama saja langkahnya.

Cari kode berikut ini
<b:includable id='main' var='top'> 

Jika sudah ketemu, copy kode breadcrumbs berikut ini dan letakkan diatas kode tadi.

paket kode breadcrumbs :
<b:includable id='breadcrumb' var='posts'>
<!-- menyembunyikan di halaman utama -->
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<!-- di halaman static -->
<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> &bull; 
<span><data:blog.pageName/></span>
</div> 
<b:else/> 
<!-- di halaman item -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'> 
<!-- jika berlabel -->
<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'>
&bull; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> 
</b:loop> &bull; 
<span><data:post.title/></span> 
</div> 
<b:else/> 
<!-- jika tidak berlabel -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &bull; 
<span>Unlabelled</span> &bull; 
<span><data:post.title/></span>
</div> 
</b:if> 
</b:loop> 
<b:else/> 
<!-- di halaman archiv dan pencarian -->
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<div class='breadcrumbs'> 
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &bull; 
<span>Archives for <data:blog.pageName/></span> 
</div>
<b:else/> 
<!-- di halaman index -->
<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> &bull; 
<span>All posts</span> 
<b:else/> 
<!-- di halaman index pencarian -->
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &bull; 
<span>Posts filed under <data:blog.pageName/></span> 
</b:if> 
</div> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:includable> 

Sebenar ini opsional. kamu bisa meletakkan dimana saja asalkan di antara incudable di dalam widget blog, di antara ya... bukan di dalam incudable



Jika kamu perhatikan, akan banyak kode incudable di dalam widget blog.
Contohnya peletakan breadcrumbs dan contoh kode tersebut seperti ini
<b:section .... >
<b:widget id="Blog1"...>
...
<b:incudable id="contoh id"></b:incudable>
taruh disini di antara incudable
<b:incudable id="contoh id"></b:incudable>
<b:incudable id="contoh id">jangan didalam sini</b:incudable>
<b:incudable id="contoh id"></b:incudable>
<b:incudable id="contoh id"></b:incudable>
...
</b:widget>
</b:sections>

Tapi kalo kamu tidak yakin, taruh saja sebelum kode <b:includable id='main' var='top'>

Kode breadcrumbs tersebut masih berupa fungsi paket saja.

Sekarang saatnya membuat fungsi pemanggilnya, seperti ini kode pemanggilnya :
kode fungsi pemanggil breadcrumbs :
<b:include data='posts' name='breadcrumb'/>

Sekarang saatnya memasang dimana kamu ingin menampilkannya, misalkan kita ingin memasang di bagian atas halaman.
Maka kita taruh kode pemanggilnya persis dibawah kode
<b:includable id='main' var='top'>

Untuk yang belum paham struktur xml blogger dan gak ingin pusing, silahkan taruh seperti contoh ini
<!-- kode paket breadcrumbs disini --> 
<b:includable id='main' var='top'> 
<!-- kode pemanggil breadcrumbs disini --> 


Lalu Apa sih arti kode <b:includable id='main' var='top'> ?
Itu adalah fungsi paket halaman utama yang mengatur seluruh isi halaman.
jika kamu ingin menampilkan breadcrumbs dibawah judul post, maka taruh pemanggil breadcrumbs di bawah kode h3 post title.
Kan ada banyak kode h3 post title ?
Cari yang mempunyai kondisi di segala halaman

Cara mengetahui tentang arti-arti kondisi halaman, bisa baca disini :
Pengertian, Fungsi dan contoh Tag Conditional Blogger

Kamu bisa komentar jika bingung mencari letak kode yang kamu inginkan


Nah selesai sudah kamu telah memasang breadcrumbs.

Untuk merapikan tampilannya, silahkan tambahkan css class "breadcrumbs" ke dalam css blog kamu
Atau bisa tambahkan css sederhana dari saya ini
.breadcrumbs{
padding:8px 12px; 
margin: 8px 0;
border-bottom:1px dotted #bbb;
}
Atau sesuaikan dengan skill css kalian

jika ada yang kurang jelas maupun bla bla bla... silahkan coret-coret di kolom komentar.

mungkin juga kamu tertarik untuk membaca ini :



Terima kasih, salam Colongan !

Bantu kami lebih baik lagi.
Apa Reaksi anda tentang :
"Cara membuat breadcrumbs seo sederhana di blogger" ?

Posting Komentar

Komentar yang melukai perasaan beresiko dihapus Coy... !