Tuesday, April 1, 2014

Cara Mudah Memasang Widget Google Plus Melayang di Blog

6:48 PM

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 :

Cara Mudah Memasang Widget Google Plus Melayang di Blog

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(http://1.bp.blogspot.com/-KIguELXnIM8/UxP4VpdNkbI/AAAAAAAADl8/ja2IqRNIEs8/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='#'>&times;</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.

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

14 komentar:

  1. intinya sama dengan like fp facebook ya sob...kalau yang facebook saya dulu pernah pakai.
    terima kasih sob telah share, dengan ini pastinya mudah2an makin banyak +1 yang bisa kita dapatkan disetiap artikel

    ReplyDelete
    Replies
    1. dulu saya pernah pakai model ini tapi saya lepas lagi karena tidak cocok untuk template responsive...

      Delete
    2. kenapa tidak cocok mbak,,,
      tapi saya rasa cocok2 aja nih mbak,,,

      Delete
  2. Ternyata bisa dicustom jadi begitu ya :)

    ReplyDelete
  3. wahhhh kerennn nihh tutorianyaaa :D tapi kira" bakalan memperlambat loading Di Blogg kagak gann ??? hehe

    ReplyDelete
  4. Tested No error gan :)
    makasih ya :)
    ane simpen dulu scriptnya buat koleksi :)
    Andrekocak Blog

    ReplyDelete
  5. bisa untuk mempercantik blog juga nih, sukses selalu sob

    ReplyDelete
  6. Sip pak, tp saya mau tanya sory oot sitik. Kenapa saya gak bs lg ganti nama ya?

    ReplyDelete
  7. Selamat pagi maz . . . .
    hemzz , , widgetnya keren maz . . .
    namun menurut saya kalau di tempatkan pop up , lumayan ganggu pengunjung maz , ,
    itu sih menurutku pribadi maz

    ReplyDelete
  8. izin sedot scripnya sob, maklum masih newbie,,hehe
    salam kenal dan happy blogging

    ReplyDelete
  9. panjang amat scriptnya ya. hhehe
    langsung ke tkp

    ReplyDelete

BACA SEBELUM KOMENTAR :
- Berkomentarlah seadanya dan saya akan terima komentar apapun, yang penting tidak berkata kotor dan sejenisnya
- Direkomendasikan Berkomentar memakai Open ID supaya Mudah Blogwalking.
- Sobat juga bisa menjawab pertanyaan dari orang lain yang belum admin jawab.
- Jika Ada Pertanyaan Yang Belum Admin Jawab,Admin Mohon Maaf Karena Keterbatasan Pengetahuan.
- Jangan sekali-kali menggunakan link aktif/hidup karena otomatis dianggap spam/terhapus

 

© 2013 Ngampus_ID. All rights resevered. Designed by Templateism

Back To Top