Advertising

Membuat Breadcrumb dan Manfaatnya Untuk Blog



Siomponk.Com - Breadcrumb adalah navigasi menu untuk memudahkan pengunjung web/blog melacak lokasi dalam dokumen dan kembali ke halaman awal dengan mudah. Breadcrumb biasanya berada di posisi atas halaman web atau blog, biasanya dibawah header atau diatas judul postingan (seperti pada gambar diatas).

Menurut Jakob Nielsen (seorang konsultan Web Usability), ditinjau dari sisi usability breadcrumb mempunyai beberapa fungsi, yaitu:

• Menunjukkan lokasi atau path dari halaman web yang sekarang sedang dikunjungi, relatif terhadap struktur halaman di atasnya.
• Menyediakan fitur one-click access ke level halaman web di atasnya sekaligus menghindari user tersesat karena terlalu dalam menjelajahi website.

Breadcrumb ini sangat bermanfaat bagi pengunjung tatkala struktur website yang kita bangun memiliki hirarki atau tingkatan.

Menurut kabar berita, bahwa Google sudah dapat membaca dan memahami data Breadcrumbs sebuah situs blog, jadi anda jangan heran bila anda menemukan ada sebuah blog pada hasil pencarian URL nya yang ditampilkan malah URL kategorinya. Biasanya Breadcrumb ini sudah ada di engine WordPress. Nah bagaimana jika kita pengguna Blogger.Com (blogspot).

Berikut ini cara membuat Breadcrumb di Blogger (blogspot) :

1. Login Blog > Design > Edit HTML dan centang Expand Widget templates
2. Cari kode ]]></b:skin> ( gunakan CTRL + F agar lebih mudah )
3. Paste kode berikut tepat DIATAS kode ]]></b:skin>

.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
4. Kemudian cari kode <b:includable id='post' var='post'>
5. Setelah ketemu, silahkan paste kode berikut tepat DIBAWAH kode <b:includable id='post' var='post'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<b>Anda Disini :</b> <a expr:href='data:blog.homepageUrl'>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>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>
6. Simpan template (Save)

Demikianlah postingan saya ini tentang Membuat Breadcrumb dan Manfaatnya Untuk Blog, dan semoga postingan saya ini dapat bermanfaat untuk anda.
Salam...


▶ INFO ARTIKEL :
OLEH:
LABEL: Tips Blog,
JUDUL: Membuat Breadcrumb dan Manfaatnya Untuk Blog
URL: http://www.siomponk.com/2015/04/membuat-breadcrumb-dan-manfaatnya-untuk.html
Loading...

Written by : - Part Time Blogger

author-photo Hal terpenting dalam pacaran adalah bukan dari Perbedaan Umur...
Tapi yang terpenting adalah Perbedaan Kelamin...

Follow On : Facebook | | Blogger

0 Response to "Membuat Breadcrumb dan Manfaatnya Untuk Blog"

Poskan Komentar

PERATURAN BERKOMENTAR:

- Gunakan BAHASA yang baik dalam berkomentar
- Dilarang SPAM dalam berkomentar
- Dilarang SARA dan SARU dalam berkomentar
- Dilarang OOT dalam berkomentar

Jika terdapat hal demikian pada komentar anda, kami akan menghapus komentar anda tersebut.