Ok sobat, pada kesempatan ini saya akan membagikan widget "about the author" yang bisa kamu letakkan dibawah artikel/postingan blog. Beberapa bulan yang lalu saya sudah pernah membagikan widget seperti ini tapi hanya untuk dipasang di widget blog (baca: widget author 1 dan widget author 2).

Cara Membuat dan Memasang Widget About Author di bawah Postingan

Untuk penampakan widget ini adalah kira-kira seperti gamabar diatas. Bagaimana cara memasangnya di bawah postingan blog? Ok berikut adalah tutorialnya.

Widget About The Author Blogger

1. Log In dulu ke Blogger dan pilih blog yang mau di edit.
2. Di Dasbor Pilih Template
3. Simpan dulu template atau cadangkan template agar template bisa di kembalikan seperti semula jika terjadi kesalahan atau tidak sesuai dengan keinginan.
4. Lalu Klik Edit HTML
5. Cari kode ]]></b:skin> (Gunakan Ctrl+F untuk memudahkan pencarian kode) dan pasang kode di bawah ini di atas atau sebelum kode ]]></b:skin> atau dibawah kode <style> yang dibungkus tag kondisional yang menandakan widget hanya muncul dipostingan blog.
.wc-aboutauthor { float:left; width:100%px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:url(&#39; http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png&#39; ); color:#444444; }
.wc-aboutauthor h5 { color:#b6e026; font-family:Arial; font-weight:bold; text-shadow:#64665b 0 1px 1px; font-size:18px; margin-bottom:-4px; margin-top:-6px; }
.wc-aboutpic { float:right; margin:0 0 0 10px; }
.wc-aboutpic img { border:1px solid #999999; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear; transition:transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px; -webkit-transform:rotate(+5deg); -moz-transform:rotate(+5deg); -ms-transform:rotate(+5deg); -o-transform:rotate(+5deg); transform:rotate(+5deg); float:left; }
.wc-aboutpic img:hover { background:#FFFFFF; -webkit-box-shadow:0 0 10px  rgba(0,0,0,.3); -moz-box-shadow:0 0 10px  rgba(0,0,0,.3); box-shadow:0 0 10px  rgba(0,0,0,.3); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); }
.wc-aboutsoc img { height:35px; margin-bottom:-13px; }
.wc-aboutsoc  p { font:16px georgia; color:#ffffff; background:#b6e026; display:inline; border-radius:5px; padding:5px; margin-right:30px; }
6. Cari seperti kode ini <data:post.body/>  dan kalau kode nya ada 2 letakan kode di bawah ini setelah atau di bawah kode <data:post.body/> ( coba saja satu persatu atau misalnya jika di template kamu ada widget share sosial media seperti facebook dkk letakan sesudah kode sosial ini, atau jika ditemplate sobat ada related postnya letakan saja diatas kode related post ).
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='wc-aboutauthor'>
<div class='wc-aboutpic'>
<img alt='Author image' height='100' src='http://3.bp.blogspot.com/-Jl5sN_25uTc/VTTQ6xW527I/AAAAAAAAAlU/Unkyu4q8LLc/s300/seocips-droid.png' width='100'/>
</div>
<h5>About the Author :</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. </p>
<div class='wc-aboutsoc'>
<p> Share This Article:
 </p><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank' title='Share to Facebook'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Facebook'/></a>    <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank' title='Share to Twitter'> <img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Twitter'/></a> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank' title='Share to Google+'> <img src='http://4.bp.blogspot.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/s1600/google.png' title='Google plus'/></a></div>
</div>
</b:if>
7. Langkah terakhir simpan template dan lihat hasilnya.

Oh iya, ada juga loh widget keren laing yang bisa kamu letakan dibawah postingan blog kamu seperti widget sosial share efek slide atau widget feedburner di bawah postingan.

Ok sobat sekian Cara Memasang Widget About The Author di bawah Postingan, semoga bermanfaat.
3 Komentar untuk "Cara Memasang Widget About Author di bawah Postingan Blog"

Menarik, layak dicoba...
o, ia, kalau multi autor bagaimana bro?

Pasang aja lebih dari satu..hehehe