Cara Membuat Widget Google Plus G+1 Melayang di Blog

Untuk membuat Google Plus G+1 Melayang pada Blog seperti yang ada pada Blog ini sebenarnya cukup simpel, kita bisa menggunakan script message box seperti pada Like Box Facebook dan mengganti script like box facebook dengan script / vote plus one +1.

Widget Google Plus G+1 Melayang pada Blog

Berikut ini tutorial Cara Membuat Widget Google Plus G+1 Melayang pada Blog :
Oke langsung ke cara pembuatanya:

• Login Akun Blogger seperti Biasa
• Pada Dashboard sebelah kiri Klick Menu "Layout / Tata Letak"
• Tambahkan Gadget dan Pilih "HTML/JavaScript"
• Kemudian Copy dan Paste kode dibawah ini lalu "Simpan".

1. <style type="text/css" scoped>
   /* Message Box */
   #box-message {
   position:fixed !important;
   position:absolute;
   top:-1000px;
   left:50%;
   margin:0px 0px 0px -182px;
   width:300px;
   height:auto;
   padding:16px;
   background:#fff;
   font:normal Dosis, Georgia, Serif;
   color:blue;
   border:2px solid blue;
   -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
   }
   #box-message a.close {
   position:absolute;
   top:-10px;
   right:-10px;
   background:#fff;
   font:bold 16px Arial, Sans-Serif;
   text-decoration:none;
   line-height:22px;
   width:22px;
   text-align:center;
   color:#111;
   border:2px solid #333;
   -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   box-shadow:0px 1px 2px rgba(0,0,0,0.4);
   -webkit-border-radius:22px;
   -moz-border-radius:22px;
   border-radius:22px;
   cursor:pointer;
   }
   #twitterx {
   background: #EEF9FD;
   padding: 10px;
   text-align:center;
   border: 1px solid #C7DBE2;
   border-top: 0;
   }
   </style>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
   <script type='text/javascript'>
   $(window).bind("load", function() {
   // Animate Top Value When Page Loaded Completed
   $('#box-message').animate({top:"200px"}, 1000);
   // Remove Mailbox When Close Button On Click
   $('a.close').click(function() {
   $(this).parent().fadeOut();
   return false;
   });
   });
   </script>
   <div id='box-message'>
   <!-- HTML Start -->
   <div style="text-align: center;">
   <p style=" margin:10px; font-size:15px; color:#000; font-weight:bold;">Terima kasih telah berkunjung.
   </p></div>
   <div style="text-align: center;">
   Mohon sempatkan klik vote G+1 pada tombol Google plus di bawah ini...!!!</p>
   <div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuemIHfFlFtmhifSZv2MQ4quXGQag2sug1ETPCc7S89mefq1IUJe_mCzWlogcou8Y-OTe8jPK4SmdxjeGHR7nnnG24w-kbqOn4JJqs_-xcXfY4tbk7ulmnBN7iHUbA-Mvrb5Nl5k8ns2TG/s300/Widget+Melayang+Google+Plus.png)no-repeat top left; width:283px; height:125px; padding-top:27px; text-align:left; padding-left:60px; margin-top:20px'>
   <div class='g-plusone' data-annotation='inline' data-width='300'></div>
   <script type='text/javascript'>
     (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
   </script>
   </div>
   <!-- HTML End -->
   </div>
   <small><div style=”font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;”><a href="http://www.online-plus.net/2015/10/cara-membuat-widget-google-plus-melayang-di-blog.html" target="_blank" title=”widget follow us”>+ Get Widget </a></div></small><a class='close' href='#'>&times;</a></div>

• Selamat! Widget Google Plus +1 Melayang pada Blog anda sudah jadi!

Penjelasan : 
Warna biru : Bisa kalian ganti sesuai kata-kata anda sendiri
Warna merah : Link dari gambar background
Warna hijau : Pengaturan letak tombol google plus

Demikianlah tutorial singkat mengenai Cara Membuat Widget Google Plus G+1 Melayang pada Blog. Jika ada pertanyaan silahkan tinggalkan komentar anda dibawah artikal ini.