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.

Artikel Menarik Lainnya