Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #3
1. Masuk ke Blogger >> Dashboard >> Templete >> Edit HTML
2. Cari kode <head>, kalau sudah ketemu >> letakkan kode di bawah ini sebelum kode <head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>
3. Kemudian cari juga kode seperti di bawah ini :
<div class='post-footer-line post-footer-line-1'>
4. Anda akan menemukan dua atau lebih kode yang mirip atau sama ( kode di bawah ini jangan diletakkan pada kode yang pertama ), sekarang salin kode dibawah ini ( kode CSS ) dan paste tepat di bawah kode yang ke kedua.
<b:if cond='data:blog.pageType == "item"'>
<style>/*crawlist.net CSS starts*/
.ks-auth {height:160px; width:500px; background:#151515; margin:auto;overflow:hidden; -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
-moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
box-shadow: 0px 1px 5px rgba(0,0,0,.25);}
.ks-auth1 {width:120px;height:100%; float:left;}
.ks-auth2 {float:right; margin-top:-155px;}
.ks-auth2 h3 { color:#fff; margin-left:135px; margin-top:8px; margin-bottom:8px; border-bottom:1px dashed #5C97BF;font-family: 'Droid Serif', serif; font-weight:300;font-size:16px;}
.ks-auth2 img { float:right; margin-right:7px; height:20px; width:20px; margin-top:-4px}
.ks-auth2 img:hover { opacity:.9;}
.ks-auth2 p {font-size:13px; color:#fff; margin-left:135px;font-family: 'Droid Serif', serif; line-height:1.5; margin-top:5px; font-weight:100}/*crawlist.net CSS ends*/
</style><!—bloggingpasuruan.blogspot.co.id - widget starts-->
<div class='ks-auth'><div class='ks-auth1'>
<img src="link URL foto Anda" style='float:left; border-radius:50%; border:2px #f5f5f5 solid; width:100px; height:100px; margin-left:15px; margin-top:18px;'/>
</div>
<div class='ks-auth2'>
<h3>About Author <a href="http://plus.google.com/ID google plus anda" title="Find me on Google plus" target="_blank"><img src="http://4.bp.blogspot.com/--1lfIW2iDys/VTzElG5tp0I/AAAAAAAAALk/Y-arrpZIeoA/s1600/google-plus_64.png"/></a>
<a href="http://www.twitter.com/ ID Twitter anda " title="Find me on Twitter" target="_blank"><img src="http://1.bp.blogspot.com/-9jxa8inY7NA/VTzElUoUMEI/AAAAAAAAALo/CVnckZyfwaM/s1600/twitter_64.png"/></a>
<a href="http://www.facebook.com/ ID Facebook anda " title="Find me on Facebook" target="_blank"><img src="http://3.bp.blogspot.com/-dmQ4niEV31g/VTzElDuYzZI/AAAAAAAAALg/EgES5KfNWXA/s1600/facebook_64.png"/></a></h3>
<p>Tulis diskripsi profile Anda sebagai penulis blog disini { kira 30 sd 40 kata }</p>
</div></div><!—blogginpasuruan.blogspot.co.id - widget ends--></b:if>
5. Jika Anda tidak menemukan kode <div class='post-footer-line post-footer-line-1'>
Pada template blog, silakan cari kode ini : </article>
6. Kemudian paste kan kode CSS di atas dibawah kode </article>
Jika ada masalah dengan widget diatas, silahkan tinggalkan komentar anda di kotak komentar di bawah ini.
Semoga bermanfaat….
