Widget Author Box ala Igniel dengan Resume Skill Singkat

Kotak author box keren ala Igniel dengan resume skill singkat dan link media sosial. Tampilan responsif dan ringan untuk blog.
Widget Author Box Keren ala Igniel

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.

Author Box Igniel dengan Resume Skill Singkat<

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

  1. Pada menu Blogspot, pilih menu "Layout".
  2. Pastikan sudah berada di area SIDEBAR, karena kotak profil admin blog untuk Blogspot ini akan disimpan di sidebar.
  3. Klik "Add a Gadget" > pilih "HTML/JavaScript"
  4. 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.
  1. URL Foto.
    https://4.bp.blogspot.com/-7xS5as3Pad4/WKg5V1rMamI/AAAAAAAAEjY/Sl8SihvYjqghIIN7VEm-PkWWwjCTsCt9wCPcB/w100-h100-p-k-no-nu/ignielcom-Author.jpg
  2. Nama, kota, dan slogan. Bisa juga diganti dengan kalimat lain.
    AUTHOR: Igniel. Sukabumi, Indonesia. "Stimulate your passion!"
  3. Skill yang kamu kuasai.
    CSS3. Javascript. HTML5. Photoshop. PHP. CorelDraw
  4. 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>
  5. Tempat untuk menghubungi jika ingin menyewa jasa kamu.
    http://www.igniel.com/p/contact.html
  6. Kalimat ajakan untuk menyewa jasa. Pakai kalimat yang lebih lucu dan gokil biar orang-orang tertarik.
    SEWA JASA SAYA
  7. 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>
  8. 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
  9. ID Blog.
    6398971660957230974
  10. 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.
31
Widget Author Box ala Igniel dengan Resume Skill Singkat
Widget Author Box ala Igniel dengan Resume Skill Singkat
Kotak author box keren ala Igniel dengan resume skill singkat dan link media sosial. Tampilan responsif dan ringan untuk blog.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn
Support Igniel
SaweriaDonasi via SaweriaTrakteerDonasi via Trakteer Ko-Fi Donate via Ko-Fi Tentang Donasi?

Artikel Terkait

31 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Sugiharto
    10 September, 2021
    Profil: https://www.blogger.com/profile/04423211586023174156
    Hapus Komentar
    Mantap mba , ijin pake Script y mba untuk website saya www.brebesnge.com
  • Assa
    29 November, 2020
    Profil: https://www.blogger.com/profile/01181696575872615271
    Hapus Komentar
    Hallo mbak niel,bisa gak author box nya ditaruh di halaman statis kaya "kontak saya" biar sekalian gitu hehe makasih mbak
  • Faizall TM
    08 Oktober, 2019
    Profil: https://www.blogger.com/profile/15010855191637072023
    Hapus Komentar
    Mba ko punya saya malah terpotong ke bawah ya, pas dibagian Follow dan donasi, kira-kira ukurannya bisa diubah gak mba?
    makasih sebelumnya
  • Bayu Segara
    20 Juli, 2019
    Profil: https://www.blogger.com/profile/14437874528753053106
    Hapus Komentar
    Masih belum ngerti yg ini:
    "https://4.bp.blogspot.com/-7xS5as3Pad4/WKg5V1rMamI/AAAAAAAAEjY/Sl8SihvYjqghIIN7VEm-PkWWwjCTsCt9wCPcB/w100-h100-p-k-no-nu/ignielcom-Author.jpg"

    Cara ganti dengan photo kita gmn?
    • Igniel
      21 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus Komentar
      Upload dulu fotonya. Ke blogger bisa, ke tempat free upload lain juga bisa. Copy URL gambarnya dan ganti URL di atas pake URL baru.
  • Dimitry-Ivancovic
    12 Maret, 2019
    Profil: https://www.blogger.com/profile/12646967627446108265
    Hapus Komentar
    Assalamualiakum mbak ... saya suka sekali fitur widgetnya ... untuk bisa belajar dasar widget nya harus dari mana dulu ya terima kasih mbak ....
  • Agrey Tosira
    02 Januari, 2019
    Profil: https://www.blogger.com/profile/14514416159394957177
    Hapus Komentar
    Wah keren banget mbak, terimakasih banyak.
  • Ombak Laut
    10 Agustus, 2018
    Profil: https://www.blogger.com/profile/08518094742137406208
    Hapus Komentar
    Lapor teh.. gk work diblog saya nih, cek: ombaklaut2018.blogspot.com. malah jadi kacau):
    pdhl kepengen bgt samaan kya teteh.. ):
    • Igniel
      10 Agustus, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus Komentar
      CSSnya belom ada saya liat.
      Dicek lagi ya
    • Ombak Laut
      11 Agustus, 2018
      Profil: https://www.blogger.com/profile/08518094742137406208
      Hapus Komentar
      Workk teeh.. rupanya saya salah naruh css nya, hehe..
      malah di 'style' yg mana sebelumnya diatas tag style tsb udh ada tag -Kurangg fokus euy, tetehnya cantik&baik bgt soalnya.haha :D
  • Chritis Ghaza
    19 Maret, 2018
    Profil: https://www.blogger.com/profile/03283513120361370548
    Hapus Komentar
    keren sekali mbak
  • Anonim
    Anonim18 September, 2017
    Hapus Komentar
    Mbak igniell mang top widgetnya keren banget dahh... Saya ijjin pake di blog sya ya mba
  • M Rizky Heryandi
    19 Juli, 2017
    Profil: https://www.blogger.com/profile/04197191024046817731
    Hapus Komentar
    wih ada artikelnya juga ya, ijin di terapin di blog saya ya mbak, tar lihat hasilnya juga ya hehe.. http://www.seciko.id makasih mba igniel..
  • bisnis
    18 Juli, 2017
    Profil: https://www.blogger.com/profile/05502887297140836764
    Hapus Komentar
    keren salut ssama mastah fb salam kenal teh mantap
  • Megaroid.com
    06 Juli, 2017
    Profil: https://www.blogger.com/profile/15011347593751344275
    Hapus Komentar
    Maksih teh ya saya akan kasih link sumbernya
  • Megaroid.com
    06 Juli, 2017
    Profil: https://www.blogger.com/profile/15011347593751344275
    Hapus Komentar
    Wih Keren teh salam kenal saya dari cianjur hehe
    Hebat banget saya masih pemula nih di bidang blog.
    Izin pake yah author box nya
    Sekalian saya mau posting author box nya untuk blog saya kalo boleh
    • Igniel
      06 Juli, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus Komentar
      Salam kenal kang. Iya silakan dipakai author boxnya.

      Iya posting aja. Tapi jangan lupa cantumkan sumbernya ya
  • Khoirul Rizky F
    19 Juni, 2017
    Profil: https://www.blogger.com/profile/01283443632737330492
    Hapus Komentar
    kode style ane cari kagak ada bos...
    kalo kode style type='text/css' ane search ada tiga...
    gimana nih yang bener bos ??
    • Igniel
      19 Juni, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus Komentar
      Yang sebelum /head aja bos.
  • Shofwan
    16 Juni, 2017
    Profil: https://www.blogger.com/profile/13142047709386109017
    Hapus Komentar
    Teh, kl gk ada kode style gimana? saya gk nemu pake ctrl+f juga ( maaf newbie):D
    • Igniel
      16 Juni, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus Komentar
      Coba carinya: style type='text/css'
  • Bang Roy Han
    20 Mei, 2017
    Profil: https://www.blogger.com/profile/04606916773256252744
    Hapus Komentar
    Semakin cinta aja sama teteh igniel yang selalu mau SHARE.
  • Eirudo
    16 Mei, 2017
    Profil: https://www.blogger.com/profile/14009731569369244433
    Hapus Komentar
    efek Hire Me kenyalnya eye-catching bat.
    Otomatis ketuju kesana.
  • Kak Boy
    12 Mei, 2017
    Profil: https://www.blogger.com/profile/05546093133065229111
    Hapus Komentar
    Ijin sedot mbak buat jadiin post di blog saya
  • Kak Boy
    10 Mei, 2017
    Profil: https://www.blogger.com/profile/05546093133065229111
    Hapus Komentar
    Kodenya ilang😅
    • Igniel
      10 Mei, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus Komentar
      Screenshot kodenya upload aja di http://www.postimage.org

      Linknya kasih kesini.
  • Kak Boy
    10 Mei, 2017
    Profil: https://www.blogger.com/profile/05546093133065229111
    Hapus Komentar
    Premium mbak

    Kirain saya aja yang request widget a mbak igniel
    Oh ya mbak pertannyaan saya kemarin belm dijawab nih
    "Apakah author boxnya mbak igniel bisa dipake dibawah artikel/posting?"
    • Igniel
      10 Mei, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus Komentar
      Sekalian dijadiin artikel biar banyak yang tau :D

      Iya bisa. HTMLnya disimpen aja dibawah artikel. Kalo tampilannya jadi agak beda, CSSnya juga diedit lagi.
  • Dedy Styawan
    10 Mei, 2017
    Profil: https://www.blogger.com/profile/14925786771846433208
    Hapus Komentar
    kotak author nya keren mba.. blognya keren jg ringan cepat bgt lodingnya, ini kunjungan pertama saya ke blog anda, kayaknya saya bakalan sering berkunjung nih
    • Igniel
      10 Mei, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Hapus Komentar
      Makasih kunjungannya mas. Semoga betah :)

      Saya ngorbanin beberapa script. Diantaranya:
      - Gak pake Font Awesome (diganti pake SVG)
      - Gak pake Histats (diganti pake Google Analytics)
      - Gak pake font Google (pake yang lokal aja kaya Arial & Tahoma)
      - Ngilangin widget & CSS bawaan Blogger.

      Akhirnya bisa ringan templatenya.