Sabtu, 02 Februari 2013


Sebuah halaman web tentu mempunyai banyak variatif baik dalam bentuk template, penempatan widget dalam blog dan sebagainya. Salah satu yang mempunyai peran dalam pengenalan yang baik terhadap search engine adalah navigasi, petunjuk dalam sebuah web ini biasa disebut breadcrumb yang menentukan jejak awal sampai akhir dari halaman web (biasanya berawal dari home > Label > Sublabel). Agar dapat lebih diterima oleh mesin pencari dengan baik khususnya google, para pakar SEO mereferensikan pembuatan breadcrumb dalam web atau blog. Bagaimana cara pembuatannya dalam template blogger? cukup mudah namun perlu cermat agar template yang kita pakai tidak berantakan hanya karena salah penempatan script saja, Untuk itu mari ikuti langkah-langkah mudah berikut di bawah ini.
  1. Login ke blog sobat.
  2. Arahkan ke Rancangan/Design.
  3. Edit HTML dan check "Expand Widget Templates"
  4. Untuk mempermudah pencarian tekan tombol Ctrl+F pada keyboard sobat, cari script kode <b:include data='top' name='status-message'/>kemudian tambahkan script <b:include data='posts' name='breadcrumb'/> tepat dibawahnya.
  5. Cari Script kode ]]></b:skin> dan masukkan aturan CSS 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;}.
  6. Setelah ini tinggal selangkah lagi mencari script kode <b:includable id='main' var='top'> lalu tambahkan script kode berikut di bawah ini tepat diatasnya.
<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>
Setelah memasukkan script kode diatas lalu jangan lupa untuk di save atau simpan, lihat hasil dengan menuju view blog. Pada halaman homepage tidak akan terlihat perubahan karena navigasi tersebut akan muncul pada halaman label atau sublabel untuk itu pastikan label atau tag postingan yang sobat buat, silahkan mencoba.

Tidak ada komentar:

Posting Komentar