Bloggingpasuruan – Saya sebelumnya
sudah share mengenai Widget "Abaut Me" atau About the Author blogger ini perbedaan
dari widget sebelumnya hanya terletak pada desain widgetnya saja. Widget kali
ini memiliki latar belakang profil berupa foto, nama dan deskripsi tentang
penulis blog. Widget About the Author ( tentang penulis ) di buat sederhana
namun kesan pro masih melekat dalam desainnya, widget hanya menunjukkan sebuah
gambar dengan Google+ tombol dan link ke profil Google+ pengikut. Kali ini
Bloggingpasuruan akan model widget "About Me" yang di letakkan dibawah posting blog namun mudah
digunakan, keren dan ada tambahan 3 tombol jaringan sosial di dalam widget
yang. Saya harap Anda menyukai widget ini. Untuk menambahkan widdget ini ke
blog ikuti langkah-langkah di bawah ini
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-h7QAdAlTg5WnGcp4XdwrNdhvohT7V-idEhnLk22fhjJDQRChd_P49U8nRAK5MABnSs8c8XmlkT5O3ZgBPKeOBF7BlQJejP4oxpevSt3zifkK5qp6d37t0PDL1O-FULsfk-EHYhlPzIm/s1600/google-plus_64.png"/></a>
<a href="http://www.twitter.com/ ID Twitter anda "
title="Find me on Twitter" target="_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qUDz-ysXXx7nRleL1W4k5fDHoiYFX3qfZHY2BB-Spa5aElcBjOjtT9qrL4ClqhxGK1rNSmdDhwWbC4Jtg6y8LiYTi1OGk349GW8bn4JMv4zOrgG6_8hKoyLK0w3So9smmRbzQuf4UpaE/s1600/twitter_64.png"/></a>
<a href="http://www.facebook.com/ ID Facebook anda "
title="Find me on Facebook" target="_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpuvDNNbxtH2DZjyax04ZvorBxkQJn_VHU2dnMhSu9ut6sB0RivChv8YyFYzK9sqv8FoT05U3CgdH3bIHJJMDcaHz1Qi1qhEi3kGcFZGtwyEA6SzwYAa1sTowOC1hO1Oc_JqFRKsD6xDH/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….