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 == "item"'>
<div class='authorprofile'>
<table border='0'>
<tr>
<td rowspan='2' valign='middle' width='50px'>
<b:if cond='data:post.author == "AUTHOR1"'>
<img height='50px' src='IMGAUTHOR1' style='margin:auto 0;' valign='middle' width='50px'/>
</b:if>
<b:if cond='data:post.author == "AUTHOR2"'>
<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 == "AUTHOR1"'>
<a class='authorlink' href='URLBLOGAUTHOR1'><data:post.author/></a>
</b:if>
<b:if cond='data:post.author == "AUTHOR2"'>
<a class='authorlink' href='URLBLOGAUTHOR2'><data:post.author/></a>
</b:if>
<br/><br/>
<b:if cond='data:post.author == "AUTHOR1"'>
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 == "AUTHOR2"'>
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!
KLIK DISINI UNTUK BACA SELENGKAPNYA