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.



Cari artikel lain:




Copy link berikut untuk referensi kutipan:

Jangan lupa baca yang ini juga ..