Thursday, 24 September 2015

Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #3

Posted by on Thursday, 24 September 2015
Cara Membuat Widget About the Author ( tentang Penulis ) Blogger #3

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 sebelumkode <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 == &quot;item&quot;'>
<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….

close