Cara membuat navigasi breadcrums pada blogspot

Cara membuat navigasi breadcrums

Halooo sobat blog Mis.X., nih Mis.X mau berbagi cara membuat navigasi breadcrums. Sebelum sobat membuat navigasi breadcrums, ada baiknya Mis.X kasih tau fungsinya dalam blog. Fungsi dari breadcrums ini adalah untuk memudahkan pengunjung blog mengetahui sedang di halaman mana dia berada. Nah, untuk membuatnya ikuti caranya dengan teliti yah.

Cara membuat navigasi breadcrums pada blogspot :

• Masuk ke Template
• Pilih Edit HTML
• Cari kode ]]></b:skin>
• Copy kode di bawah ini:

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

• Pastekan tepat di atas kode ]]></b:skin>
• Selanjutnya cari kode <b:includable id='main' var='top'>
• Kemudian ganti kode tersebut dengan kode berikut:

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

• Silahkan sobat Pratinjau terlebih dahulu
• Bila tidak ada error baru di Save dan lihat hasilnya

Okeh, begitulah "Cara membuat navigasi breadcrums pada blogspot", untuk cara-cara yang lainnya akan Mis.X share pada kesempatan yang selanjutnya.

Artikel Terkait:

Title: Cara membuat navigasi breadcrums pada blogspot; Written by Unknown; Rating: 5 dari 5