Cara Memasang Menu Breadcrumbs Pada Blog

Cara Memasang Menu Breadcrumbs Pada Blog atau Memasang Menu Breadcrumbs Pada Blog SEO Friendly serta cepat terindeks di Google. Pada postingan kali ini saya mau share lagi informasi tentang salah satu topik pembahasan pada blog ini yaitu Tips Blog. Tips Blog kali ini sekaligus untuk menginformasikan kepada sobat blogger yang sempat menanyakannya pada saya kemarin lewat obrolan di Facebook. Kepada sobat blogger yang sudah menanyakan hal ini, sebelumnya saya berterima kasih soalnya sudah memberikan inspirasi bagi saya untuk membutkan artikelnya. Sebelum saya jelaskan lebih jauh tentang cara memasang menu breadcrumbs pada blog, izinkanlah sya untuk memberikan sedikit pemahaman tentang menu breadcrumbs pada blog.

Menu breadcrumbs merupakan menu navigasi yang biasanya para blogger meletakkannya tepat di atas judul postingan blog dimana dengan menu ini akan menginformasikan kepada admin maupun pengunjung blog tentang halaman yang sementara dikunjungi dan terletak pada kategori apa pada blog tersebut. Susunan menu ini yaitu Home/Beranda >> Kategori Blog >> Judul Halaman Postingan Pada Blog.

Contohnya sobat bisa perhatikan gambar berikut ini :

Dari gambar di atas tentunya sudah punya bayangan akan hasil yang akan saya jelaskan sebentar tentang cara memasang menu breadcrumbs pada blog. Perlu saya ingatkan kembali bahwa tips blog ini khusus untuk sobat blogger yang belum terpasang menu ini pda blognya. Untuk sobat blogger yang blognya sudah terpasang menu ini, silahkan simak saja dan apabila ada yang keliru dengan penjelasan saya, mohon dikritik.

Dan untuk cara pemasangannya, silahkan sobat ikuti cara-cara di bawah ini :

Langkah Pertama
Login ke akun bloggernya. Pada halaman dasbor blognya, silahkan klik nama blognya terus pilih menu Template dan pilih lagi Edit HTML - Lanjutkan - Ceklis pilihn Expand Template Widget.

Langkah Kedua
Pada halaman edit HTML, silahkan tambahkan atau letakkan kode di bawah ini tepat di ats kode ]]></b:skin>

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

Langkah Ketiga
Setelah sobat meletakkan kode CSS-nya, sekarang cari lagi kode <b:includable id='main' var='top'>. Silahkan gunakan fasilitas find untuk memudahkan sobat mencari kodenya dengan cara menekan tombol Ctrl+F lalu paste kode <b:includable id='main' var='top'> pada kotak pencariannya. Setelh kodenya sudah ketemu, silahkan gaanti kode tersebut dengan kode di bawah ini.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span>
&gt;
<span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&gt; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&gt; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &gt; <span>Unlabelled</span> &gt; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &gt; <span>Arsip Blog Untuk : <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &gt; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &gt; <span>Membuka Artikel Dengan Kategori : <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:include data='posts' name='breadcrumb'/>

Langkah Keempat
Silahkan simpan template blognya lalu lihat hailnya pada blog sobat.

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 20.10 and have 0 komentar