WIDGET JEJARING SOSIAL MELAYANG SUPER LENGKAP

Author. Dwi    On. 2:33 PM   

Blog Tips

Selamat siang sahabat blogger, di siang yang cukup panas ini. Saya akan share Artikel WIDGET JEJARING SOSIAL MELAYANG SUPER LENGKAP.

BACA ARTIKEL INI JUGA : Cara Membuat Widget Tabview Keren Tanpa Edit HTML NEW!!

Langsung aja tanpa banyak basa basi ..

1. Login Blog yang agan kelola

2. Masuk ke "Dashboard"

3. Pilih Menu "Tata Letak"

4. Setelah itu klik "Tambahkan Gadget"

5. Lalu Pilih "HTML/JavaScript"

6. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat. 

<style type='text/css'>
/* 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:#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: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:"50px"}, 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='margin:0px 0px -10px;'><div style='margin:0px 0px -5px;'><div style='background:#ddd;border:1px solid #ccc;border-bottom:1px solid transparent;padding:8px 6px 6px;height:27px'>
<div style='margin-right:5px;float:left;padding:0px 6px'><a href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG SOBAT" target="_blank" title="Ikuti Blog Ini"><img src="https://lh6.googleusercontent.com/-Jn4_yo4mGeU/USdy6OX859I/AAAAAAAAArc/C-BZWQC8SeM/w47-h20-no/index.png" alt="Ikuti Blog Ini" title="Ikuti Blog Ini" /></a></div><div style='padding:0px 13px 0px 0px;float:left;'><a class='twitter-follow-button' data-lang='id' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/ID TWITTER SOBAT'>Ikuti</a></div>
<div style='padding:0px 0px 4px 0px;margin-right:0px;float:left'>
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
</div></div></div>
<div style='padding:2px 5px 1px 0px;border:1px solid #ccc;border-bottom:none;background:#ffffff'><div class="fb-like-box" data-href="https://www.facebook.com/ID FACEBOOK SOBAT" data-width="292" data-show-faces="false" data-stream="false" data-show-border="false" data-header="true"></div></div>
<div class="g-plus" data-height="32" data-href="//plus.google.com/ID GOOGLE+ SOBAT" data-rel="publisher"></div></div>
<div id="fb-root"></div>
<a class='close' href='#'>&times;</a>
<!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><p>Get this <a href="http://diakuin.blogspot.com/2013/12/widget-jejaring-sosial-melayang-super-lengkap.html" target="_blank"><blink>widget</blink></a></p></div>

 

7. Simpan dan Lihat Hasilnya

Note :

1. Ganti Tulisan yg berwarna MERAH dengan ID Jejaring sosial agan :)
2. Mohon Follow Blog Ini dan Rekomendasikan Ke Google :p