Cara Membuat Fanspage Google Plus melayang di Blog - Untuk Demo widget ini adalah seperti ketika sobat baru masuk ke artikel/postingan ini, jika belum jelas silahkan di Reload halaman ini untuk melihat demonya kembali. Nah berikut ini adalah Cara Membuat Fanspage Google Plus melayang di Blog.
How to Add this Widget to Blogger
Log in ke Blogger Dashboard
Silahkan pilih Layout >> kemudian pilih "Add a Gadget" dan pilih "HTML/JavaScript"
Letakan kode dibawah ini kedalam widget blog sobat.
<!-- Start Widget Google Plus melayang --!>
<style type='text/css'>
#seocips-gplus {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:10px;
width:250px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 17px #222;
-moz-box-shadow: 0px 0px 17px #222;
box-shadow: 0px 0px 17px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;}
#seocips-gplus 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;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#seocips-gplus').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='seocips-gplus'>
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'id'}
</script>
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="250" data-href="//plus.google.com/u/0/108029998746487180862" data-theme="dark" data-rel="author"></div>
<a class='close' href='#'>×</a>
Untuk kode berwarnah merah diatas silahkan sobat ganti dengan id Google plus sobat atau id halaman google plus sobat atau bisa juga dengan no id Profile Google plus sobat,
Untuk membuat laman Google plus LANJUT DI SINI
Sobat juga dapat mengganti kode berwarnah biru diatas langsung dengan widget Goole plus badge/Laman googel plus.
Simpan dan lihat hasilnya.
Semoga Berasil
