Jumat, 02 April 2010

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.

Buzz It

Artikel Menarik Lainnya



9 komentar:

didin mengatakan...

mantap..
baru tau ada cara gini.

Ega mengatakan...

Thanks infonya

Nesaci mengatakan...

Thanks banget nih atas ilmu, benar-benar sangat bermanfaat sekali...

KangTiar mengatakan...

Manthap

tutorial blog mengatakan...

informatif skali sob..
keep posting..

Anonim mengatakan...

cool...aku masih bingung neh buat navbar kayak kamu punya , gimana caranya ya???????

investasi online terbaru dan tercepat mengatakan...

waduh ane juga udah pake breadcrumbs tp yang biasa. Mohon doanya di kontes investasi online terbaru dan tercepat

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.