Salam jabat hati dan salam blogger, pada kesempatan ini saya ingin berbagi pengalaman kepada teman teman. Yang mana dari hasil keluyuran saya mengunjungi teman blog lain, lalu saya membaca sebuah artikel yang menurut saya cukup baik bila di terapkan di blog Kita ( Blogspot ) yaitu Cara membuat breadcrumbs pada blogspot karena banyak dari teman yang mendiskusikannya keuntungan dari memasang breadcrumbs di template blog kita. Selain berguna sebagai menu navigator untuk mempermudah bagi pembaca untuk kembali ke halaman atau posting sebelumnya, dan banyak juga yang berpendapat baik untuk SEO kata pakar nya, kalau saya si awam tentang seo ( katanya.. ) .
Langsung saja saya kira kalau sudah menjurus mau pasang breadcrumbs kemungkinan atau so pasti sudah tidak asing lagi buat teman teman cara edit template di blogspot. Karena saya yakin Anda pun yang sedang membaca posting ini sudah sering bongkar pasang template blog anda. Jadi saya tidak perlu memberikan langkah awal masuk ke dhasboard blogger nanti di bilang seperti mengajari bebek berenang, betul gak? he he he.. Oke langsung saja ke TKP
Pasang atau paste code css ini:
.breadcrumbs{ padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;font-size:95%;line-height:1.4em;
border-bottom:2px double #cadaef;
}
dan kemudian letakkan kode tsb tepat di atas kode ]]></b:skin>
Bagi yang belum pernah memasang navigasi breadcrumb silahkan cari kode berikut. ( gunakanCTRL + F untuk kemudahan pencarian kode ) Lalu cari lagi code seperti ini: <div class=’post hentry’> atau seperti ini: <div class=’post hentry uncustomized-post-template’> karena struktur template tidak semua sama. Setelah ketemu paste code ini tepat di bawahnya,
<b:if cond=’data:blog.homepageUrl == data:blog.url’><b:else/> <b:if cond=’data:blog.pageType == "item"’> <div class=’breadcrumbs’> <span itemscope=”http://data-vocabulary.org/Breadcrumb” itemtype=”http://data-vocabulary.org/Breadcrumb”> <a expr:href=’data:blog.homepageUrl’ itemprop=”url”><span itemprop=”title”>Home</span></a> > </span><span itemscope=”http://data-vocabulary.org/Breadcrumb” itemtype=”http://data-vocabulary.org/Breadcrumb”><b:if cond=’data:post.labels’><b:loop values=’data:post.labels’ var=’label’> <a expr:href=’data:label.url’ itemprop=”url”><span itemprop=”title”><data:label.name/></span></a> <b:if cond=’data:label.isLast != "true"’> > </b:if> </b:loop> </b:if> > </span><span itemscope=”http://data-vocabulary.org/Breadcrumb” itemtype=”http://data-vocabulary.org/Breadcrumb”><span itemprop=”title”><data:post.title/> </span></span></div> </b:if></b:if>
Sehingga menjadi seperti ini:
<div class=’post hentry’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’> <b:else/> <b:if cond=’data:blog.pageType == "item"’> <div class=’breadcrumbs’> <span itemscope=”http://data-vocabulary.org/Breadcrumb” itemtype=”http://data-vocabulary.org/Breadcrumb”> <a expr:href=’data:blog.homepageUrl’ itemprop=”url”><span itemprop=”title”>Home</span></a> > </span><span itemscope=”http://data-vocabulary.org/Breadcrumb” itemtype=”http://data-vocabulary.org/Breadcrumb”><b:if cond=’data:post.labels’><b:loop values=’data:post.labels’ var=’label’> <a expr:href=’data:label.url’ itemprop=”url”><span itemprop=”title”><data:label.name/></span></a> <b:if cond=’data:label.isLast != "true"’> > </b:if> </b:loop> </b:if> > </span><span itemscope=”http://data-vocabulary.org/Breadcrumb” itemtype=”http://data-vocabulary.org/Breadcrumb”><span itemprop=”title”><data:post.title/> </span></span></div> </b:if></b:if>
Silahkan simpan template, dan lihat hasilnya.
Semog sedikit pengalaman ini dapat bergguna buat kita semua Amiin.