Pada postingan kali ini Membuat Widget Box Author Box Sederhana di Sidebar blog
Kegunaan dari author box ini agar kita tahu siapa penulis artikel di situs web
Jadi langkah pertama adalah
1. Masuk ke blogger
2. Tata letak > tambakan Widget > pilh html javascript
3. Lalu masukan kode berikut ini
<style type="text/css">
/* author box by whiletips.blogspot.com */
.cm-author{font-family:'Open Sans',Arial,sans-serif;position:relative;display:inline-block;min-width:230px;max-width:336px;width:100%;text-align:left;font-size:16px;background:#f5f5f5;border-radius:5px;margin-top:15px}
.cm-author *,.cm-author:before,.cm-author:after{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
.cm-author img{max-width:35%;margin-top:-15px;margin-left:60%;margin-bottom:15px;backface-visibility:hidden;vertical-align:top;border-radius:5px}
.myprofile{position:absolute;top:0;right:40%;left:0;bottom:0;padding:15px}
.cm-author h3{margin:0;font-size:1.1em;font-weight:bold}
.cm-author h3 a{color:#656565;text-decoration:none}
.cm-author h3 a:visited{color:#656565;text-decoration:none}
.cm-author .icons{font-size:1.6rem}
.fa-facebook{color:#bababa}
.fa-facebook:hover{color:#3b5998}
.fa-twitter{color:#bababa}
.fa-twitter:hover{color:#55acee}
.fa-instagram{color:#bababa}
.fa-instagram:hover{color:#e95950}
.fa-youtube-play{color:#bababa}
.fa-youtube-play:hover{color:#ff0000}
.mysite{font-size:12px;font-style:italic}
</style>
<div class="cm-author">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTNgV5bV0qPezen56lLj3s4afmWqBip3ZuowM4FHDg0z8TPZ-hWHO7FoKLQWLcCRSmif3qcG2zwLQxaToII0jj_QR80sCGAcwgidYM-f5tZmus5IDdNCwn1z4tCCFLYv586pfNeSD3S-eC/" alt="Ficri Pebriyana" title="Ficri Pebriyana"/>
<div class="myprofile">
<h3><a href="https://plus.google.com/+whiletips" title="Ficri Pebriyana">Ficri Pebriyana</a></h3>
<div class="icons">
<a href="https://www.facebook.com/whiletips" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/whiletips" title="Twitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.instagram.com/whiletips" title="Instagram"><i class="fa fa-instagram"></i></a>
<a href="https://www.youtube.com/whiletips" title="Youtube"><i class="fa fa-youtube-play"></i></a>
</div>
<div class="mysite">www.caramanual.com</div>
</div>
Lalu klik simpan Widget
Catatan ganti url sosial media dengan url sobat
Langkah terakhir paste kode dibawah ini tepat di atas kode </body> biasanya berada di paling bawah Hmtl
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Lalu klik simpan tema