Pemberitahuan :

1. Copy Menggunakan CTRL + C.

2. Highlight Transparan Kecuali Blockquote.

3. Silahkan Contact Saya Bila Ada Yang Erorr

Posted by : Ariq Rastaman Sabtu, 27 Juli 2013

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCFt76ZiDRooZdIM1Hche4weDTMiH02YAxRx4-wTl7v-M-xmq9KNysfHoCpd5RFQ6bRcB28PU5wxX92FIzfX8gZVVoD0IT4mMjWiA0bKh_2AVRaB-WfLrJEwFjSxv-TYN1mkoLTbX83SY4/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.

Entri Populer

About

Foto Saya
Nama Saya Yang Di Atas Itu Bukan Nama Asli Tapi Nama Panggilan . Kata Itu Juga Ada Maknanya . Dary Yaitu Nama Saya Muhammad Qalbu (Dary) . Sadega Yaitu Orang Yang Suka Coret-Coret Tembok .Tapi Kalau Saya Suka Mencoret-Coret Gambar Photoshop.Mantemand Yaitu Saya Banyak Teman Dunia Nyata Maupun Dunia Maya.Dah Segitu Aja Jika Sobat Mau Tahu Profil Lengkap Ku , Klik Salah Satu Ya Sob (‾⌣‾/)σ Atau
©Copyright 2013 belajarilmukomputer. Diberdayakan oleh Blogger.

Blog Archive

Find Us :