August 27, 2012

Navigasi Breadcrumb merupakan menu navigasi yang muncul pada halaman web dan letaknya dibawah halaman header/diatas judul posting dan setelah judul posting, saya mendefenikan atau mengartikan seperti itu secara kasat mata. Dimana dapat kita ketahui Navigasi Breadcrumb menyediakan link kembali kehalaman sebelumnya atau halam utama. Dengan tanda seperti ini (>)

Contoh : Home/Beranda>Kategori>Judul Posting (Lihat DEMO)

Namun dengan demikian tanda seperti ini (>) dapat kita ubah bisa menjadi tanda berikut (<) ataupun seperti ini (>> dan <<), hmmm maksud dari tanda tersebut menunjukkan tanda navigasi penunjuk arah.
Fungsi dari menu navigasi breadcrumb adalah untuk memudahkan pengunjung menelusuri halaman blog, karena dengan navigasi breadcrumb dapat lebih mudah menavigasi link dan selain itu juga dapat mengoptimalkan halaman blog di Seacrh Engine Optimation (SEO). Jika anda mau memasang navigasi breadcrumb maka saya akan berikan trik membuatnya dibawah ini.

Pertama, Login ke akun blog blogger anda.
Kedua, Pilih Template..
Ketiga, Untuk Menjaga template anda, silahkan download dulu template, klik dawnload template lengkap yang berada pada samping pojok kanan.
Keempat, Klik Edit HTML, Lanjutkan, kemudian jangan lupa untuk Expand Template Widget.
Kelima, gunakan Ctrl F atau F3 cari kode ]]></b:skin> dan jika sudah menemukan letakkan kode berukut di atas kode ]]></b:skin>

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

Keenam, kemudian cari kode <div class='post hentry'> dan letakkan kode berikut ini tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'><a expr:href='data:blog.homepageUrl'>Home</a></span><img alt='crumb blegedes' src='http://kraeng-francisco-tutorial.googlecode.com/files/Navigasicrumb.gif'/>
<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;'> &#187; </b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Home</span><img alt='crumb blegedes' src='http://kraeng-francisco-tutorial.googlecode.com/files/Navigasicrumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

Ketujuh, Klik Pritinjau untuk melihat tidak terjadi eror saat edit template, jika sudah lansung klik Simpan Template.

Selamat Mencoba dan saya berharap tutorial ini dapat bermanfaat bagi semua yang membutuhkan. Trima Kasih.

Posted by : Kraeng Francisco | Tuturial Blog | Tips and Trik Komputer | Tips and Trik Internet | SEO

Artikel Cara Membuat Menu Navigasi Breadcrumb diposting oleh Kraeng Francisco pada August 27, 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, dan atau mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini atau letekkan link dibawah ini sebagai sumbernya. Terima Kasih. Salam...


Artikel Terkait

19 comments:

  1. nice info nya sobb

    jawaban dari postingan ane
    free Download PES 2013

    Size : 8 Gb
    ini ber extensi Winrar

    ReplyDelete
    Replies
    1. Ya mksih sudah memberikan jawaban dan kunjungan pagi ini.

      Delete
    2. Wah mantab nih PES 2013 nya sob, tapi 8 GB yaa...ctrl+d aja dulu dah...

      Delete
  2. kunjungan siang sob...
    sukses slalu buat anda

    ReplyDelete
    Replies
    1. Trima kasih Sobat adam untuk kunjungannya.

      Delete
  3. ane juga udah make breadcrumb :D

    ReplyDelete
  4. . . alhamdulillah,, aq udah pake kawan. he..86x . .

    ReplyDelete
  5. sob template saya tidak ada kode div class='post hentry bagaimana dong.. jawab di komen blog saya ya http://ghilankmayones.blogspot.com

    ReplyDelete
    Replies
    1. jika pada template sobat tidak menemukan kode
      [class='post hentry'>
      cari carinya gini cukup cari kode
      [class='post hentry, <<< perhatikan disini terdapat beberapa rangkaian kode
      nanti sobat akan menemukan kode
      [class='post hentry uncustomized-post-template',
      Nah tepat dibawah kode tersebut, letakkan kode seperti yang telah diuraikan pada langkah keenam...
      Semoga dapat membantu.

      Delete
  6. sob di template saya malah ada kode yang ini div class='post hentry' itemscope='itemscope' bisa tidak ??

    ReplyDelete
    Replies
    1. Sob setiap template pasti berbeda, jika pada template sobat terdapat 2 kode diatas, maksudnya 2 kode yang sama letakkan pada kode yang pertama....dan jgn lupa untuk backup template, menjaga kemungkinan tidak terjadi eror...sekian mungkin cara ini dapat membantu.

      Delete
  7. Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

    ReplyDelete
    Replies
    1. Ok silahkan sobat semoga dapat bermanfaat. Trima kasih

      Delete
  8. Terimakasih gan... share trus ya agan yang baek ati... hehee

    ReplyDelete
  9. Terima kasih infonya admin..
    Ini yang saya cari untuk optimasi SEO khusus nya pada keyword

    ReplyDelete