Jumat, 15 Juni 2012

Cara Membuat Widget Follow Us Dengan jQuery di Blog


By on 20.29

Blazer Blog, jQuery - 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(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) 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(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);
}
#social #facebook {
background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);
}
#social #twitter {
background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);
}
#social #mail {
background-image: url(http://1.bp.blogspot.com/--tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/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. (contoh : feeds.feedburner.com/blazer_blog)
Ganti kode yang berwarna merah dengan id Facebook anda. (Contoh : www.facebook.com/BLAZERBLOG)
Ganti kode kode yang berwarna ungu dengan id Twitter anda. (Contoh : https://twitter.com/#!/blazer_blog )

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

10 komentar:

  1. info yg ane cari,mksih gan..jngan lupa mampir http://intipsblog.blogspot.com

    BalasHapus
  2. Wah Keren2 Nih Gan artikel nya

    BalasHapus
  3. ga berhasil...
    diblog saya
    www.ilh4m-black4rt.blogspot.com

    BalasHapus
  4. wuih keren, sip saya suka dan patut untuk dicoba.

    BalasHapus
  5. Your blog posts and articles are very interesting, for me become more know, I hope you keep your blog so I can visit again to see your blog posts and articles more ... thanks for the info

    BalasHapus
  6. makasih Gan artikelnya and udah berhasil

    BalasHapus
  7. Keren gan infonya

    mampir juga ya
    http://cybermu-wizard.blogspot.com

    BalasHapus
  8. Terimakasih banyak infonya brother.
    salam kenal.

    BalasHapus
  9. kunjungi http://mbedun.blogspot.com/

    BalasHapus
  10. Cek Ongkir JNE http://cekjneongkir.blogspot.com

    BalasHapus