-->

Selasa, 19 April 2011

Cara super mudah membuat menu BREADCRUMB pada blog

Menu Bradcrumb adalah menu navigasi berurutan di atas artikel postingan,untuk sobat yang sungguh-sungguh ingin mempunyai blog yang profesional dan keren wajib tahu cara membuat menu tersebut,karena disamping menu ini membuat keren blog menu inipun di sukai mbah google alias SEO.Untuk membuatnya kangmas akan berikan cara yang super mudah and guampang pakai buangeeeeeeeet,asal sobat bisa baca artikel dari kangmas ini pasti bisa,suweeeeeeeer...tidak usah panjang lebar nanti sobat malah benci sama kangmas,langsung aja kita terjun ke bawah .

Sebelumnya lihat gambar di bawah ini dari blog kangmas juga

Perhatikan pada lingkaran hijau,itu adalah contoh menu breadcrumb

Langkah-langkahnya sebagai berikut

1.Pastikan anda sudah membuat label pada blog


Perhatikan lingkaran hijau karena itu adalah label yang harus sobat isi,terserah mau di isi apa yang penting berhubungan dengan artikel sobat.

2.Masuk ke halaman Dasbor -> Pilih TATA LETAK -> EDIT HTML dan jangan lupa contreng kotak Expend widget templates.

3.Cari code dibawah ini,biar lebih mudah gunakan Ctrl+f atau bisa juga dengan hanya tekan F3.

<b:includable id='main' var='top'>

4.Setelah ketemu letakkan script dibawah ini tepat diatas code tadi

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Roni http://ngeblogseo.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>

</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

5.Kemudian cari lagi code berikut

<b:if cond='data:post.dateHeader'>

6.Setelah ketemu taruh code dibawah ini tepat di atasnya

<b:include data='post' name='breadcrumbs'/>

7.Terakhir cari code ]]></b:skin> ,setelah ketemu letakkan code dibawah ini tepat di atasnya

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

8.Simpan.selamat mencoba dan boleh comment bila ada kesulitan

0 komentar:

Posting Komentar