Cara Membuat Widget Author Box Mirip Google Badge

Beberapa hari lalu saya sudah menulis artikel tentang cara memasang google badge di blog, google badge atau lencana google ini di pasang di blog agar pengunjung lebih mudah mengenal Anda.

Baca juga: Cara Memasang Badge Profil Google Plus di Blogger

Pada kesempatan kali ini saya akan membuat widget author box mirip seperti google badge yang pernah saya jelaskan sebelumnya.

Author box atau kotak penulis biasanya digunakan untuk memperkenalkan secara singkat mengenai profil penulis artikel tersebut.

Biasanya widget author box ini terletak di bagian bawah artikel, namun widget author box yang akan saya buat ini untuk di bagian sidebar blog dengan ukuran lebar 300 pixel, jadi kalau blog Anda memiliki sidebar kurang dari 300px mungkin tampilannya akan sedikit berbeda.

Widget author ini di lengkapi dengan berbagai tombol sosial media seperti facebook, twitter, instagram, google+, linkedin, dan youtube.

Selain itu dilengkapi juga dengan tombol follow blog dan tombol berlangganan rss feed blog.

Kalian juga masih bisa mengkreasikannya atau mendesain ulang tampilan author box ini sesuai dengan keinginan sendiri dan bisa disesuaikan dengan warna blog.

Gambar backgroundnya juga bisa Anda ganti dengan gambar milik sendiri atau yang sudah saya siapkan, ukuran lebarnya 300px dan tingginya 170px.

Berhubungan widget author box ini menggunakan desain font awesome khususnya dibagian tombol profil sosial media, jadi pastikan template blog Anda sudah terpasang kode font-awesome jika belum akan saya tulis juga cara menambahkan font awesome ke dalam template blog.

Nah, jika kalian tertarik membuat widget author box ala google+ ini di sidebar blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Author Box Untuk Sidebar Blog Ala Google+ Badge

DEMO

1. Pastikan blog Anda sudah terpasang Font Awesome, jika belum tambahkan kode ini sebelum kode </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

2. Masuk ke bagian Tata Letak > Tambahkan Gadget > HTML/JavaScript
3. Judul biarkan kosong dan pada bagian konten isi dengan kode di bawah ini:

<!-- HTML -->
<div class="authorbox">
   <div class="author-title">
      Author
   </div>
   <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FrdLXsq-h5j6R-EB9Bk_Uz-2fqlvwneDRXHploLVgYqr4pb8AKYeHnnoErRMUz81xAjl6I9KYyfmpYnOcJK5V9zJNTxmZHCMPVN6r_MOOyoURo7rrxchppy6rITp_FXiN-XeNqGDhSx1/s1920-rw-no/" width="120" height="120" />
   <a class="authorname" href="https://plus.google.com/+FicriPebriyana" rel="author" target="_blank" title="Ficri Pebriyana">Ficri Pebriyana</a>
   <a class="authorname-url" href="https://www.caramanual.com" rel="author" target="_blank" title="Cara Manual">www.caramanual.com</a>
   <div class="sosmed-author">
      <ul>
         <li><a href="https://www.facebook.com/FicriPebriyana" 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/FicriPebriyana" 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.instagram.com/FicriPebriyana/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
         <li><a href="https://plus.google.com/+FicriPebriyana" 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.linkedin.com/in/FicriPebriyana" 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.youtube.com/c/FicriPebriyana" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
      </ul>
      <div class="clear"></div>
      <a class="button-author" href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=5162261549313839120" target="_blank" title="Follow This Blog"><i aria-hidden="true" class="fa fa-user-circle"></i> Follow This Blog</i></a>
      <a class="button-author" href="https://feedburner.google.com/fb/a/mailverify?uri=CaraManual" rel="nofollow" target="_blank" title="Subscribe This Blog"><i aria-hidden="true" class="fa fa-rss"></i> Subscribe This Blog</a>
   </div>
</div>


<!-- CSS -->
<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/AVvXsEgOcUF_iFIwk5inkmommEC9h8YI5RVg1uG3Bi4biE7NG27XLduftHwnMI5jaqLx7CQq9y3e2C-HIcKzMt0ztR5vUxfeVG6f-8UWkLj2UpQ6Jc_WXmdQ4B2nC31BTphMKBHR1sEIquY39A3e/s1600/nature+sunset.jpg) 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;}
.author-title{font-weight:bold;text-decoration:none;text-align:center;text-transform:uppercase;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>


<!-- JAVASCRIPT -->
<script type="text/javascript">
//<![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>

4. Lalu klik Simpan

Catatan:
Bagian HTML
1. Silahkan ganti kode yang sudah saya tandai dengan huruf tebal atau bold menjadi URL dan nama Anda.
2. Untuk URL foto profil silahkan copy dari foto profil google+ atau bisa menggunakan foto lain asalkan berbentu persegi agar gambar tidak penyok atau gepeng.
3. Untuk tombol follow blog pada bagian kode ini 5162261549313839120 silahkan ganti dengan ID blog Anda yang bisa di lihat pada bagian URL ketika Anda membuka dashboard Blogger.com

Bagian CSS
Disini ada satu kode yang saya beri tanda bold, itu adalah link background. Anda bisa mengganti background pada widget author box ini dengan mengganti URL gambar tersebut.

Berikut ini beberapa gambar background yang bisa Anda pilih, atau jika ingin membuatnya sendiri gunakan ukuran 300px untuk lebarnya dan 150px untuk tingginya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ESGfM44GR82N99pwvvsTStn2FzyuOzLKguo77J3HxTPYqRpaE64IQaPg5kcszoX6reXph4yP3RBocUqomYRa2Vu2Isgy_q-ujwa_B0mcUZc_HmCIr9kKbykUx11sHQAngOXn69HSgcW3/s1600/abstact+map.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96eZi5G2UCZnk4JNUhrQI1Vz694tJWyq-VNsLXsPjvphG_dE8ikCPp7s6hZM6QR0sAiUjhHdkQEvmEr-gq5MxxOQLB3oj7z0Vuzh7UM6EFY7-9hhrp5DKotWdeGt1jgoC6KAy7reAbSDW/s1600/abstract+polygon.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGtbhHIpBMr5mkhTsv5op4c_573SqFKDcXGZaMYSF_llPe6ikd9ZNJcE-sgaeQ00pk3P_bKmzrIovTrSLr6Htwb3Zy803nGoXgrLlnSvl8jSdUXSRWsYrb6Xz4WfIFR70FOFueaMweXaJI/s1600/bear.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ8uc-xJrLvOLhF3ESb72NsCOYI-8qaw-i9vKAxlIGulUAtKlBbx5Rou-Leb7rPJkRp6p7_r6R6_ykG38pJiFQyAKIf9zTBQnUqA8N_Hyl6g7JhEofUzfwPnn-AUTtEsJOWAVu7QKIavHl/s1600/cat.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2jbAbzHkRPxeqPOaj0YOdUvUSednJngoeI-UyFgLIJNWWyTZCX9Rsoqgy16M_HPsDZXx3l0dd3SR-45yHDk5Leoa14OhyD179UlQDsrSR0LDCg5VvRcAbU3D_JLqmn-2Tyjs8HwzX80fk/s1600/nature+light.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcUF_iFIwk5inkmommEC9h8YI5RVg1uG3Bi4biE7NG27XLduftHwnMI5jaqLx7CQq9y3e2C-HIcKzMt0ztR5vUxfeVG6f-8UWkLj2UpQ6Jc_WXmdQ4B2nC31BTphMKBHR1sEIquY39A3e/s1600/nature+sunset.jpg

Itulah artikel mengenai cara membuat widget author box mirip google badge, jika Anda tertarik silahkan coba pasang pada bagian sidebar blog Anda. Semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini