Membuat Author Box Untuk Sidebar Blog Ala G+ Badge

Biasanya author box ditampilkan di bawah postingan, nah kali-kali kita menyimpan author box ini di sidebar blog alasannya ialah author box di bawah postingan sudah terlalu mainstream hehehe.... Author box ini aku buat mirip-mirip dengan Google+ Badge yang kemudian aku tambahin dengan tombol profil sosial media, tombol untuk follow Blogger dan tombol berlangganan atau Anda pun dapat menambahkan tombol lainnya.

Jika Anda tertarik untuk mencoba author box ala G+ Badge ini di sidebar blog, silahkan ikuti langkah-langkahnya di bawah ini.

DEMO

1. Langkah Pertama
Karena auhtor box ini memakai Font Awesome untuk menampilkan tombol-tombol sosial media, jadi pastikan Anda sudah menambahkan Font Awesome di blog Anda, aku anjurkan untuk memakai Font Awesome terbaru.

2. Langkah Kedua
Silahkan simpan arahan CSS ini di atas arahan </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/AVvXsEjZk3rW1P_GjIFLZs5yY973BhKMNTfSgxH1Eeb7FyTR8qFMM3NKzImxmmbiaw5fWtPO4tH1DTjISUYfVOER-udB5-RN2YCDyck4CKLJcro6WElzfdm86oVLl36PVuAsykvgG7WnYW3X9_o/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 aku tandai di atas dengan background G+ profil Anda, silahkan Anda masuk ke halaman G+ Profil Anda kemudian klik kanan pada background G+ profil dan Copy image address kemudian ganti URL gambar yang aku tandai di atas dengan URL gambar background G+ profil yang barusan Anda copy.

3. Langkah Ketiga
Silahkan simpan arahan HTML di bawah ini di gadget sidebar  HTML/JavaScript di Tata Letak.

 <div class="authorbox">
   <h2 class="author-title">
 Author
 </h2>
   <img alt="Membuat Author Box Untuk Sidebar Blog Ala G Membuat Author Box Untuk Sidebar Blog Ala G+ Badge" 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="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge">Nama Profil G+ Anda</a>
   <a class="authorname-url" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge">google.com/+ProfilUnikAnda</a>
   <div class="sosmed-author">
     <ul>
           <li><a href="https://www.facebook.com/Username" target="_blank" title="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge" 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="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge" 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="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge" 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="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge" 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="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge" 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="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge" 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="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge">Follow This Blog</a>
 
 <a class="button-author" href="URL FEEDBURNER BLOG ANDA" rel="nofollow" target="_blank" title="Membuat Author Box Untuk Sidebar Blog Ala G+ Badge">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
 
   </div>
 </div>

Kustomisasi:

• Untuk mengganti photo yang aku tandai di atas dengan photo G+ profil Anda, silahkan Anda masuk ke halaman G+ Profil Anda kemudian klik kanan pada photo G+ profil dan Copy image address lalu ganti URL photo yang aku 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.

4. Langkah Keempat

Silahkan simpan javascript di bawah ini di atas arahan </body>. Kode ini untuk men-defer photo profil, jikalau di blog Anda sudah ada arahan ini maka arahan berikut 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>

Selesai... selamat mencoba.

Sumber https://www.kompiajaib.com/

Share this post