Cara Mudah Memasang Breadcrumb Navigasi

Breadcrumb Navigasi adalah menu navigasi sebagai petunjuk arah halaman yang sedang dikunjungi berupa link horizontal diatas judul yang sudah diatur sedemikian rupa. Biasanya navigasi ini dipasang berurutan mulai dari home - Label - Judul halaman yang sedang dibuka, tujuannya adalah untuk mempermudah dan memberikan informasi kepada pengunjung blog posisi halaman yang sedang dibuka. Adapun cara memasang breadcrumb navigasi adalah sebagai berikut.

Baca juga cara mudah membuat tombol share efek jQuery Nudging

1. Pertama login dulu ke Blogger

2. Pilih Template

3. Pilih Edit HTML

4. Cari Kode ]]></b:skin>

5. Pasangkan kode dibawah ini ditas kode ]]>/b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 5px 5px 15px 0px;
font-size:95%;
line-height: 1.4em; 
height: 15px;
border-top:2px double #ff0000; 
background: #ffffff;
  
}

6. Kemudian cari kode <b:includable id="main"var="top">

7. Ganti kode <b:includable id="main"var="top"> 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> &#187; <span><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<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'>

&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

</b:loop>

&#187; <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'>

<span>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

</span> &#187; <span>Unlabelled</span> &#187;

 <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a>

</span> &#187; <span>Archives for <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> &#187; <span>All posts</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a>

</span> &#187; <span>Posts filed under <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'>

<b:include data='posts' name='breadcrumb'/>

8. Simpan template

Baca juga cara mudah memasang gambar melayang di blog

Demikian cara mudah memasang breadcrumb navigasi, semoga dapat membantu dan bermanfaat. Terimakasih atas kunjungannya.

loading...

► Copas Sange ◄

Sobat sedang membaca artikel tentang Cara Mudah Memasang Breadcrumb Navigasi. Jika sobat ada pertanyaan atau pesan mengenai artikel diatas, salurkan pada kolom berkomentar !! Dan untuk mendapatkan tambahan pahala, silahkan LIKE and SHARE ♂ <a href="http://copasange.blogspot.com/2016/04/cara-mudah-memasang-breadcrumb-navigasi.html" target="_blank">Cara Mudah Memasang Breadcrumb Navigasi</a>

:: Salam Blogger ! ::

LANGGANAN ARTIKEL GRATIS

Dapatkan Artikel Terbaru Disini !

Masukkan email anda di bawah ini ! Maka otomatis anda akan mendapatkan kiriman terbaru dari Blog ini secara gratis via email. Terimakasih.