Cara Membuat Breadcrumbs di blog. Breadcrumbs adalah bantuan navigasi yang digunakan dalam user interface. Hal ini memungkinkan pengguna untuk melacak lokasi mereka dalam program atau dokumen. Istilah ini berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dongeng populer.
Google Search
Dengan memasang Breadcrumbs di blog ketika postingan blog muncul pada halaman pencarian google yang tampil adalah url blog diikuti dengan label.
Memasang breadcrumbs
Klik template - Edit HTML - Cari kode ]]></b:skin>
Sekitar nomor 40 kemudian klik <b:skin>...</b:skin> maka akan muncul banyak kode/scrip, ini dapat dibedakan dengan warna (lihat sampai akhir kode yang muncul) sehingga bisa menemukan ]]></b:skin>
Copy kode dibawah ini dan pasang di atas ]]></b:skin>
Lompat ke widget dan klik Blog1
Klik <b:includable id='main' var='top'>...</b:includable>
Memasang breadcrumbs
Klik template - Edit HTML - Cari kode ]]></b:skin>
Sekitar nomor 40 kemudian klik <b:skin>...</b:skin> maka akan muncul banyak kode/scrip, ini dapat dibedakan dengan warna (lihat sampai akhir kode yang muncul) sehingga bisa menemukan ]]></b:skin>
Copy kode dibawah ini dan pasang di atas ]]></b:skin>
.breadcrumbs{padding:5px;font-size:80%}
Lompat ke widget dan klik Blog1
Klik <b:includable id='main' var='top'>...</b:includable>
Cari dan hapus <!-- posts --> sampai <data:defaultAdStart/>
Bentuk seluruhnya seperti ini :
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
Ganti dengan kode ini :
Klik simpan kemudian lihat hasilnya
Jika tidak bekerja dengan semestinya bisa tanya di kolom komentar atau periksa dulu kemungkinan besar langkah di ]]></bskin> ada titik yang tidak dicopy sehingga hanya seperti :
breadcrumbs{padding:5px;font-size:80%}
yang seharusnya :
.breadcrumbs{padding:5px;font-size:80%}
Bentuk seluruhnya seperti ini :
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
Ganti dengan kode ini :
<!-- posts -->
<div class='blog-posts hfeed'>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
»
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
<b:if cond='data:label.isLast != "true"'> » </b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</div>
</b:if>
<data:defaultAdStart/>
Klik simpan kemudian lihat hasilnya
Jika tidak bekerja dengan semestinya bisa tanya di kolom komentar atau periksa dulu kemungkinan besar langkah di ]]></bskin> ada titik yang tidak dicopy sehingga hanya seperti :
breadcrumbs{padding:5px;font-size:80%}
yang seharusnya :
.breadcrumbs{padding:5px;font-size:80%}
0 comments
Post a Comment