Menambah Lokasi Link Post (Breadcrumbs Trail)

Menambah Lokasi Link Post (Breadcrumbs Trail)

Posted by rike on 0

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