Cara Membuat Widget +1 Google plus Melayang Pada Blog

Banyak sekali orang yang menanyakan bagaimana cara membuat widget +1 google plus melayang pada saya. Sebenarnya membuatnya cukup simpel, kita bisa menggunakan script message box seperti pada Like Box Facebook dan mengganti script like box facebook dengan script rekomendasi / vote plus one +1.

Jika masih belum paham, akan saya jelaskan caranya beserta tutorialnya. Berikut tutorial Cara Membuat Widget +1 Google Plus Melayang pada Blog :

• Seperti biasa, kalian harus  masuk terlebih dahulu ke akun blogger kalian
• Buka tab tataletak > Tambah gadget
• Pilih HTML/JavaScript
• Kemudian kalian bisa memasukkan kode script di bawah ini:

<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;">Bantu saya vote +1 pada tombol google plus di bawah!!</p>

<div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9vBHn3dvfmfpK_1ZdFVfqmDI5RMBG0ko7Bob9A5DJKiF1gIxm-cBepSNSiee_UhuGWnYO6sIPR4nHOjE-Rg5H6LubWyWLXgJDP7nXbOdY_yDOrc747d_Dk1tOupVmLJeRQpbaB0QUAE48/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://destato.blogspot.com/2014/03/cara-membuat-widget-google-plus.html" target="_blank" title=”widget follow us”>+ Get Widget </a></div></small><a class='close' href='#'>&times;</a></div>

•  Kemudian save. Selamat! Widget +1 Google Plus Melayang pada Blog kalian sudah jadi!

Keterangan : 

Warna biru : Bisa kalian ganti sesuai kata-kata anda sendiri

Warna merah : Link dari gambar background

Warna hijau : Pengaturan letak tombol google plus

Begitulah tutorial singkat mengenai Cara Membuat Widget +1 Google Plus Melayang pada Blog. Jangan lupa kasih vote +1 juga ya di bawah.

Tweet