Senin, 14 Januari 2013

Membuat Navigasi Breadcrumb di Blog

Malam hari Ini saya akan membahas Cara Membuat Menu Navigasi Breadcrumb karena ada nya permintaan teman facebook saya, ya mau gak mau di buatin donk, demi teman gak papa lah repot dikit, walaupun sudah banyak Di google tapi berusaha untuk jadi Page 1 di SERP dengan KW "membuat navigasi breadcrumb di blog" sebelum kita memulai membuat menu ini ada baik nya kita mengetahui apa guna nya navigasi Breadcrumb ini, fungsi dari Navigasi breadcrumb ini adalah agar menambah link dalam blog, dan membuat para pembaca bisa betah di blog, mengapa bisa ??? dengar alasan dari saya, bentuk Navigasi Breadcrumb adalah Home > Trik blogger(label) > cara membuat navigasi breadcrumb (artikel)
 dengan ada nya menu tersebut, maka ketika si pengunjung membaca ada nama nya Trick blogger akan ada beberapa blogger pemula yang akan tertarik, jika label artikel kamuhacking maka akan menambah daya tarik si pemula hack untuk mengklik label hacking tersebut. masuk akal kan ??? itu alasan saya mengapa menu ini termasuk Trik SEO walau ada sebagian senior saya juga yang mengatakan kalau menu navigasi breadcrumb ini membuat blog kita lebih SEO dan lebih di hargai di Mesin Pencarian Google, tampilan nya akan menjadi seperti ini


saya sih kurang paham mengapa bisa membuat blog  menjadi lebih cepat terbaca di google searching
ok deh sekian penjelasan Menu Navigasi Breadcrumb sekarang kita melanjut ke langkahMembuat menu navigasi breadcrumb
pertama Login ke Blog

kedua klik menu Rancangan > Edit HTML (bagi blog tampilan lama)
          klik menu  Template > Edit HTML (bagi blog yang tampilan baru)

ketiga ceklist Expand Template Widget

Keempat cari code ]]></b:skin>  untuk mempermudah pencarian tekan ctrl+F
setelah dapat maka paste kode di bawah ini ke bagian atas code ]]></b:skin>

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;} 

Hasil nya menjadi
.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;} 
]]></b:skin>

Kelima cari Code <b:includable id='post' var='post'>


letakkan code di bawah ini tepat di bawah code <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'>
Anda disini &#187; <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>

menjadi seperti ini

<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'>
Anda disini &#187; <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>


lalu Save dan lihat hasil nya...

mohon beri komentar nya di kotak komentar di bawah ini...
Semoga bermanfaat


Artikel Terkait:

1 komentar:

JANGAN LUPA BERKOMENTAR DAN UNGKAPKAN PENDAPAT ANDA TENTANG ARTIKEL INI.

NO SARA
NO PORNOGRAFI
NO SPAM
NO LINK ON
NO LINK OFF

JANGAN LUPA UNTUK SELALU MEMBAGIKAN ARTIKEL INI KE JEJARING SOSIAL YANG ANDA SUKA YA :)