BREAKING NEWS

Kamis, 27 Juni 2013

Cara Menambah Breadcrumb di Blogger

satu-delapan-blogspot
Breadcrumb merupakan navigasi menu yang menunjukan lokasi pengunjung pada halaman blog Anda. Hal digunakan untuk membuat website kita lebih user friendly, yang mana pengunjung dapat dengan mudah mengunjungi halaman blog Anda tanpa masalah. Hal ini juga dapat membantu meningkatkan pencarian blog Anda di mesin pencari dengan menambahkan kata kunci ke dalam postingan blog Anda. Contoh jika Anda menulis postingan tentang Cara Install dan Menambah Disqus Di Blogger dan tag dengan nama label Tips Blog akan menciptkan menu navigasi atau jejak di bagian atas judul postingan Anda sebagai berikut :
breadcrumb

Setelah memahami apa itu Breadcrumb mari kita lanjutkan dengan menambah Breadcrumbs di Blogger Anda.

Ikuti langkah-langkah berikut : 
  • Login ke Akun Blogger Anda - Edit HTML
  • Tekan Ctrl+F dan cari kode berikut :
<b:include data='top' name='status-message'/>
  • Tambahkan kode berikut tepat setelah kode di atas :
<b:include data='posts' name='breadcrumb'/>
  • Langkah selanjutnya cari kode berikut :
<b:includable id='main' var='top'>
  • Ganti kode tersebut dengan kode di dibawah ini :



<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<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:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>



  • Langkah berikutnya memasukan style, Tekan Ctrl+F dan cari kode ini:
]]></b:skin>
  • Setelah ditemukan tambahkan kode dibawah ini tepat di atasnya :
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

  • Langkah terakhir klik Simpan Template
Setelah melakukan langkah diatas perhatikan pada bagian atas halaman psotingan Anda akan muncul menu navigasi-nya. Jika Anda ingin meningkatkan lalu lintas blog Anda bisa dengan cara mudah seperti Membuat Sitemap Di Blog Anda dan juga Menambah Sitemap di Google Webmaster. Akhir kata semoga artikel ini tidak menyulitkan Anda dan bermanfaat.


Sumber : http://satu-delapan.blogspot.com

Related Post



About ""

Salam Blogger dari Medan , Blog yang Saya beri nama Ilmu Komputer dan Pemograman ini Berisi Tentang Programmer , Tutorial , Tips Trik Komputer dan Internet, Tugas Akhir, dll. Jika sobat semua suka silahkan Join dan jangan lupa untuk memberikan jempolnya pastinya.

Creatif By : Ramlan MarbunSemoga Bermanfaat Untuk Sobat Semua

Terimah Kasih telah membaca artikelCara Menambah Breadcrumb di Blogger . Yang ditulis oleh Ramlan Marbun .Pada hari Kamis, 27 Juni 2013. Terima kasih atas kunjungannya dan apabila berminat dengan artikel ini sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Terimakasih

:: EnterKomputer13.Blogspot.Com ! ::

1 komentar:

  1. sipp bagus infonya bro..



    Kunjungi juga berita seputar jabodetabek terkini
    Infonitas.com

    BalasHapus

 
Copyright © 2013-2017 Ilmu Komputer dan Pemograman .All Rights Reserved.
Design by: Ramlan Marbun |