Dynamic For Post

Pada artikel kali ini, saya akan share tutorial Cara Membuat Widget Author Box yang Ringan dan Keren dari Igniel .com. Tapi sebelum share, saya mau minta izin dulu nih ke Pembuatnya langsung Mbak Igniel, soalnya sekarang saya pake juga Author boxnya di Blog saya hehe...

Alasan saya memilih Author Box Buatan Mbak Igniel ini adalah, Widget ini sangat ringan dan tampilannya pun lebih keren dan terlihat profesional. Di Author box ini kita bisa memperkenalkan siapa diri kita dan menunjukan kemampuan yang kita miliki, ya siapa tau dengan kita menunjukan kemampuan yang kita miliki ini ada orang tertentu yang mau mengajak kita untuk bekerja sama.

Kelebihan lainnya dari Authorbox ini adalah, tersedianya Icon Media Sosial yang nantinya bisa kita arahkan ke link Media Sosial kita masing-masing seperti Facebook, Google+, Twitter, Instagram, dan lain-lain.

Lebih lengkapnya, lihat aja di sebelah kanan blog saya ini, sama kan Author Boxnya hehe...

Tanpa berlama-lama lagi, yuk simak tutorial Cara Membuat Widget Author Box Ringan dan Keren dari Igniel.com:

Pada Dashboar Blogspot, kunjungi Tema dan Klik Edit HTML.
Cari Kode <Style> atau <style type='text/css'> lalu Simpan kode CSS di bawah ini tepat setelah Kode tersebut.

/* Author Box ala IGNIEL.COM */

#ignielAuthor{text-align:center;background-color:#2f303f;color:#bdc3c7;line-height:20px;padding:15px 10px} #ignielAuthor svg {width:14px;height:14px;margin-left:-3px;vertical-align:-3px} #ignielAuthor svg path {fill:#bdc3c7} #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;display:inline-block} #sidebar-wrapper #ignielAuthor h2:after{border:0px} #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 svg {width:20px;height:20px;vertical-align:-4px} #ignielAuthor2 svg path {fill:#fff} #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 30px;line-height:40px} .ignielAuthor{text-align: left;font-size: 12px;display:flex;justify-content:center} .ignielAuthor .tablekiri {width:50px} .ignielAuthor .tablekanan{width: 85px;padding-left: 20px}

#ignielAuthor .medsos svg {width:20px;height:20px;margin-top:7px} #ignielAuthor .medsos svg path {fill:#fff} .medsos .facebook{background:#3a579a} .medsos a{display:inline-block;text-align:center;margin-right:3px;color:#fff;border-radius:100%;width:35px;height:35px} .medsos a:hover{transform:rotate(360deg)} .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}

#ignielAuthor .ignielBounce svg{width:20px;height:20px;vertical-align:-4px;margin-left:10px} #ignielAuthor .ignielBounce svg path{fill:#fff;} .ignielBounce{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} .ignielBounce {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}

@media screen and (max-width:320px){#ignielAuthor svg{width:12px; height:12px}}

@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)}

}

@-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)}

}

Tampilannya kurang lebih akan seperti ini : Klik Simpan Tema
Kembali Ke Dashboard Blogspot, Klik Tata Letak dan Klik Tambahkan Gadget, pilih HTML/JavaScript. Pasang kode HTML di bawah ini di Gadget HTML/JavaScript tersebut.

<div id="ignielAuthor"><img src="https://4.bp.blogspot.com/-7xS5as3Pad4/WKg5V1rMamI/AAAAAAAAEjY/Sl8SihvYjqghIIN7VEm-PkWWwjCTsCt9wCPcB/w100-h100-p-k-no-nu/ignielcom-Author.jpg" alt="igniel.com Author" title="igniel.com Author"/><br/><h2>AUTHOR: Igniel</h2> <h3>Sukabumi, Indonesia</h3><i>"Stimulate your passion!"</i><hr/><b>RESUME SINGKAT</b><table class="ignielAuthor"><tr><td class="tablekiri">CSS3</td><td>

</td><td class="tablekanan">Javascript</td><td>

</td></tr><tr><td>HTML5</td><td>

</td><td style="padding-left:20px">Photoshop</td><td>

</td></tr><tr><td>PHP</td><td>

</td><td style="padding-left:20px">CorelDraw</td><td>

</td></tr></table><a class="ignielBounce" href="http://www.igniel.com/p/contact.html" title="Hire Igniel to do your job">SEWA JASA SAYA <svg viewbox="0 0 24 24"><path d="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z" /></svg> </a><br/><div class="medsos">

</svg> </a>

</svg></a>

</div>

</div><div id="ignielAuthor2">

</svg>  Follow</a></li>

<li><a href="https://www.paypal.me/USERNAME_PayPal.Me" title="Kirim Donasi Untuk Igniel via Paypal" target="_blank"><svg viewbox="0 0 24 24"> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /> </svg>  Donasi</a></li></ol></div>

Tampilannya akan seperti di bawah ini.

Klik Simpan.

Sekarang, ganti kode di bawah ini dengan data diri kamu sendiri.

URL Foto.
https://4.bp.blogspot.com/-7xS5as3Pad4/WKg5V1rMamI/AAAAAAAAEjY/Sl8SihvYjqghIIN7VEm-PkWWwjCTsCt9wCPcB/w100-h100-p-k-no-nu/ignielcom-Author.jpg
Nama, kota, dan slogan. Bisa juga diganti dengan kalimat lain.
AUTHOR: Igniel. Sukabumi, Indonesia. "Stimulate your passion!"
Skill yang kamu kuasai.
CSS3. Javascript. HTML5. Photoshop. PHP. CorelDraw
Tingkatan skill.
Ini icon bintang yang digunakan sebagai parameter, seberapa menguasainya kamu di bidang tersebut. Edit sesuai penilaian diri sendiri ya.
1. Bintang full
  <svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
2. Bintang setengah
  <svg viewbox="0 0 24 24"><path d="M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
3. Bintang kosong
  <svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
Tempat untuk menghubungi jika ingin menyewa jasa kamu.
http://www.igniel.com/p/contact.html
Kalimat ajakan untuk menyewa jasa. Pakai kalimat yang lebih lucu dan gokil biar orang-orang tertarik.
SEWA JASA SAYA
Icon untuk menyewa jasa
<svg viewbox="0 0 24 24"><path d="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z"/></svg>
Media sosial. Ganti sesuai ID masing-masing ya.
1. Facebook: https://www.facebook.com/ignieldotcom
2. Twitter: https://www.twitter.com/igniel
3. Google Plus: https://plus.google.com/101013193020600368206
4. Youtube: https://www.youtube.com/c/Igniel
5. Instagram: https://www.instagram.com/ign.iel
6. RSS Feed: https://feeds.feedburner.com/igniel
ID Blog.
6398971660957230974
Username PayPal.Me
https://www.paypal.me/USERNAME_PayPal.Me

Selesai, sekarang kamu sudah berhasil Membuat Widget Author Box yang Ringan dan Keren dari Igniel.com

Yap, itu dia Cara Membuat Widget Author Box Ringan dan Keren dari Igniel.com, sekali lagi saya ucapkan terima kasih sama mbak igniel yang mau berbagi Author Boxnya hehe, semoga bermanfaat!

Sumber : Igniel.com

Rian SEO

Blogger yang senang mempelajari hal-hal baru seputar Blog, SEO dan Bisnis Online.

Welcome to MySide

Cara Membuat Widget Author Box Ringan dan Keren dari Igniel.com