Membuat Widget Google Plus Melayang di Blog

Tampilan Widget Google Plus

.

Membuat Widget Google Plus Melayang di Blog - Selamat siang sobat Blog Billy-Art! pada siang kali ini Blog Billy-Art akan membagikan tutorial tentang Membuat Widget Google Plus Melayang di Blog. Nah fungsi dari widget ini sudah jelas kan sobat? yup benar! umtuk membagikan url blog kita ke Dinding orang yang mengekliknya. keren kan sobat tampilannya? Pasti udah pada penasaran kan mau tau cara buatnya? yuk langsung aja kita ke tutorialnya! cekidot! :D 

1. Masuk ke Blogger

2. Pilih Tata Letak > Tambahkan Gadget

3. Lalu Pilih HTML/JavaScript

4. Copy kode dibawah 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/AVvXsEiH5UgKj2XvkXgOLd-dSmmxhxBAJa8-AYMoQJrLPCaZpTubFk4hyphenhyphenD6vU498eirxXQp15meyQOMMpkcGtUmhsucHRWxSG-h5NLSNae_4VKozBufmMMqa5ZQAwgL6l5dmVKs-xbo-capFLG5A/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://billy-art.blogspot.com/2014/03/membuat-widget-google-plus-melayang-di.html" target="_blank" title=”widget follow us”>+ Get Widget </a></div></small><a class='close' href='#'>&times;</a></div>

KETERANGAN : 

• Sobat bisa mengganti Tulisan berwarna Biru Muda dengan Link gambar yang sobat inginkan
• Sobat bisa juga mengganti Tulisan berwarna Kuning dengan Tulisan yang sobat mau..
• Sobat juga bisa mengatur letak tombol Google Plus : Tulisan berwarna Merah

5. Lalu Letakkan kode yang sudah dicopy tadi ke dalam HTML/JavaScript

6. Lalu Klik Simpan dan Lihat hasilnya! 

Sekian dulu pelajaran tentang Membuat Widget Google Plus Melayang di Blog semoga bermanfaat untuk sobat bloggers! see u next post! keep stay in here wokeh! :D 

Script By : http://destato.blogspot.com/2014/03/cara-membuat-widget-google-plus.html

Tweet