Cara Membuat Widget Author Box Seperti Kompi Ajaib
Widget About Me atau biasa disebut Author box merupakan sebuah widget agar orang atau para pengunjung mengetahui siapa kita dan agar terlihat professional.
Setelah mencoba mengupdate dan mengganti template, ada banyak para blogger request atau ingin memiliki fitur author box seperti kompiajaib. Lalu memang bagaimana sih caranya??
Caranya sih tidak teralu sudah dong sobat, untuk itu, mari simak saja apa saja yang harus dilakukan untuk membuat widget author box
Cara Membuat Widget Author Box Seperti Kompi Ajaib
1. Buka dan masuk ke Blogger
2. Pastikan anda sudah memasang font awesome di blog sobat ya
3. Lihat pada Tema > Edit HTML
4. Cari Kode </head>
5. Masukkan CSS dibawah ini, Tepat diatas code </head>
<!-- Widget Profil start-->
<style type='text/css'>
.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
.authorbox{width:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijm6VfSXWn3FGxriQpXvkBYg7MuBveGmysSUI1BtHFg1ft2Jt9t-P37euXkeZBwnPdhkfjXfR_nXJhVoNaV2w6UciCZApxksu_QLDaK6xV_WPziUFSOpUbFpZrIExDltcZgH6V4jBexvY/s1600/Chayaeducation.jpg=s300-fcrop64=1,00001ad4fffff235) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.authorbox img{margin:55px auto 0;border-radius:100%;display:block}
a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}
a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0!important;padding:0!important}
.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}
.sosmed-author li{display:inline-block;margin-right:10px}
.sosmed-author li:last-child{margin-right:0}
.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}
.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}
a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}
a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}
</style>
<!-- Widget Profil end -->
6. Klik Simpan Tema
7. Kemudian Cari kode </body>
8. Masukkan Javascript dibawah ini, Tepat diatas kode </body>
10. Kembali ke Dashboard BLogger
11. Pada Dashboard blogger pilih > Tata Letak > Tambahkan Widget > HTML/Javasccript
12. Lalu, Copy paste Kode dibawah ini
7. Kemudian Cari kode </body>
8. Masukkan Javascript dibawah ini, Tepat diatas kode </body>
9. Simpan Tema
<!-- Widget Profil start -->
<script>
//<![CDATA[
var imgDefer = document.getElementsByTagName("img");
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute("data-src")) {
imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));
}
}
//]]>
</script>
<!-- Widget Profil end -->
10. Kembali ke Dashboard BLogger
11. Pada Dashboard blogger pilih > Tata Letak > Tambahkan Widget > HTML/Javasccript
12. Lalu, Copy paste Kode dibawah ini
<div class="authorbox">
<h2 class="author-title">
Author
</h2>
<img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5vvQMpJCXdAJ4QZ9PD2mZYpBVBsT4F5henF8tF1Hx99WaW4eEmbRC7BT62xeGpGg67RGTPvg0s9Snmc2wc-AfMF3Ew6nfaEsW5v3Sy6rQ8yjeijL6sIHiY11lLM7x2jNYIce72w4lK0/s1600/27971980_1698096063606369_6822393781438611412_n.png" width="120" height="120" />
<a class="authorname" href="https://plus.google.com/u/0/102515282454008947505" rel="author" target="_blank" title="Chaya BS">Chaya Bulan Saputra</a>
<a class="authorname-url" href="https://plus.google.com/u/0/102515282454008947505" rel="author" target="_blank" title="Google+">Lebih dikenal dengan nama Chaya Education</a>
<div class="sosmed-author">
<ul>
<li><a href="https://www.facebook.com/chyblnsptra" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.google.com/102515282454008947505" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/chyblnsptra/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.linkedin.com/in/Username" target="_blank" title="LinkedIn" rel="nofollow"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<a class="button-author" href="//www.blogger.com/follow.g?view=FOLLOW&blogID=7892277150590076096" target="_blank" title="Follow This Blog">Follow This Blog</a>
<a class="button-author" href="URL FEEDBURNER BLOG ANDA" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
</div>
</div>
Keterangan :
| https://www.facebook.com/chyblnsptra | Ganti Dengan URL FB sobat |
| https://www.google.com/102515282454008947505 | Ganti dengan URL Google+ Sobat |
| 7892277150590076096 | Ganti dengan ID Blog sobat |
Dah ya sobat mungkin segitu saja, semoga bisa bermanfaat dan bisa diterapkan diblognya masing2 ya. Semoga bermanfaat+_+
Komentar
Posting Komentar