Saturday, June 9, 2012

Cara Membuat "Breadcrumb" di Google Pencarian

Cara Membuat "Breadcrumb" di Google Pencarian

"Breadcrumb" di Google Pencarian

Coba lihat pada gambar di atas (jika kurang jelas, klik untuk memperbesar), URL di tulisan ane (lihat warna hijau) berubah menjadi URL Homepage dan Label nya saja. jika label itu di klik, maka langsung menuju ke daftar tulisan2 ane yang berkaitan dengan label tersebut. Menarik bukan?? ^^

URL sebelum dijadikan Breadcrumb:
megahnandaofficial.blogspot.com/cara...benar.html
(Google akan memendekkan URL seenaknya sendiri)

URL sesudah dijadikan Breadcrumb:
megahnandaofficial.blogspot.com > gitar
(ini lebih keren bukan ^^)



Lalu bagaimana Cara Membuat "Breadcrumb" di Google Pencarian ??

Hasssh.. itu mudah sekali.. langsung saja:
(catatan: ini untuk blogspot saja, untuk wordpress sudah ada pluginnya, misal Breadcrumb NavXT, dan lain lain)

1. login dan buka Template > Edit HTML > Proceed > dan beri centang pada Expand Widget Templates.

2. gunakan CTRL+F untuk mencari kode ini:
]]></b:skin>
copas code berikut di atasnya:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
catatan: ini untuk style breadcrumb di blog kita, bisa kita sesuaikan sesuai selera.

3. gunakan CTRL+F untuk mencari kode ini:
<b:includable id='main' var='top'>
copas code berikut di atasnya juga:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<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> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<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> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
catatan: ini untuk membuat modul includable yang bernama breadcrumb, sebaiknya jangan diapa-apakan.

4. kembali ke code sebelumnya:
<b:includable id='main' var='top'>
sekarang cari secara manual kode berikut ini: (terletak di beberapa baris di bawah kode di atas, jangan CTRL+F, karena ada banyak)
<b:include data='top' name='status-message'/>
matikan kode tersebut, dan beri include breadcrumb, sehingga codenya sekarang menjadi seperti ini:
<b:include data='posts' name='breadcrumb'/>
<!--status message dimatikan
      <b:include data='top' name='status-message'/>
-->

5. SAVE dan buka salah satu tulisan ente.. cek apakah di atas tulisan ente ada breadcrumb atau tidak..
Cara Membuat "Breadcrumb" di Google Pencarian
Pemasangan Breadcrumb berhasil ^^
6. tunggu sampai Google meng index halaman2 ente lagi, selalu cek di Google pencarian..

Demikianlah tulisan ane tentang Cara Membuat "Breadcrumb" di Google Pencarian, semoga bermanfaat, terima kasih, wassalam.. ^^