New Design

Recent Post

Minggu, 18 Oktober 2015
CARA MEMBUAT WIDGET GOOGLE PLUS PADA BLOG

CARA MEMBUAT WIDGET GOOGLE PLUS 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 padaLike 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 :

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/AVvXsEjacmVMNmHR139p4pEqQWEOa6hSm2xYfGDX_5VEnMm_0HES7DJRjNx05F7AF_vbJjLcjgjgFbgHtPLyCOj4AkU4GB0ChoR6Kg74dheM1ldDfsxXCs-c7uaiWVXyWb6Mpv_xBUlNZVKOmvB9/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://bernadbloggerteam.blogspot.co.id/2015/10/cara-membuat-widget-google-plus-pada.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.
Breaking News
Loading...
Quick Message
Press Esc to close
Copyright © 2013 Bernad Blogger Team All Right Reserved