Widget Box Author Transparan

Biasanya kotak autor ini di buat berbagai alasan, ingin lebih di kenal, ingin mempromosikan akun media sosialnya dan juga biar pembaca lebih tau siapa penulis di blog tersebut.
Kelebihan Box Author ini adalah

/* Author Box ala mahesa.id */
#mahesaAuthor{text-align:center;background-color:#fff;color:#2E2E2E;line-height:20px;padding:15px 10px} #mahesaAuthor svg {width:14px;height:14px;margin-left:-3px;vertical-align:-3px} #mahesaAuthor svg path {fill:#bdc3c7} #mahesaAuthor img{border-radius:100px;max-width:100px;margin-bottom:10px} #sidebar-wrapper #mahesaAuthor h2, #sidebar-wrapper #mahesaAuthor h3{background:transparent;padding:0px} #sidebar-wrapper #ignielAuthor h2{font-size:20px;display:inline-block} #sidebar-wrapper #mahesaAuthor h2:after{border:0px} #sidebar-wrapper #mahesaAuthor h3{font-size:15px;font-weight:normal} #sidebar-wrapper #mahesaAuthor h3:after{display:none} #mahesaAuthor hr{border:none;height:1px;background-color:#2E2E2E;width:70%;margin:10px auto} #mahesaAuthor2{width:100%;margin-bottom:20px} #mahesaAuthor2 svg {width:20px;height:20px;vertical-align:-4px} #mahesaAuthor2 svg path {fill:#fff} #mahesaAuthor2 li{list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block} #mahesaAuthor2 li:hover{background-color:#37b185}#mahesaAuthor2 li:nth-child(2){margin-left:-3.5px;border-left:3px solid #2f303f;float:right} #mahesaAuthor2 li a{color:#fff;padding:10px 30px;line-height:40px} .ignielAuthor{text-align: left;font-size: 12px;display:flex;justify-content:center} .mahesaAuthor .tablekiri {width:50px} .mahesaAuthor .tablekanan{width: 85px;padding-left: 20px}
#mahesaAuthor .medsos svg {width:20px;height:20px;margin-top:7px} #mahesaAuthor .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}
#mahesaAuthor .mahesaBounce svg{width:20px;height:20px;vertical-align:-4px;margin-left:10px} #mahesaAuthor .mahesaBounce svg path{fill:#fff;} .mahesaBounce{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} .mahesaBounce {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
@media screen and (max-width:320px){#mahesaAuthor 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)}
}

Simpan Template.

Kemudian Masuk ke layout
Pilih Add Gadget > pilih HTML Javasript
Kosongkan bagian Title dan masukkan kode berikut

<div id="mahesaAuthor"><img src="https://3.bp.blogspot.com/-In22457Fl4E/WZfSpMRObWI/AAAAAAAAClY/Dl4-gKBpBCMTVMwB47awcVHLt4kCV8dDgCLcBGAs/s1600/Copy%2Bof%2BCopy%2Bof%2BDSC_0262%2B-%2BCopy.jpg" alt="mahesa.id Author" title="mahesa.id Author"/><br/><h2>Mahesa</h2> <h3>Salatiga, Indonesia</h3><i>"Naughty and fond of writing"</i><hr/><b></b><table class="mahesaAuthor"><tr>
 <br/><div class="medsos">
<a class="facebook" title="Facebook" href="https://www.facebook.com/mahesa016" 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" /></path></svg> </a>
<a class="twitter" title="Twitter" href="https://www.twitter.com/mahesa016" 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" /> </path></svg></a>
<a class="googleplus" title="Google+" href="https://plus.google.com/107089679726274963665" 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" />
</path></svg> </a>
<a class="youtube" title="Youtube" href="https://www.youtube.com/channel/UCCyFNLa0Y3KddEcv8mQK4Ow" 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" /> </path></svg></a>
<a class="rssfeed" title="RSS Feed" href="https://feeds.feedburner.com/mahesa" 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" />
</path></svg></a>
</div></tr></table></div>