Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Breadcrumbs SEO Friendly Bergaya

by Irsyad Aslam , at 7/13/2013 , has 3 komentar
Breadcrumbs adalah sebuah navigasi posting yang berguna untuk menunjukan penunjuk halaman posting, dan memudahkan pengunjung untuk mencari posting dan memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau posting, yang berbentuk horizontal, dan terletak di atas judul posting. breadcrumbs berfungsi di mata mesin pencari, yang akan memudahkan mesin pencari untuk melacak posting yang anda buat. breadcrumbs ini belum terpasang secara automatis namun dipasang secara manual pada setiap blog, dan besar pengaruhnya pada tingkat SEO Blog.

Cara Membuat Breadcrumbs SEO Friendly Bergaya

  • Silahkan masuk ke akun Blogger anda.
  • Setelah itu, Klik Menu Template, --> Simpan template anda terlebih dahulu, --> Klik Tombol Edit HTML.
  • Cari kode ]]></b:skin> dengan menekan CTRL+F, Lalu masukan kode CSS berikut ini diatas kode ]]></b:skin> :

.breadcrumbs{background:0 rgba(255,255,255,0.1) 15px;height:30px;line-height:30px;border:solid 1px #bababa;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:auto;overflow:hidden;padding-left:10px;-moz-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-ms-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-o-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-webkit-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;text-shadow:0 1px 0 #FAFAFA;color:#666;margin:0;margin-bottom: 6px;}
.breadcrumbs li{list-style-type:none;display:inline-block;float:left}
.breadcrumbs a{display:inline-block;background-image:url(http://2.bp.blogspot.com/-f1qTgIwiVas/UeC_A2X5OVI/AAAAAAAAD_U/kIXZ_yCQ8Gk/s1600/border_kanan.gif);background-repeat:no-repeat;background-position:right;padding-right:10px;text-decoration:none;color:#666;outline:none;text-shadow:0 1px 0 #fafafa}
.breadcrumbs a:hover{color:#000}
  • Kemudian, cari kode <b:includable id='main' var='top'> , dengan menekan CTRL+F.
  • Lalu, Masukan kode berikut ini diatas kode <b:includable id='main' var='top'> :
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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'> <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> <span><data:post.title/></span> </div> </b:if> </b:loop> </b:if> </b:includable>
  • Lalu, Cari kode <b:include data='top' name='status-message'/> , dengan menekan CTRL+F.
  • Masukan kode berikut ini diatas kode <b:include data='top' name='status-message'/> :
<b:include data='posts' name='breadcrumb'/>

Catatan :

Jika kode <b:include data='posts' name='breadcrumb'/> terdapat dua atau lebih, letakan kode diatas di kedua-duanya.
  • Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,
Salam Sukses,



Your-BelajarBLOG
Irsyad Aslam
About
Cara Membuat Breadcrumbs SEO Friendly Bergaya - written by Irsyad Aslam , published at 7/13/2013, categorized as SEO , Trik Blogger . And has 3 komentar
3 komentar Add a comment
mantap sob tutorialnya,.. ijin praktek sob untuk blog ane,... salam kenal dari ane,..
Reply Delete
Woke Gan Terimakasih...
Salam Sukses Selalu.
Reply Delete
sangat menarik untuk belajar tentang seo. hal yang mudah adalah memahami dasar dasar dari seo itu sendiri artikel yang menarik. jual beli ini salah satu contoh web seo handal
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger