Membuat Author Box Untuk Sidebar Blog Ala G+ Badge

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/28/2016

<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/AVvXsEiVhsv4R-CtqHGoeGh9EtsHnE8syvhXqrgRCLYgy8AnB7P1sBNhglb1L3lbTcJ60-EWFEUJtEDeoeViR1vAozOw1Dep_PA-dFyPNrP45T2Le4t6de4vzk5NdMz3uPSysq3SY2_V4SgYV2s/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>

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

• Untuk mengganti photo yang saya tandai di atas dengan photo G+ profil Anda, silahkan Anda masuk ke halaman G+ Profil Anda lalu klik kanan pada photo G+ profil dan Copy image address lalu ganti URL photo yang saya tandai di atas dengan URL photo G+ profil yang barusan Anda copy.
• Silahkan sesuaikan untuk nama profil dan url profil G+ serta URL profil sosial media lainnya.

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