Bikin Breadcrumbs Navigasi Seperti Punya o-om.com

Satu pertanyaan menghampiri saya via Facebook. Pertanyaannya kira-kira seperti ini: "gimana sih caranya bikin breadcrumbs kayak punya om agus o-om.com?" Mungkin yang kayak gini nih...

Nah, kalau yang seperti itu lebih cocok buat anda yang ngeblog secara keroyokan (lebih dari satu orang). Tapi, untuk yang hanya ngeblog sendiri nggak apa-apa. Ini bisa jadi pengganti breadcrumbs navigasi yang tempo hari pernah dibahas. Langsung saja yuk!

1. Login dulu ke Blogger. Lalu klik Tata Letak > Edit HTML.

2. Backup template anda.

3. Centang kotak kecil Expand Template Widget.

4. Cari kode ]]></b:skin>, lalu masukkan kode berikut diatasnya.

.authorbox{
padding:10px;
margin:10px;
border:1px dashed #000000
}

Ket: Bagian #000000 adalah warna dari garis pembatas. Ganti saja dengan warna keinginan anda. Apabila anda mahir CSS, anda bisa memodifikasinya lebih jauh, misalnya memberikan background, atau merubah warna dari link, atau apapun sesuai kreatifitas anda.

5. Cari kode:

<div class='post-header-line-1'/>

6. Taruh kode berikut dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorbox'>
<table border='0'>
<tr>
<td rowspan='2' valign='middle' width='50px'>
<b:if cond='data:post.author == &quot;AUTHOR1&quot;'>
<img height='50px' src='IMGAUTHOR1' style='margin:auto 0;' valign='middle' width='50px'/>
</b:if>
<b:if cond='data:post.author == &quot;AUTHOR2&quot;'>
<img height='50px' src='IMGAUTHOR2' style='margin:auto 0;' valign='middle' width='50px'/>
</b:if>
<b:if cond='data:post.author == &quot;AUTHOR3&quot;'>
<img height='50px' src='IMGAUTHOR3' style='margin:auto 0;' valign='middle' width='50px'/>
</b:if>
</td>
<td valign='top' width='160px'>
<data:post.title/>
</td>
<td valign='top' width='160px'>
On: <data:post.dateHeader/><br/> <data:post.timestamp/>
</td>
</tr>
<tr>
<td valign='bottom' width='160px'>
<b:if cond='data:post.author == &quot;AUTHOR1&quot;'>
By <a href='URLBLOGAUTHOR1'><data:post.author/></a>
</b:if>
<b:if cond='data:post.author == &quot;AUTHOR2&quot;'>
By <a href='URLBLOGAUTHOR2'><data:post.author/></a>
</b:if>
<b:if cond='data:post.author == &quot;AUTHOR3&quot;'>
By <a href='URLBLOGAUTHOR3'><data:post.author/></a>
</b:if>
</td>
<td valign='bottom' width='160px'>
Labeled as: <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;'>,</b:if></b:loop>
</td>
</tr>
</table>
</div>
</b:if>

Ket: Kode AUTHOR1, AUTHOR2, AUTHOR3, dst... adalah nama dari akun Google (nama akun) author (misal punya saya: Muhammad Rizki Fadillah). Nama akun Google biasanya bisa dilihat di footer postingan (bagian bawah postingan, pada bagian Diposkan oleh ... atau tulisan lainnya. Ya pokoknya bisa ditemukan di bagian bawah postingan). Kode tersebut dua kali diulang. Isikan dengan nama yang sama. Kode IMGAUTHOR1, IMGAUTHOR2, IMGAUTHOR3, dst... adalah URL dari gambar masing-masing penulis. Sedangkan kode URLBLOGAUTHOR1, URLBLOGAUTHOR2, URLBLOGAUTHOR3, dst... adalah URL blog dari masing-masing penulis. Anda bisa menambah atau mengurangi jumlah penulisnya.

7. Simpan template dengan mengklik tombol Simpan Template.

Apabila berhasil, maka pada masing-masing post akan terlihat tampilan seperti ini.

Mungkin tidak sama seperti punya http://o-om.com karena tidak ada tombol untuk membagikan postingan ke Facebook, Tapi bisa digantikan dengan membuat share pack pada blog anda. Terima kasih dan semoga bermanfaat.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya