Memasang Follow Us J-query Pada Widget Blog

Hari ini kita baru memasuki hari pertama bulan Ramadhan 1432 H, semoga amal kita semua diterima oleh Allah SWT, Amin Allahuma Amin.....!!!!!!

Jadi hari ini pula akan belajar bagaimana menambahkan Follow Us J-query pada Widget Blog. Langkah-langkah untuk belajar bagaimana untuk menambahkannya ternyata langkah-langkah sangat mudah. kata-kata webmaster. tampilannya lebih menarik ketimbang tutorial yang lalu

* Langkah pertama adalah memasukkan atau menambahkan kode CSS kedalam template anda dengan cara :

• Masuk ke akun Blogger Anda;


• Klik tombol Rancangan dan pilih Edit HTML;


• Cari kode ]]></b:skin>


• Jika ketemu copy paste kode berikut sebelum kode ]]></b:skin>

#social {
width: 98%;
height: 45px;
margin: 0;
padding: 10px 5px 5px 30px;
list-style: none;
border-right:solid 1px #853529;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-sMGZyhYTeQIwP_aP8YrgGywkraCsDHYXc6IaJVPII0l2osHovnmzzCFk0et5DY_2FztyznJMK4H_pxHNSVXcW2sJpfHSavyrHaLAsgHMFUb7J1GIyeV3EY5c9kzfAj98NUJBXMUqToY/) no-repeat left top;
}
#social p{
font-size:1.5em;
color:#FFFB98;
font-weight:bold;
float:left;
margin: 10px 10px 0 0;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
.abt{
font-size:0.8em;
color:#787878;
float:right;
margin: 0 -30px 0 0;
text-shadow: 1px 1px 0px #ffffff;
filter: dropshadow(color=#ffffff, offx=1, offy=1);
}
#social li {
width: 32px;
height: 32px;
float: left;
margin-right: 3px;
}
#social li a {
float: left;
display: block;
width: 100%;
height: 100%;
text-indent: -1000em;
background-repeat: no-repeat;
text-decoration: none;
}
#social #rss {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNS25nI-TWMdxFEil1H1kjMXNrt93aTWOKGqPCKyPdbyFwIp2wfoifv8BVU7_LVpnlr8uOy93ueztxSo-kRtTbjvf4pdFZ7JfKVqfN4aucFDc5ANFbhd8Sl2dcT9NVKJ2i_DAtX-06n4/s400/allblogtools_rss.png);
}

#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYhCqidoh-sqjMWaSHP-6upJbAqmEXGcsKMhxSYKQRs6wtot_hcbz31lejcB4iyeDZ2Xmy4dA2kyoRb6CbTwzdKZR8WYdMw7Zuk2xZcXxrqUzRpMQm1ZbxHvI5ODDRmkQDXZSt8BQDk8/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4k6Ij4COjpQDG6uLiiLOMsYVLjc1kBBR9TXMqQYNV48oTcHRhQggbAWU-8K94V-67MuoALlBNX1BbWp6dPlNFluMfPKO5NCOYSifkf9P3AKA22IYzS4BCr-eAq0O4eZiczcqSUumlzZY/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF86IPMDjVtQlhQFlRC865X6n7j5ZXOb6OFFMlFMiabh1OyfmKKhk3BAAdZAMLGxAwVGvO36lZ-b5jsJ4p_YGwJqUTa_u20FWkHE6oiC2vsvCKsEEiOcbHvZlLKmIA1GoiYlQDAIaT-Io/s400/allblogtools_email.png);
}
span.tooltip {
background: #575757;
padding: 3px;
display: block;
width: 140px;
border: 1px solid #000000;
position: absolute;
margin-top:-40px;
color: #F0F0F0;
font-size:10px;
text-indent: 0;
font: Arial, sans-serif;
text-align: center;
-webkit-box-shadow: inset 2px 2px 2px #616161;
-moz-box-shadow: inset 2px 2px 2px #616161;
box-shadow: inset 2px 2px 2px #616161;
-moz-border-radius: 5px;
border-radius: 5px;
}

* Langkah kedua adalah mencari kode </body> dan copy psate kode berikut sebelum kode </body>

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#social li').each(function() {
var $li = $(this);
var title = $li.find('a').attr('title');
$li.find('a').removeAttr('title');
$('<span class="tooltip"/>').text(title).appendTo($li.find('a')).hide();
$li.find('a').mouseover(function() {
var top = $(this).position().top;
var left = $(this).position().left;
$(this).find('span').fadeIn()({
top: top,
left: left
}, 'slow');
});
$li.find('a').mouseout(function() {
$(this).find('span').fadeOut('slow');
});
});
});
//]]>
</script>

 * Langkah ketiga

• Pilih Rancangan;


• Klik tab Tambahkan Elemen (Gadget);


• Pilih HTML/JavaScript;


• Copy paste kode dibawah kedalam HTML tersebut;


• Lalu Simpan,

 <ul id="social">
<p>Follow Us </p>
<li><a href="http://BLOG-NAME.blogspot.com/feeds/posts/default?alt=rss" id="rss" title="Follow Our Feeds">Rss</a></li>
<li><a href="MailLink#" id="mail" title="Subscribe To Our News Letter">Mail</a></li>
<li><a href="FaceBookLink#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>
<li><a href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
</ul>
<b class="abt"><a href="http://www.allblogtools.com/#">Widget</a> | By <a href="http://www.allblogtools.com">Kang Onk Design</a></b>

Semoga berhasil sobat sekalian....!!!