Widget Author pada blog merupakan fiktur penghubung antara pengunjung dan pemililk sebuah blog. Memasang widget Author yang keren dapa menarik pengunjung agar lebih dekat dengan pemilik blog dan dapat mengenal lebih dekat dengan pemilik sebuah blog, hal ini juga salah satu faktor meningkatnya pengunjung pada suatu blog, apalagi jika Author tersebut cantik/tampan dan baik hati.
Pada kesempatan ini, saya Admin contohblogger.com akan menbagikan widget Author yang saya lihat saat Blogwalking dan kebetulan menarik perhatian saya karna:
1. Authornya lumayan cantik. :D
2. Widget tesebut keren dan menarik.
3. Banyak fiktur dalam widget yang menguntungkan.
1. Author lumayan Cantik
Kalau boleh jujur memang cantik namun yang paling penting itu adalah baik hatinya. ;)
2.Widget Keren dan Menarik
Bisa saya katakan keren karna mungkin widget tersebut bergerak terus menerus, seakan akan terus berbisik "Hai godain dong" tanpa henti. :V
3. Banyak fiktur bermanfaat
Kalau saya bandingkan dengan widget lainnya mungkin widget ini adalah widget yang paling bermanfaat karna disitu juga bisa menjelaskan tingkat keahlian si Author tersebut.
/* Css Author by ContohBlogger.com */
#ignielAuthor {text-align:center;background-color:#2f303f;color:#bdc3c7;line-height:20px;padding:15px 10px}
#ignielAuthor img {border-radius:100px; max-width:100px;margin-bottom:10px}
#sidebar-wrapper #ignielAuthor h2, #sidebar-wrapper #ignielAuthor h3 {background:transparent;padding:0px}
#sidebar-wrapper #ignielAuthor h2 {font-size:20px}
#sidebar-wrapper #ignielAuthor h2:after {content:'\f058';font-family:Fontawesome;color:rgb(17,143,249);display:inline;position:relative;border:0px;font-size:18px;padding-top:18px;width:10px !important;margin-left:10px}
#sidebar-wrapper #ignielAuthor h3 {font-size:15px;font-weight:normal}
#sidebar-wrapper #ignielAuthor h3:after {display:none}
#ignielAuthor hr {border:none; height:1px; background-color:#bdc3c7; width:70%; margin:10px auto}
#ignielAuthor2 {width:100%;;margin-bottom:20px}
#ignielAuthor2 li {list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block}
#ignielAuthor2 li:hover {background-color:#37b185}
#ignielAuthor2 li:nth-child(2) {margin-left:-3.5px;border-left:3px solid #2f303f;float:right}
#ignielAuthor2 li a {color:#fff;padding:10px 40px;line-height:40px}
.simplifymedsos a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;}
.medsos a{display:inline-block;text-align:center;margin-right:3px;color:#fff;border-radius:100%;opacity:.9;}.medsos a i{font-family:Fontawesome;width:35px;height:35px;line-height:35px;display:block}.medsos a:hover{color:#fff;transform:rotate(360deg);}.medsos .facebook{background:#3a579a}.medsos .twitter{background:#00abf0}.medsos .googleplus{background:#df4a32}.medsos .youtube{background:#cc181e}.medsos .instagram{background:#992ebc}.medsos .pinterest{background:#cd1c1f}.medsos .linkedin{background:#2554BF}.medsos .tumblr{background:#314358}.medsos .rssfeed{background:#ee802f}
a.showcase{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out}
a.showcase:hover{background:#357ae8;border:1px solid #2f5bb7;}
a.showcase2{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;margin:0;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
a.showcase2 svg{width:14px;height:14px;vertical-align:-3px}
a.showcase2 svg path{fill:#fff;}
a.showcase2 {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
.hrecipe{display:none;margin:30px 0 30px 0;padding:12px;border:1px solid #e8e8e8;background:#f8f8f8;overflow:hidden;}
#Feed1_feedItemListDisplay a {line-height:20px;}
#Feed1_feedItemListDisplay .item-date, #Feed1_feedItemListDisplay .item-author {font-style:italic;}Simpan Template.
Kemudian Anda perlu menuju → Tata letak → Pilih bagian mana yang ingin dipasang, Tambahkan Gadget → Tambahkan HTML/JavaScriptTambahkan → Copy dan letakkan kode dibawah ini.
<div id="ignielAuthor"><img src="https://lh3.googleusercontent.com/-9aOlgAnGy5I/AAAAAAAAAAI/AAAAAAAAAh8/tpiNGd6fkkk/s60-p-rw-no/photo.jpg" alt="Igniel"/>Simpan dan lihat hasilnya.
<br/>
<h2>Author: Paman Teuku</h2>
<h3>From : Aceh, Indonesia</h3>
<i>www.ContohBlogger.com</i><br/>
<i>"Stimulate your passion!"</i>
<hr />
<b>SHORT RESUME</b>
<center><table style="text-align:left;font-size:12px">
<tr>
<td width="50px">CSS3</td> <td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-half-empty'></i></td>
<td style="width:85px;padding-left:20px">Javascript</td> <td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-half-empty'></i> <i class='fa fa-star-o'></i></td>
</tr>
<tr>
<td>HTML5</td> <td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-half-empty'></i></td>
<td style="padding-left:20px">Photoshop</td> <td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-o'></i> <i class='fa fa-star-o'></i></td>
</tr>
<tr>
<td>PHP</td> <td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-half-empty'></i> <i class='fa fa-star-o'></i></td>
<td style="padding-left:20px">CorelDraw</td> <td><i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star'></i> <i class='fa fa-star-o'></i> <i class='fa fa-star-o'></i></td></tr>
</table></center>
<a class="showcase2" style="width:95%" href="http://www.contohblogger.com/p/contact-form.html" title="Hire Igniel to do your job">Contact Me<i aria-hidden="true" class="fa fa-paper-plane" style="margin-left:10px;"></i></a>
<br/>
<div class="medsos">
<a class="facebook tooltip" data-tooltip="Facebook" href="https://www.facebook.com/TeukuBlogger" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="twitter tooltip" data-tooltip="Twitter" href="https://www.twitter.com/teukuwebid" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="googleplus tooltip" data-tooltip="Google Plus" href="https://plus.google.com/u/0/108870690279883821904" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a>
<a class="youtube tooltip" data-tooltip="Youtube" href="https://www.youtube.com/c/awainanet" rel="nofollow" target="_blank"><i class="fa fa-youtube-play"></i></a>
<a class="instagram tooltip" data-tooltip="Instagram" href="https://www.instagram.com/belumpunya" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="rssfeed tooltip" data-tooltip="RSS Feed" href="https://feeds.feedburner.com/ContohBlogger" rel="nofollow" target="_blank"><i class="fa fa-rss"></i></a>
</div>
</div>
<div id="ignielAuthor2">
<li><a href="https://www.blogger.com/follow-blog.g?blogID=2056664467978427726" title="Follow Igniel" target="_blank"><i class='fa fa-user-plus'></i> Follow</a></li>
<li><a href="https://www.paypal.me/TeukuAlaina" title="Donate Teuku via Paypal" target="_blank"><i class='fa fa-paypal'></i> Donate</a></li></div>
</div>
Edit semua yang telah saya tandai dengan data pribadi Anda. dan jagan lupa tinggalkan komentar Anda, siapa tau kita bisa belajar bareng!.