-->

Membuat Widget Google + Melayang

Cara Membuat Widget +1 Google Plus Melayang pada Blog
Assalamu'alaikum para pengunjung Blog Hamzah Fansyuri 14...
Agan mau Akun google Plus terkenal, ya pasti mau lah, sekarang ada loh widget google plus melayang di tengah layar blog agan, Mau tau enggak caranya...

Membuat Widget Google + Melayang

Cara Caranya ikuti yang dibawah yaa...
  • Log in Dulu ke akun Bloggernya
  • Buka bagian Tata Letak
  • Lalu pastekan 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/AVvXsEgbNbLkUtxrstnKBsCOEQPnUcShKqsgFceURr_vrnTBD-OxP7lR8b0sQG2XpFXZa5t4ZdgAbvO2hlEU9y6h8ahTAlLnsRAiJgETQkkWUnI_nfQ3GLAsaZSvmPJAmLYGu5zqH6mBUpY26jXF/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>
  • Untuk Menambah Efek  Tambahkan jQuery, agan bisa liat disini untuk pasang jQuery

Oke itulah Share artikel agan kali ini, kalau ada pertanyaan langsung aja ke kotak komentar

Sumber: http://destato.blogspot.com/2014/03/cara-membuat-widget-google-plus.html?spref=fb

Note: Only a member of this blog may post a comment.