Blogspot yang membahas tentang Tutorial Blogger, Animasi Blogger, Google Adsense, Game Blogger, Seo Blogger, Template Blogger, TV Online, Dan Tools Blogger

Sunday, 9 March 2014

Cara Membuat Widget G+ Melayang Di Blog

Cara Membuat Widget G+ Melayang Di Blog | Blogger Update. Asslamulaiakum wr.wb. Malam ini saya akan berbagi sedikit tentang Tutorial Blog yang berjudul Cara Membuat Widget G+ Melayang Di Blog. Manfaat G+ dalam sebuah blog yaitu Membantu Index Artikel, Menambah Kredibilitas Anda, dan Meningkatkan Peringkat SERP Blog. yuk lihat screenshoot seperti apa Widget G+ Melayang Di Blog :
Langkah-Langkah Membuat Widget G+ Melayang Di Blog
1. Buka Blog >> pilih tata letak >> tambahkan gadget >> HTML/javascript.
2. Masukan script dibawah ini di HTML/javascript.
<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;">Help me vote +1 on google plus button</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://seo-powers.blogspot.com/2014/03/cara-membuat-widget-g-melayang-di-blog.html" target="_blank" title=”widget follow us”>+ Get Widget </a></div></small><a class='close' href='#'>&times;</a></div>

3. Simpan dan selesai,

Sekian dari saya Mochammad Fikri yang menuliskan artikel berjudul Cara Membuat Widget G+ Melayang Di Blog, semoga bisa diikuti oleh pembaca sekalian dan jika ada yang kurang jelas atau anda ingin bertanya seputar topik diatas anda bisa menuliskannya dikotak komentar dibawah. Simak juga artikel Tutorial Blog lainnya : Cara Membuat Blogazine Di Blogspot, Cara Membuat Spoiler Ala Kaskus Di Dalam Posting Blog, Cara Membuat Slideshow Di Dalam Posting Blog, Cara Membuat Form Di Posting Blog, dan Cara Mudah Membuat Tabel Dalam Posting Blog. Terima kasih sudah berkunjung.

Dilarang untuk meng-copas artikel ini kecuali menuliskan sumbernya
DMCA.com

Cara Membuat Widget G+ Melayang Di Blog Rating: 4.5 Diposkan Oleh: Mochammad Fikri

8 komentar:

  1. wah keren izin coba di blog saya yang big :P

    ReplyDelete
  2. Ini yang saya cari cari gan. Tapi kira kira cocok tidak ya bila di pasang di blog saya dan apakah ada pengaruhnya terhadap loading blog saya.

    ReplyDelete
    Replies
    1. Cocok gan, widget ini ringan karena tidak menggunakan javascript hanya css saja

      Delete

 
notifikasi
close