Friday, February 03, 2012

Cara Membuat Breadcrumbs di Blogger

Breadcrumb Blogger Blogspot
Tutorial Cara Membuat Breadcrumb di Blogger Blogspot

Blog yang memiliki breadcrumbs konon memiliki daya SEO dan daya SERP yang lebih tinggi di Google search dibanding yang tidak memakai breadcrumbs. Tentu saja, itu cuma salah satu faktor. Bagaimanapun, konten artikel yang orisinil, loading cepat dan ringan, plus template yang ramah Google (friendly) serta internal link yang baik serta dapat backlink dari situs PR tinggi adalah lima faktor yang sangat signifikan di mata Google.

DAFTAR ISI
  1. Apa itu Breadcrumbs
    1. Contoh Breadcrumbs
    2. Cara Membuat Breadcrumbs di Blogger Blogspot
    3. Pengaruh Breadcrumbs pada SEO dan SERP
  2. Cara I: Menghapus Powered by Blogger dengan CSS
    1. Cara II: Menghapus Powered by Blogger dengan Merubah True Jadi False
    2. Cara III: Menghapus Powered by Blogger dengan Membuang Kode Widget Atribusi
    3. Apakah Menghapus Powered by Blogger Melanggar TOS?


APA ITU BREADCRUMBS

Breadcrumb atau breadcrumb trail adalah bantuan navigasi yang dipakai untuk mengetahui jejak asal dari lokasi dalam sebuah bog/website, program atau dokumen. Dengan kata lain breadcrumb adalah tipe struktur navigasi yang menginformasikan pengunjung tentang halaman utama dan sub-kategori yang sedang dibuka atau dibrowsing. Breadcrumb trail biasanya diletakkan di bawah judul utama sebuah halaman web yang mengandung link pada masing-masing kategori dan sub-kategori.


CONTOH BREADCRUMBS

Lihat di atasnya judul artikel ini atau lihat gambarnya di bawah:

Breadcrumb di Blogger

Apa ini dianjurkan oleh Google?

Iya. Breadcrumb akan menambah SEO suatu artikel di blog.

CARA MEMBUAT BREADCRUMBS DI BLOGGER BLOGSPOT

I. Masuk ke blogger.com -> Template -> Edit HTML -> centang (kasih tanda tik) Expand Widget Template.

Tips:
(i) Cara mencari kode di template blogger, tekan CTRL+F -> masukkan kode yang dicari dikotak yang tersedia.
(ii) Dalam meng-copy kode, klik "View Plain" -> copy kodenya.

II.

a. Cara kode berikut: <b:include data='top' name='status-message'/>
b. Ganti dengan kode berikut:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

III.

a. Cari kode berikut: <b:includable id='main' var='top'>
b. Ganti dengan kode berikut:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

IV.
a. Cari kode berikut: ]]></b:skin>
b. Ganti dengan kode berikut:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>

V. Klik Simpan Template. Selesai.[1]


PENGARUH BREADCRUMBS PADA SEO DAN SERP

Seberapa besar pengaruh adanya breadcrumbs pada SEO blog dan ranking pencarian di GOOGLE SERP masih menjadi perdebatan kalangan webmaster dan blogger. Bagi yang pro atas adanya breadcrumb dapat mempengaruhi SEO, berikut beberapa manfaatnya:

Pertama, terjadinya interlink atau saling terhubung antara satu halaman dengan halaman yang lain dalam situs yang sama. Dengan breadcrumb maka struktur navigasi pada blog/situs anda membantu terjadinya saling taut antara berbagai macam halaman web.

Kedua, indeksisasi halaman web terdalam. Sebuah situs mengandung banyak halaman web dan tidak tertaut dengan bagian halaman utama. Situs yang tertaut dengan baik akan membantu bot pencari seperti Google untuk menjenguk halaman terdalam dari situs dan mengindeks-nya kembali.

Ketiga, distribusi Page Rank yang efektif pada seluruh halaman web. Situs yang tertaut dan terindeks dengan baik akan membantu mesin pencari Google dll untuk mendistribusikan ranking halaman secara efektif pada halaman internal web.

_____________________________

Hapus Didukung Diberdayakan Blogger

Cara menghapus, menghilangkan atau menyembunyikan tulisan Powered by Blogger atau Didukung/Diberdayakan oleh Blogger yang berada di bagian bawah (footer) template bawaan blogger.com itu mudah. Baik Simple Template, Awsome Inc atau Dinamis. Tutorial ini berasumsi bahwa Anda sudah menggunakan Dasbor Admin yang diperbarui (New Interface Dashboard) bahasa Indonesia.

Ada tiga cara yang dapat dilakukan untuk menghapus tulisan atribusi (attribution) tersebut. Tentu saja Anda cukup memakai salah satu cara di bawah. Perhatian: cara pertama adalah yang terbaik dan termudah. Cara kedua dan ketiga hanya untuk diketahui saja.


MENGHAPUS POWERED BY BLOGGER DENGAN CSS

Cara pertama ini menggunakan CSS dengan menegasikan attribution1 supaya tidak muncul di footer.

1. Masuk/login ke blogger.com -> klik nama blog yang akan diedit
2. Klik Template -> Edit HTML -> Lanjutkan ->
3. Cari kode ini: ]]></b:skin> (gunakan CTRL+F untuk cari kode)
4. Letakkan kode berikut di atasnya kode no.3
#Attribution1 {
display:none;
}
5. Klik Simpan Template. Selesai.


MENGHAPUS POWERED BY BLOGGER DENGAN MERUBAH TRUE JADI FALSE

Cara kedua ini menghilangkan atribusi Didukung/Diberdayakan oleh Blogger dengan dua tahap. Yang intinya bagaimana supaya widget powered by Blogger dapat memunculkan menu Delete/Hapus. Sehingga dapat dihapus dari dasbor menu Tata Letak. Caranya sebagai berikut:

1. Masuk/login ke blogger.com -> klik nama blog yang akan diedit
2. Klik Template -> Edit HTML -> Lanjutkan
3. Cari kode berikut: id='Attribution1' locked='true'
4. Ganti kata 'true' menjadi 'false'
5. Klik Simpan Template. Klik Tutup.
6. Klik Tata Letak / Layout -> Klik Edit pada gadget Attribution (bawah) -> klik Hapus.
7. Simpan Perubahan (kanan atas). Selesai.


MENGHAPUS POWERED BY BLOGGER DENGAN MEMBUANG KODE WIDGET ATRIBUSI

Metode ketiga adalah dengan menghapus kode widget yang berkaitan dengan atribusi. Caranya sebagai berikut:

1. Masuk/login ke blogger.com -> klik nama blog yang akan diedit
2. Klik Template -> Edit HTML -> Lanjutkan -> klik Expand Template Widget
3. Cari kode berikut: outside of the include in order to lock Attribution widget (gunakan CTRL+F untuk mencari kode)
4. Hapus kode berikut (yang berada di bawahnya kode no.3)
<b:widget id='Attribution1' locked='false' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-strvey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>

<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Perhatikan gambar di bawah. Kode yang warna biru yang dibuang.
menghapus powered by blogger

4. Klik Simpan Template. Selesai.


MENGHAPUS POWERED BY BLOGGER APAKAH MELANGGAR TOS?

Apakah menghapus atribusi itu melanggar TOS (term of service) atau perjanjian dengan Blogger.com? Jawabnya adalah tidak. Blogger.com tidak melarang kita untuk menghilangkan atribusi Powered by Blogger. Lihat referensinya di sini dan di sini.

Dapatkan buku-buku Islam karya A. Fatih Syuhud di sini.. Konsultasi agama, kirim via email: alkhoirot@gmail.com

39 komentar

Trima kasih, mas ustadz atas ilmunya..

membuat breadcrumbs pada blogger

cara membuat breadcrumb terbaru

cara buat breadcrumb di blogspot

cara buat breadcrumbs

assalamualikum pak ustad mohon ijin nya ya. ada pertanyaan pak ustad
1 diblog saya ada 2 yang mana saya harus ganti
setelah saya coba tulisanya Home>>all post
itu masalahnya pak ustad gimana mengatasinya

assalamuallaikum

penjelasannya singkat, padat, jelas..
terima kasih banyak..

Terimakasih, tutorialnya sangat mudah, sudah terpasang di blog saya.

mantap gan . visit back yah .

kang mau tanya..kalo template ane gag ada kode2 itu bagaimana ya?? saya coba nambahin kode itu malah error..gag tampil tlsan breadcrumbnya..
mohon bantuannya..

mungkin anda lupa mencentang "Expand template widget". Kalau sudah, nonakfitkan dulu blogger for mobile template.

thanks mas udah sharing :) bdw sekedar ngasih tau nih, blognya berat banget :)

Thanks udah sharing ilmunya, nanti ane mau pasang di blogku..

makasih infoonya breadcumbnya....sip

sudah ane coba sob, tp kok gak muncul breadrumb nya...

thanks berat mas, breadrcumbnya udah nampil hehehe :)

tutorial dai sobat berhasil di template blog sy.. thanks ya.

pas banget nih buat yang baru belajar membuat blog.

wah gitu to msbro....

sedang belajar buat blog masbro..

blog sedih
blog gak jadi

OK Thanks Gan.. Izin Sedot..

Wah aku kok malah gak bisa ya, breadcrumb nya gak nongol, pie..pie..pie.., dimana masalahnya ini mas ya?? padahal langkah2nya dah aku teliti bener... apa template yang di gunakan pengaruh gitu mas?? tolong bantuannya ya mas....

Apakah Breadcrumbs sangat begitu penting pada sebuah blog

terima kasih atas infonya...sangat bermanfaat untuk nge-bloggg...

Sudah ane pasang pak ustadz dan sukses, tapi koq breadcumbnya ga ada di blog ane, hiiii. Terima kasih tips dan triknya.

gan, udah saya ikuti petunjuknya untuk buat bredcumbx kok pas pratinjau malah muncul pesan begini

"Widget dengan id "Blog1" mengandung sedikitnya dua elemen b:includable dengan id yang sama:"breadcrumb". Semua elemen b:includable sebaiknya memiliki id unik untuk widget yang diberikan.
Error 500 "

solusinya gimna ya?

ane coba yaa gan tutornya diatas

thnks infonya gan,, saya coba dulu

siippp...siap diterapkan

terimakasih infonya... jadi breadcrumb seo y

Tutorial yang sangat bermanfaat gan,... sangat membantu saya dalam proses editing blog blog ane gan,. ternyata kalau mau memahami tidaklah sesulit seperti apa yang dikatan oleh orang2,. salam kenal dari http://jawacyber.blogspot.com

terima kasih mas.. sudah jadi breadcrumbs saya.. bagaimana ia menjadi mesra SEO ya mas?

makasih boss infonya berguna banget buat newbie yang baru ngerintis bikin blog

1. Kirim konsultasi Agama ke alkhoirot@gmail.com atau info@alhoirot.com Cara Konsultasi lihat di sini!
2. Konsultasi hukum waris Islam, lihat caranya di sini
3. Konsultasi melalui kotak komentar tidak akan dilayani.

EmoticonEmoticon