Kali ini Oto Website akan berbagi cara tentag bagaimana cara membuat atau memasang Google Plus Badge di blogger! Karna cara untuk membuat atau memasang Google Plus Badge di blogger sangatlah mudah jadi kita akan mengganti topiknya menjadi "Google Plus Badge Auto Hide".
Bagi Anda (Admin) blogger/website yang merasa kekurangan atau kehabisan tempat widget di blog/web-nya maka dengan memasang Google Plus Badge Auto Hide akan sedikit membantu Anda karna dengan memasang Google Plus Badge Auto Hide Anda tidak perlu memberikan tempa widget pada badge ini, di karenakan badge ini akan melayang di sisi kanan blog/situs Anda.
Cara kerjanya sendiri sama dengan Facebook Like Auto Hide. Yaitu badge ini akan muncul ketikan menyentuh cursor dan menutup ketikan cursor tidak menyentuhnya.
ScreenShot
Cara Membuat dan Memasang
Jika Anda ingin menggunakan Google Plus Badge Auto Hide maka sebelumnya Anda harus sudah memiliki Akun Google Plus. Jika belum silahkan baca caranya disini.
Untuk Cara Membuat dan Memasangnya di Blogger silahkan Anda ikuti langkah-langkah berikut ini:
1. Pergi ke Dasbor Blogger Anda.
2. Pilih Template >> Edit HTML.
3. Temukan tag <head>
4. Lalu letakkan scrip berikut di atasnya:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code-otowebsite.googlecode.com/svn/trunk/gplusone.js"></script>
5. Simpan Template Anda.
6. Pilih Tata Letak >> Tambah Gadget >> Pilih elemen HTML/JavaScript.
7. Sekarang letakkan JavaScript berikut ke dalam elemen tadi.
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".OW-gplus").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.OW-gplus{background: url("https://code-otowebsite.googlecode.com/svn/trunk/gplus.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 65px;width: 246px;z-index: 99999;position:fixed;right:-250px;top:44%;}
.OW-gplus div{border:none;position:relative;display:block;}
</style>
<div class="OW-gplus" style="">
<div>
<!-- Start Google Plus Badge Auto Hide by @otowebsite -->
<div class="g-plus" data-href="//plus.google.com/115780777398536909642" data-rel="publisher">
<!-- End Google Plus Badge Auto Hide by @otowebsite -->
</div>
</div>
</div>
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".OW-gplus").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.OW-gplus{background: url("https://code-otowebsite.googlecode.com/svn/trunk/gplus.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 65px;width: 246px;z-index: 99999;position:fixed;right:-250px;top:44%;}
.OW-gplus div{border:none;position:relative;display:block;}
</style>
<div class="OW-gplus" style="">
<div>
<!-- Start Google Plus Badge Auto Hide by @otowebsite -->
<div class="g-plus" data-href="//plus.google.com/115780777398536909642" data-rel="publisher">
<!-- End Google Plus Badge Auto Hide by @otowebsite -->
</div>
</div>
</div>
Keterangan : Ganti teks yang di blok merah dengan ID Google Plus Anda.
8. Simpan.
Sekarang Anda dapat melihat Google Plus Badge Auto Hide ini melayang di sisi kanan blog/web Anda.
Dari Meja Editor
Sekian untuk tutorial Google Plus Badge Auto Hide, Semoga tutorial yang Saya bagiakan kali ini dapat bermanfaat untuk Anda semua. Bila Anda menglami masalah atau pertanyaan tentang tutorial kali ini, silahkan Ajukan pertanyaaan Anda melalui komentar.
pakek metode ajax API saja, biar efisien ke depannya :)
BalasHapus@Beben KobenThanks gan atas masukannya!
BalasHapussepertinya saya sudah pasang ya :-)
BalasHapusmasih gak bisa juga :'(
BalasHapushttp://www.rawatweb.com
solusi merawat web anda yang tak terurus
http://www.asianbrilliant.com |
http://www.thekaospolos.com
terimkasih sob!!
BalasHapusNahh ini yang saya cari trims ya mas langsung saya coba.
BalasHapusNahh ini yang saya cari trims ya mas langsung saya coba.
BalasHapus