Sobat Ngampus, pada kesempatan ini saya berbagi tentang bagaimana Cara Mudah Memasang Widget Google Plus Melayang di Blog, sebenarnya cara ini cukup banyak seperti widget like facebook tetapi ini hanya mengubah script Like Box Facebook dengan Script Rekomendasi Google Plus, Contohnya seperti yang ada diblog ini. berikut tutorialnya :
1. Masuk ke blogger.com
2. Pilih Tata Letak/ Layout
3. Kemudian tambahkan Gadget > HTML/Javascript
4. Kemudian copy semua script 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/AVvXsEhSFzAQTxhN-w-FaFUSiW1lsFyuPTxvni1npHE7s75E4Ko-m-szyGRfSZyvCmcP3PLxJcBYIhR-2FNcQ4MLzxIbczIaCzp6mayR-hN6tq6ijXrPGkXSIQzuGMQ3YHKIh3j3nFm7wxXYNlaf/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://ngampusid.blogspot.com/2014/04/cara-mudah-memasang-widget-google-plus.html"
target="_blank" title=”widget follow us”>+ Get Widget
</a></div></small><a class='close'
href='#'>×</a></div>
5. Langkah terakhir pilih save.
6. Selamat. Widget Google Plus Melayang di Blog sobat sudah ada.
Ket :
- Warna Merah : Bisa kalian ganti sesuai kata-kata anda sendiri
- Warna Kuning : Link dari gambar background
- Warna Hijau : Pengaturan letak tombol google plus
Demikian Cara Mudah Memasang Widget Google Plus Melayang di Blog semoga bermanfaat.
By:
Guru TIK
On 6:48 PM
