DIFINMEDIA.COM
Back Home

Widget Author Box ala Igniel dengan Resume Skill Singkat

Sourch Image : www.difinmedia.com


Kali ini saya akan membagikan sebuah widget yang sebenarnya cukup pasaran, yaitu author box. Bedanya, author box ala Igniel ini dilengkapi dengan short resume, alias rangkuman keahlian atau skill yang dimiliki. Jadikan author box kamu nggak sekedar keren-kerenan doang, tapi sekaligus berfungsi sebagai media untuk mempromosikan diri. Terbukti dengan datangnya beberapa orang yang menyewa jasa saya melalui blog ini karena mereka melihat short resume di author box. Nggak banyak memang, tapi lumayan kan buat nambah beli kuota.

<

1. Tambahkan CSS

Ini adalah tampilan yang dipakai oleh blog Igniel. Kamu bisa sesuaikan dengan template blog masing-masing sesuai keinginan.

Simpan kode CSS ini "setelah" <style>.
/* 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; text-align:center} #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)}
}

2. Tambahkan Kode HTML

Pada menu Blogspot, pilih menu "Layout". Pastikan sudah berada di area SIDEBAR, karena kotak profil admin blog untuk Blogspot ini akan disimpan di sidebar. Klik "Add a Gadget" > pilih "HTML/JavaScript" Kosongkan bagian "Title". Dan isi bagian "Content" dengan kode berikut untuk memunculkan kotak author keren dan responsif ini.
<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>
<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>
<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>
<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>
<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>
<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>
</td><td class="tablekanan">Javascript</td><td>
<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>
<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>
<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>
<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>
<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>
</td></tr><tr><td>HTML5</td><td>
<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>
<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>
<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>
<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>
<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>
</td><td style="padding-left:20px">Photoshop</td><td>
<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>
<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>
<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>
<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>
<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>
</td></tr><tr><td>PHP</td><td>
<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>
<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>
<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>
<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>
<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>
</td><td style="padding-left:20px">CorelDraw</td><td>
<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>
<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>
<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>
<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>
<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>
</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">
<a class="facebook" title="Facebook" href="https://www.facebook.com/ignieldotcom" rel="nofollow" target="_blank"> <svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" /></svg> </a>
<a class="twitter" title="Twitter" href="https://www.twitter.com/igniel" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" /> </svg></a>
<a class="googleplus" title="Google+" href="https://plus.google.com/101013193020600368206" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</svg> </a>
<a class="youtube" title="Youtube" href="https://www.youtube.com/c/Igniel" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z" /> </svg></a>
<a class="instagram" title="Instagram" href="https://www.instagram.com/ign.iel" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" /></svg> </a>
<a class="rssfeed" title="RSS Feed" href="https://feeds.feedburner.com/igniel" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z" />
</svg></a>
</div>
</div><div id="ignielAuthor2">
<ol><li><a href="https://www.blogger.com/follow-blog.g?blogID=6398971660957230974" title="Follow Igniel" target="_blank"><svg viewbox="0 0 24 24"> <path d="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" />
</svg>&nbsp;&nbsp;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>&nbsp;&nbsp;Donasi</a></li></ol></div>

3. Penjelasan

Disini saya pakai icon SVG sebagai pengganti Font Awesome, makanya kodenya panjang.
Kenapa? Ya soalnya blog ini nggak pasang Font Awesome.
Kok nggak pasang? Biar nggak berat karena nge-load resource dari luar.
Kalau kamu lebih nyaman pake Font Awesome, silakan edit di bagian iconnya.

Ganti item dibawah ini menggunakan 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.
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> 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> 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.
Facebook: https://www.facebook.com/ignieldotcom Twitter: https://www.twitter.com/igniel Google Plus: https://plus.google.com/101013193020600368206 Youtube: https://www.youtube.com/c/Igniel Instagram: https://www.instagram.com/ign.iel RSS Feed: https://feeds.feedburner.com/igniel ID Blog.
6398971660957230974 Username PayPal.Me
https://www.paypal.me/USERNAME_PayPal.Me
Dan jika sukses, author box keren dan ringan dengan resume skill tadi akan tampil seperti ini.

Lihat Demo

Sekian. Itulah kotak author box keren dengan resume skill singkat dari Igniel. Silakan kamu kreasikan sendiri agar tampilannya sesuai dengan keinginan.
Blogger CSS 31 Oleh Igniel