Selasa, 22 Mei 2012

Cara Pasang Breadcrumb Blogspot Lebih SEO Friendly

Contoh breadcrumb

Hai Sobat Blogger ! Kembali update nih, kali ini saya akan membagikan tutorial tentang widget yang sebenarnya bisa dibilang sudah kuno alias sudah banyak yang memposting tentang artikel ini dan juga untuk membuat blog menjadi SEO Friendly, tapi jika dimodifikasi sedemikian rupa, tutorial ini akan menjadi lebih menarik dan sedap untuk dipandang , selain itu juga memberikan kemudahan bagi para pengunjung kita.

Pembatas breadcrumb hanya ada di bagian bawah dengan 2 garis yang berjajar membatasi breadcrumb ini. Selain itu versi kali ini ditambahkan icon gambar yang biasa terdapat di icon windows 7, yaitu icon download dan folder kosong. Nantinya icon ini bisa dirubah sesuai keinginan sobat. Penasaran dan tertarik untuk membuatnya? langsung aja kita bahas dan simak bersama disini.

1.) Baca Basmallah
2.) Login ke akun blogger sobat
3.) Masuk ke Edit Html
Blogger Lama : Rancangan > Edit html
Blogger Baru : Template > Edit Html
4.) Centang tanda  Expand Template Widget  
5.) Tekan Ctrl + F , cari kode ]]></b:skin>
6.) Jika sudah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

.breadcrumbs{padding:5px 5px 5px 0px;margin:0px 0px 15px 0px;font-size:95%;line-height:1.4em;border-bottom:3px double#e6e4e3}.breadhome {padding:0 0 0 17px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3CRfqtLt5ybBrX6U9_I4yh_6bnjBjDoT7jmPHEIis9qnLjGaD32vnlY8rjMxV0o0LNgSHLdqTMwL2pwJd1E2ETQ8klHM8mbWQL7ejUPoWEfa3aha1bmJwy3_yuh46_ANajMKcuHdILkwv/s1600/browse.jpg) left no-repeat;}
.breadlabel {padding:0 0 0 28px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW41-wOTuxcfqmhdDH0VvnfzxR4OpL4gPyKHZrvrODpPUfXfQnBwRARaGKUZYW0bF90q6VWVMVobbRJh-9nYw3DMgElE8_Ro7E0m_KDQXYttNzGl3xs-r6kyAyBN7SOwI67V64smWZ6T42/s1600/breadlabel.jpg) left no-repeat;}.breadpost {padding:0 0 0 28px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW41-wOTuxcfqmhdDH0VvnfzxR4OpL4gPyKHZrvrODpPUfXfQnBwRARaGKUZYW0bF90q6VWVMVobbRJh-9nYw3DMgElE8_Ro7E0m_KDQXYttNzGl3xs-r6kyAyBN7SOwI67V64smWZ6T42/s1600/breadlabel.jpg) left no-repeat;}
7.) Lalu cari kode <b:if cond='data:post.title'> ( Jika ada 2 kode yang ditemukan, pilih kode yang pertama ) atau jika masih bingung, coba cari kode <div class='post hentry'>
8.) Lalu letakkan kode dibawah ini tepat di atas kode <b:if cond='data:post.title'> atau dibawah kode <div class='post hentry'>

<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 class='breadhome' 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 class='breadhome' typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:if></b:loop><span class='breadpost'><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'> Home</a></span> &#187; <span class='breadlabel'>Unlabelled</span> &#187; <span class='breadhome'><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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Dokumen untuk <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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span class='breadlabel'>Semua Posting</span><b:else/><span class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span class='breadlabel'>Artikel terkait tentang <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable>
9.) Lalu cari lagi kode <b:include data='top' name='status-message'/>
10.) Jika sudah ketemu, letakkan kode dibawah ini tepat setelah kode <b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
11.)  Simpan Template dan lihat hasilnya


12.) Edit Mode : Non Wajib
> Ganti alamat url gambar berwarna hijau dengan alamat url gambar icon sesuai keinginan sobat
> Ganti kata bewarna merah dengan kata sesuai keinginan sobat blogger masing-masing

SEKIAN
Semoga Berhasil dan Bermanfaat

sumber

0 komentar:

Posting Komentar