Memasang Widget Author Igniel Pada Blog Reviewed by Paman Epic on Februari 02, 2017 Rating: 4,5

Memasang Widget Author Igniel Pada Blog

Widget Author Igniel Pada Blog

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.

Langsung aja kita ke topik artikel yaitu memasang Widget Author Igniel pada blog/Blogger.

Login ke Blogger → Pilih Template → Edit HTML
Letakkan kode CSS dibawah ini tepat setelah  <b:skin> atau <style type='text/css'>

/* 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.
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"/>
<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>&nbsp;&nbsp;Follow</a></li>
<li><a href="https://www.paypal.me/TeukuAlaina" title="Donate Teuku via Paypal" target="_blank"><i class='fa fa-paypal'></i>&nbsp;&nbsp;Donate</a></li></div>
</div>
Simpan dan lihat hasilnya.


Edit semua yang telah saya tandai dengan data pribadi Anda. dan jagan lupa tinggalkan komentar Anda, siapa tau kita bisa belajar bareng!.
Memasang Widget Author Igniel Pada Blog Memasang Widget Author Igniel Pada Blog Reviewed by Paman Epic on Februari 02, 2017 Rating: 5

12 komentar:

  1. Terimakasih mas infonya sangat membantu?

    BalasHapus
    Balasan
    1. iya sama sama, terimakasih juga telah berkunjung

      Hapus
  2. Wah makasih, sampe ditulis tutornya segala :)

    BalasHapus
    Balasan
    1. Oya, demo di Codepen nya expired. Gak bisa diliat.

      Hapus
    2. hahahaha maaf ya gak permisi dulu ngambil widgetnya, jadi gak enak saya?

      Oh iya makasih infonya. udah aku benerin linknya.

      Hapus
  3. keren juga Widgetnya mas
    mau nyoba dlu ya.

    BalasHapus
  4. gimana cara agar backgroudnya berwarna putih.
    kyak punya blog ini?

    BalasHapus
  5. Ini gak responsive ya mas? Kok saya coba ada beberapa yang kepotong saat saya liat pake android ada beberapa bagian yang kepotong kayak bintang,paypal,follow

    BalasHapus

Daripada komen pake akun kloningan, mending pake akun asli. Siapa tau kita bisa belajar bareng.

Diberdayakan oleh Blogger.