Rabu, 13 April 2011

Membuat Breadcrumb Terbaru 2011 (Edisi Revisi)

Membuat Breadcrumb
Membuat Breadcrumb Terbaru 2011. Sahabat informasi maya hari ini kang salman akan membahas lagi trik membuat breadcrumb versi kucoba.com dan cara pemasangan breadcrumb ini sangat mudah sekali. Selain itu, breadcrumb ini tidak akan eror apabila dalam satu artikel memiliki katagori yang banyak, berbeda dengan versi yang dulu kang salman buat, apabila memiliki katagori lebih dari satu, maka tampilannya akan eror, sedangkan di versi yang ini, eror tersebut tidak akan terjadi lagi contohnya bisa anda lihat di bawah ini:

Membuat Breadcrumb
Nah bagus bukan? berapa pun katagori dalam satu artikel selalu akan di pisahkan koma dan itu sangat bagus untuk SEO.

Kalau anda tertarik membuat breadcrumb seperti web kucoba.com silakan ikuti tutorialnya di bawah ini :

1.  Login Blogger » Pilih Rancangan » Klik Tab Edit HTML » Centang Kotak Expend Widget


2.  Cari kode berikut mirip seperti:  <div class='post hentry'> 
 atau ketikan hentry pada search (Tekan F3 untuk membuka search.


3.  Copy kode berikut, dan simpan tepat di bawah kode <div class='post hentry'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYnqF6r-RhVMgksfkeXQmMlFZ3MBL7kU3k3_sl9-cvo4qDmS1cvmVJMUGur_K68xFyO1wc2LX2L0amFL34FZ_Za4Axmxu7VQ2zoBir3GxD8QDO5E8lZP1I7Bp4NP-Hbqelf36XJpb4U4/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</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>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYnqF6r-RhVMgksfkeXQmMlFZ3MBL7kU3k3_sl9-cvo4qDmS1cvmVJMUGur_K68xFyO1wc2LX2L0amFL34FZ_Za4Axmxu7VQ2zoBir3GxD8QDO5E8lZP1I7Bp4NP-Hbqelf36XJpb4U4/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

Jika sudah selesai simpan template dan lihatlah hasilnya...

Jika ingin menggunakan kotak (border) dalam breadcrumbseperti situs ini, tambahkan saja kode berikut ini, dan pastekan tepat di atas ]]></b:skin> :

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

Terakhir save..

Sobat informasi maya, bagaimana mudah sekali bukan? Dengan memasang sitemap breadcrumb blog anda kini telihat lebih profesional  dan selain itu kini lebih SEO friendly dengan mesin pencari dari pada sebelumnya.
Silakan tinggalkan komentar di Membuat Breadcrumb Versi Terbaru Tanpa Eror Jika Banyak Katagori.

Jangan asal copy paste! baca aturannya disini
Post By Kang Salman
www.kucoba.com


Ingin mendapat penghasilan tambahan? Cara kerja mudah hanya dengan melakukan survey dan mengisi angket lalu anda akan di bayar. Itulah pekerjaan anda disini <= klik untuk daftar dan memanen uang $ seperti saya. Gratis
Dapatkan update artikel  terbaru kami langsung ke email anda.  

0 komentar:

Posting Komentar

give your comment here, please do not spam

 
My Big Dream powered by XXZ