Jumat, 09 April 2010

Cara Membuat Profil Author (Author Box)

Akhir-akhir ini saya jarang update, bukan karena malas atau kehabisan ide, tetapi karena kesibukan saya di dunia nyata sehingga saya tidak bisa mengupdate blog ini secara teratur. Biasanya saya memanfaatkan fitur postingan terjadwal, namun karena saya tidak sempat mengupdate blog ini, blog ini menjadi terlantar. Ada kabar gembira juga, yaitu Page Rank blog ini naik menjadi 2. Ada kabar gembira lainnya, yaitu Alexa rank blog ini juga semakin hari semakin mengecil.

Pada postingan lalu saya pernah membahas tentang cara membuat breadcrumbs navigasi seperti punya OOM. Nah, kalau yang ini adalah profil dari penulis blog tersebut. Awalnya saya terinspirasi dari tampilan ID Tutorial yang mempunyai profil penulis yang berbeda-beda tergantung penulis artikelnya.
Nah, lalu saya melakukan eksperimen (halah... sok master padahal masih newbie) dan akhirnya saya berhasil membuat profil author yang mirip punya ID Tutorial.

Nah, kalau anda juga tertarik, ikuti langkah-langkah berikut.

1. Login ke Blogger, klik Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Centang kotak kecil Expand Template Widget.

4. Cari kode ]]></b:skin> lalu ketikkan kode berikut diatasnya.
.authorprofile{
padding:10px;
margin:10px;
background:#0A2A0A;
color:#FFFFFF;
}
.authorprofile a.authorlink{
font-weight:bold;
color:#FFFFFF;
}
.authorprofile a.authorlink:hover{
text-decoration:underline;
}
5. Karena author box ini lebih cocok diletakkan dibawah postingan, maka carilah kode <data:post.body/>, lalu ketikkan kode berikut.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorprofile'>
<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>

</td>
<td valign='middle' width='350px'>
<b:if cond='data:post.author == &quot;AUTHOR1&quot;'>
<a class='authorlink' href='URLBLOGAUTHOR1'><data:post.author/></a>
</b:if>

<b:if cond='data:post.author == &quot;AUTHOR2&quot;'>
<a class='authorlink' href='URLBLOGAUTHOR2'><data:post.author/></a>
</b:if>

<br/><br/>
<b:if cond='data:post.author == &quot;AUTHOR1&quot;'>
Hanya seorang blogger newbie yang berangan jadi master. Tapi mimpi tetap mimpi. Jangan lupa komen dibawah. (Isi dengan profil AUTHOR1)
</b:if>

<b:if cond='data:post.author == &quot;AUTHOR2&quot;'>
Hanya seorang blogger newbie yang berangan jadi master. Tapi mimpi tetap mimpi. Jangan lupa komen dibawah. (Isi dengan profil AUTHOR2)
</b:if>

</td>
</tr>
</table>
</div>
</b:if>
6. Simpan dengan mengeklik tombol Simpan Template.

Jika anda melakukan langkah-langkah diatas dengan benar, maka hasilnya seperti ini.
Apabila ada yang tidak dipahami, jangan malu dan jangan ragu-ragu untuk komentar. 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



16 komentar:

Boby mengatakan...

Wah Info yang menarikk..
Thanks bgd infonya..
kunjungi blog saya..

Kumpulan Tutorial Ngeblog mengatakan...

mantap Sob... mampir ya ke blog saya...

belajar internet mengatakan...

kunjungan rutin sob,,,
di tunggu kunjungan baliknya !!

nice info !

Akhmad Syaiful mengatakan...

nice tips sobat, akan saya coba ^_^

oketrik mengatakan...

keren sob ilmunya, tak save dulu oke

mas doyok mengatakan...

saya poernah post tentang author box :) keknya lebih simple :D dan css nya udah jadi satu sama kodenya :D

tapi yg ini lebih mudah dikustomisasi rizki :D
sip deh

darahbiroe mengatakan...

hmmm makasih yaw info na
tipz yang sangat bermanfaat utk menampilkan profile kita di blog
makasih

antok mengatakan...

makasih
buleh nuy buad dicoba
tengkyu

secangkir teh dan sekerat roti mengatakan...

saya minta ya, buat ganti template besok :)

Free Download mengatakan...

wah mantap sob tutorialnya perlu dic0ba neeh mkasih ya Vista 84

ajurNA mengatakan...

mantap bro. bisa buat hemat space widget.....

Pendi Ari Wibowo mengatakan...

mantap nih infonya...

Nono Warsono mengatakan...

Mas terus berinovasi seputar dunia maya ini (terutama di blog). ma ksh.

alfaiz mengatakan...

Thank infonya nih

Bang Koko mengatakan...

makasih mas ridzky atas infonya...salam knl mas..:)

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.