Membuat Widget Follow Us Dengan Jquery Di Blog

Farhan Share - Sobat farhan pada postingan kali ini farhan akan berbagi tentang Cara Membuat widget Follow Us di blog. Sebenarnya apa sih sobat farhan fungsi dan kegunaan dari widget Follow Us ini? Ya, sobat widget ini menurut saya pribadi mempunyai beberapa keunggulan dan kelebihan seperti desain widgetnya yang menarik dan kreatif, dan juga berfungsi bagi sobat yang mungkin ingin mempromosikan fan page Twitter atau Facebook blog sobat agar terlihat bagus tampilanya, dan agar banyak yang menjadi Fans dan Followersnya. Baik, sobat farhan di bawah ini sudah saya persiapkan script widget Follow Us dan cara memasangnya lengkap, di simak baik-baik ya.

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Pilih Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode di bawah ini ke dalam box "konten".

<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>
<style>
#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/AVvXsEh4ofNUlygUE8aQmiYLI-hsNG4HCrrf58Y6d3lPTBgjsoKNhjWGWCQyW5FUtwBXTRJUJIDZ_4-tH_S2_Mp8vCRCXcQ-fel26Sj87R5QE4TetI6yVib3cMeGiJF1IcW8xekbaUmzFzHrxSs/) 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/AVvXsEgg411Guh_0PousMlFhXxRRpoZpjF5UReKEtHaheV8VsbKOceXgjVbJUh5XZiF0YyP6L5DPGFxx7F1Ef1M6gnLd1nW7m7W1E6ejxegGoANEzZxVVGJC9nh0Ob56XSPBwynKGLMzjMFolKs/s400/allblogtools_rss.png);
}
#social #facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZnLb9N12rfey6hQ52JbRW5XjXRDEtORGRaFaQzVV4kd5OR0GUHIafEdjtXn-u-_GjXG2ZM-BIGspB-xcJTr4dejAxuINqd0TngRXysyrlM_BwZbf5pMqrsnDY4MbQptuWgJ0gQB63UUk/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXUoDHn9bKZYUO7wdqruIQL34YTm-eNW9zS6gnkvr2q3MSxo9OAuej34lRp3kPIWrrRYUck_CHOQB5GTBaAz1_9aL73m4jrpYxhFkkQcOac0pSHLv5sav-0U4NI6uWZYaKcd2kabfR0ZA/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjydNUXq6CKldl5a6-UmGOGInxlEqdB1J7NhUS-QiaQo8JYGpAgpWTkQXpXqnFoIQC59KgGZNAkgmE1J3853lTizeDrRN-U4JDgtY-auqgMdvrhNcfIrzXWM39Md26EAxU_PMLBdBHWeWE/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;
}
</style>
<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="http://feedburner.google.com/fb/a/mailverify?uri=farhanshare" id="mail" title="Subscribe To Our News Letter">Mail</a></li>
<li><a href="https://www.facebook.com/farhanshare" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>
<li><a href="http://twitter.com/farhanshare" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
</ul>

Catatan : Ganti kode yang berwarna Biru dengan ID Feedburner blog sobat.

Catatan : Ganti kode yang berwarna Merah dengan URL Facebook blog sobat.

Catatan : Ganti kode yang berwarna Ungu dengan URL Twitter blog sobat.

6. Klik "Save" dan Selesai

Demikian sobat farhan artikel tentang Membuat widget follow us dengan jquery di blog, semoga bermanfaat, bila ada pertanyaan comment di bawah.

Script Source : BlazerBlog