Membuat Author Box Untuk Sidebar Ala KompiAjaib

Author box adalah informasi tentang pemilik blog atau untuk me-link sosial media pemilik blog. Author box biasanya ditampilkan dibawah postingan pada blog, kali ini berbeda dengan yang itu, author box ini berada di sidebar blog. Tampilan ini di desain oleh mas Adhy Suryadi (kompiajaib.com) yang menyerupai Badge Google+ dan ditambahkan dengan tombol profil sosial media, tombol follow dan tombol berlangganan. Cara membuat author box untuk sidebar ala kompiajaib tidak terlalu sulit, berikut ini cara untuk memasangnya di sidebar blog.

Cara Membuat Author Box Untuk Sidebar Ala KompiAjaib:

Author box ini menggunakan Font Awesome untuk menampilkan tombol-tombol sosial media, jadi pastikan sobat sudah memasang FontAwesome diblog sobat.
Masuk ke blogger.com -> Template -> Edit HTML
Simpan kode CSS dibawah ini diatas kode </head>

<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/AVvXsEhsU9DmR0YO176EEvG2iDZC6fqIpESNckSmpL4meNqCgO6uDHdxYN9fbDJpSn9j3tdrbBEWkib6rSQ2-JtpzhFu4kLtr0J5QyXd04mWLk0BtrwB5UCrK9mnli5WqWSKd4tYKjKHsfg5Zj0/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>

Untuk mengganti background image yang saya tandai diatas dengan background G+ profil sobat. Caranya masuk ke halaman G+ profil sobat lalu klik kanan pada background G+ profil dan Copy image address lalu ganti URL gambar yang saya tandai di atas dengan URL gambar background G+ profil yang barusan sobat copy.

Kemudian simpan kode dibawah ini di gadget/widget sidebar HTML/JavaScript di Tata Letak.

<div class="authorbox">
  <h2 class="author-title">
Author
</h2>
  <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://lh3.googleusercontent.com/-Q55pKJrgnXs/AAAAAAAAAAI/AAAAAAAAh9M/ae9EthU2__8/s120-c/photo.jpg" width="120" height="120" />
  <a class="authorname" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="Nama Profil G+ Anda">Nama Profil G+ Anda</a>
  <a class="authorname-url" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="google.com/+ProfilUnikAnda">google.com/+ProfilUnikAnda</a>
  <div class="sosmed-author">
    <ul>
          <li><a href="https://www.facebook.com/Username" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="https://twitter.com/Username" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="https://www.google.com/+Username" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="//www.youtube.com/c/Username" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square 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>
      <li><a href="https://www.instagram.com/Username/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
    </ul>
    <div class="clear"></div>

<a class="button-author" href="URL HALAMAN STATIS UNTUK FOLLOWER BLOG" 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>

Langkah terakhir silahkan simpan kode javascript dibawah ini diatas kode </body>. Kode ini berfungsi untuk men-defer foto profil, jika diblog sobat sudah ada kode seperti ini, maka kode dibawah ini tidak perlu ditambahkan lagi.

<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>