Cara Membuat Widget Vote +1 Google Plus Melayang

Cara Membuat Widget Vote +1 Google Plus Melayang - Oke karena ada yang request script widget Vote +1 recomendation google plus seperti yang ada di blog ini maka akan saya bagikan script nya :D

Bagaimana cara membuat widget +1 google plus melayang? Ikuti langkah-langkah berikut:

1. Masuk ke akun Blogger Sobat

2. Pilih tataletak, tambah gadget

3. Selanjutnya pilih HTML/JavaScript

4. Lalu copas kode script di bawah ini:

<div class='clear'></div>

<div class='widget HTML' id='HTML6'>

<div class='widget-content'>

<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" style="top: 200px;">

<!-- HTML Start -->

<div style="text-align: center;">

<p style=" margin:10px; font-size:15px; color:#000; font-weight:bold;">Bantu saya untuk vote +1 pada tombol Google Plus dibawah!.</p>

<div style="background: url(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash3/t1/12385_593585634050969_1323366192_n.jpg)no-repeat top left; width:283px; height:115px; padding-top:32px; text-align:left; padding-left:18px; margin-top:20px">

<div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 300px; height: 24px; background-position: initial initial; background-repeat: initial initial;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 24px;" tabindex="0" vspace="0" width="100%" id="I1_1391821566693" name="I1_1391821566693" src="https://apis.google.com/_/+1/fastbutton?usegapi=1&bsv=o&annotation=inline&width=300&hl=en&origin=http://komputer-techno.blogspot.com&url=http://komputer-techno.blogspot.com%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.id.mPsQK3fMOE0.O%2Fm%3D__features__%2Fam%3DIQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAItRSTNEkgLPflVtuAtvYGKMIDncoJHCjg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I1_1391821566693&parent=http://komputer-techno.blogspot.com&pfname=&rpctoken=15696089" data-gapiattached="true" title="+1"></iframe></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><a class="close" href="#">&#215;</a></div></div></div>

5. Kemudian ubah tulisan berwarna merah menjadi blog/website anda.
6. Terakhir Simpan dan Selamat anda mempunyai Widget Vote +1 Google Plus melayang :D

Sekian dulu posting gue mengenai Cara Membuat Widget Vote +1 Google Plus Melayang semoga bermanfaat bagi para blogger.

Tweet