Cari Blog Ini

Rabu, 21 September 2011

cara mudah membuat breadcrumb di blog

baiklah saya mau sedikit share ni cara mudah membuat breadcrumb di blog, berhubung juga ada buk dokter yang memmiliki salah satu hoby blogging, mudah mudah an bermanfaat buat buk dokternya,hehhe..
sebelumnya udah pada tau belum apa itu breadcrumb ? nah, breadcrumb adalah adalah sebuah bantuan navigasi yang digunakan dalam user interface sehingga memudahkan user untuk menavigasi halaman web/blog. gunanya adalah mempermudah user dalam menavigasi web/blog kita selain itu juga di senangi robot Google yang mengcrawl halaman weblog. Maka erat kaitannya dengan SEO, terutama SEO onpage. Sebaiknya kita memasang kode Breadcrumb sedini mungkin supaya cepat di indeks Google, hasilnya tampilan url posting blog kita akan lebih rapi dan cantik di tampilkan di SERP Google.

1. Login ke blogger degan ID sobat
2. Klik Tata Letak / layout
3. Kemudian klik tab Edit HTML
4. Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan.
5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

6. Cari kode ]]></b:skin>
7. Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}
8. Silahkan cari kode berikut pada template sobat :
<div class='post hentry'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry'>


<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Masukan Dengan Keyword  Blog sobat</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>


contohnya bisa dilihat disini :





demikian, semoga bermanfaat...
sumber : tutorial bertuah

Tidak ada komentar:

Poskan Komentar