Cara Membuat Widget Follow Us Dengan jQuery di Blog

Unknown

Trik Blog

3 Okt 2013

Belum ada komentar

Cara Membuat Widget Follow Us Dengan jQuery di Blog, bagi anda yang pingin memikat pengunjung blog anda untuk mengikuti anda di Facebook, Twitter, atau berlangganan, coba widget yang satu ini, widget ini saya berinama widget "Follow Us" cara membuat nya sangat mudah, dan widget ini menggunakan jQuery untuk menambah keren tampilannya.

Cara Membuat.

1. Log in ke Blog kamu.

2. Pilih Rancangan > Add Gadget > HTML/Java Script. Copy kode di bawah ini.

<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/AVvXsEjxl236VEmRUthpMnXA8GMbVjXBHImSEGpBDABg1OzoolpF8GmLKbAVtlXmnaChBDuYiCsWMvbz80IggGGCT60giu5MU2ggE4bz3m6jT7lyif7Jlf7r9oaoSp6q9DREpP9A1DGHN6OeMOU/) 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/AVvXsEjk984fdRA2rwNSrDUGrTS3w_vTI99aqprSEHUTZszyfXgPPu5zDWgz9vMvR1Dyl1sotAPN94DN2dNTTrHJru_YmKjirWp_0oTAmajDtJaNnID4Gu9ezuHFmLzAyVckAjb89OWTqZf1dYM/s400/allblogtools_rss.png);

}

#social #facebook {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNFqg6PlBnrYHavLEfeJpzBehelHjbPPL9wXl5QpwuubzS7sICWoPmLNS6HPAwXr39AzCBywSUxVdKM2JANRAhyphenhyphenA9h24APCHsBCNNIiu5LAYtFbQ2I3Je08kY6tsLIPv3im1bvgWFB_Ao/s400/allblogtools_facebook.png);

}

#social #twitter {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFfhymDfhtOux1zBT7oZQbGSVGJ7gqvUzWXTe2fENzFe-XvKFJj4vu06YCHdg5fM8x9th0KEJw2k2ZXYrRLHqNWJom9aDMIXdppKumm1JeaDGf-Z5x8S-xZorOSAwqD90OIW1Q9toQ8MM/s400/allblogtools_twitter.png);

}

#social #mail {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_joW2UvUCGNk27k6IPr7DPd_W6WNbKvBCKs9KUJHxAvYg_7XSPxYuO4hU-tmQsGMngcakKEFKy4CDKaj9Iq6qhwft0L7RtyM3UWAtCjNjTdG4MPyspdvG3hTvjvQ6kqdVaoy8S6APKA/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=blazer_blog" id="mail" title="Subscribe To Our News Letter">Mail</a></li>

<li><a href="https://www.facebook.com/BLAZERBLOG" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>

<li><a href="http://twitter.com/blazer_blog" id="twitter" title="Follow Us On Twitter">Twitter</a></li>

</ul>

Ganti kode yang berwarna biru dengan id Feedburner anda.

Ganti kode yang berwarna merah dengan id Facebook anda.

Ganti kode kode yang berwarna ungu dengan id Twitter anda.