Menambah Lokasi Link Post (Breadcrumbs Trail)

Ketika pengunjung membuka suatu halaman posting dalam blogger, mungkin dia belum tahu posisi link posting kamu itu ada dimana. Ia hanya menduga bahwa link posting yang ditampilkan berada dalam label tertentu. Yang apabila label tersebut di klik, maka akan menampilkan posting dalam label/kategori yang sama dengan jumlah tertentu. Dalam blogspot hal tersebut di atas mungkin tidak terlalu dipermasalahkan, karena posting disusun berdasarkan satu halaman saja. Tapi bagaimana seandainya kalau kamu menggunakan web blog yang mempunyai halaman posting/content yang dapat ditambah. Example: Halaman utama (beranda) yang memiliki anak-anak halaman lain (Google Site).

Namun bukanlah merupakan sesuatu yang tidak boleh, jika kamu juga ingin menambah variasi tampilan blogger agar halaman posting lebih terdefinisi. Nah, trik blogger yang satu ini dinamakan "Breadcrumbs Trail" dan diperkenalkan oleh Hoctro's. Demo penggunaannya dapat kamu lihat di atas tiap title post optimasi blog ini, setelah kamu mengklik judul posting (dalam full posting). Tertarik dengan review breadcrumbs trail di atas, mari kita bersama-sama memulai triknya.
  • Login dulu ke account blogger kamu.
  • Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".
  • Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
    • Tambahkan kode CSS berikut, di atas kode ]]></b:skin>
    .breadcrumbs {
    border-bottom:1px dotted #000;
    margin:0.5em 0 0.5em;
    padding:0 0 0.5em;}
    Catatan:
    Silahkan rubah margin (khususnya yang berwarna merah), jika kamu ingin memodifikasi jarak breadcrumbs agar sesuai dengan keinginan kamu.
    • Cari kode di bawah ini.
    <b:includable id='main' var='top'>
    Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
    • Kemudian copas kode dari Hoctro's berikut, diatas kode tersebut.
    <b:includable id='breadcrumbs' var='post'>
    <!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
    <b:if cond='data:blog.pageType == "item"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    Kamu ada disini:
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
    <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:if cond='data:post.title'>
    > <b><data:post.title/></b>
    </b:if>
    </b:if>
    </span>
    </p>
    </b:if>
    <!-- End of Breadcrums Hack -->
    </b:includable>
    Catatan :
    Silakan hapus atau ganti teks yang berwarna merah dengan teks favorit kamu. Dan jika kamu tidak suka dengan penggalan lokasi dengan kode > (warna merah juga), silakan ganti dengan kode favorit kamu.
    • Selanjutnya cari kode berikut.
    <b:if cond='data:post.dateHeader'>
    • Kalau sudah ketemu, copas kembali kode berikut diatasnya
    <b:include data='post' name='breadcrumbs'/>
    Catatan:
    Untuk template yang berkarakter mirip dengan "Minima" (belum dimodifikasi), cara peletakkan kode <b:include data='post' name='breadcrumbs'/> adalah sebagai berikut.
    • Cari kode di bawah ini.
    <b:includable id='post' var='post'>
    <div class='post hentry uncustomized-post-template'>
    • Dan letakkan kode <b:include data='post' name='breadcrumbs'/> dibawahnya.
    Pastikan postingan kamu sudah memiliki label atau kategori, agar breadcrums trail tampil optimal.
    • Jangan lupa disimpan

    Selamat menampilkan link postingan kamu dalam breadcrumbs trail...

    17 komentar untuk “Menambah Lokasi Link Post (Breadcrumbs Trail)”

    1. om , tyus kalo mw masukin postingan kita ke dlm menu2 td gmn ? soalnya ak blm bs masukin postingan nya . pdhl dah masukin kode2 di atas . . mksii

      BalasHapus
    2. to Kinki Sottogomas as KISO: Nama Kinki panjang banget :D
      Ngga perlu masukin apa-apa, trik tersebut otomatis tertanam dan tertancap dalam blog post. Syaratnya posting Kinki harus memiliki LABEL tertentu. Artinya waktu Kinki melakukan post entry (buat posting), di bawah kotak entry kan ada teks "Label untuk entry ini" (Labels for this entry). Nah, masukkan label Kinki disitu, ex: Post Perdana, Kata Kinki, de-el-el.

      BalasHapus
    3. mantap OB....kian memperkaya pengetahuan trik blogger kita...

      BalasHapus
    4. mas OB,klo gnti symbol yg kya gini ">" gmna?
      soalnya mau sya gnti jd garis mring aj..
      owya,mo tnya lg dnk mas..
      ko emoticon komentar n photo id bloglog sya ga kluar ya mas klo saya komentar di blog sya??

      BalasHapus
    5. to f3hry: posting dah di update, f3hry tinggal cari kode > yang berwarna merah. trus ganti dengan kode f3hry sendiri.
      Sedangkan untuk photo author di komentar yang menggunakan ID mybloglog, OB belum tahu kenapa ngga muncul-muncul :D

      BalasHapus
    6. tapi klo untuk emoticonnya mas OB tw ga knapa ga muncul?
      mkasih..

      BalasHapus
    7. wah trik baru lagi asekkkkkkkkk nti di coba ah hohohoho thanks mas!

      BalasHapus
    8. to f3hry: Udah dites dan tidak ada masalah sama sekali, emoticonnya muncul semua :p

      BalasHapus
    9. Wekzzz, kok di tempat ku malah artikelny ga muncul semua ya.. haha..
      Apa karena double label jadi ga bisa ya OB??
      Soalnya di tempatku ada artikel yang masuk dua label yang berlainan

      BalasHapus
    10. ak coba kok gagal ya


      ada tulisan "Widget dengan id "Blog1" mengandung sedikitnya dua elemen b:includable dengan id yang sama:"breadcrumbs". Semua elemen b:includable sebaiknya memiliki id unik untuk widget yang diberikan." gt....

      apanya yang salah please send me the answere.

      BalasHapus
    11. hmm,,salam kenal mas..bgus neh artikelnya tak coba dulu yh

      BalasHapus