How to make Facebook, Twitter, RSS, Feed with Tooltips JQuery in blogger

 

For DEMO Look at my other Blogs Here

This time I will share with you how to add Facebook, Twitter, RSS, and subscribe via email. as you see the picture above.or you can view it directly on this blog.as seen interesting isnt it?

all the scripts and css I took from my own template,

Alright here we go...

• Find this code ]]></b:skin>
• Replace that code with the code below

/*** Tooltips ***/
#iconwrap{margin:5px 0 0 0; width:125px; height:38px; float:right;}
.facebooktooltip{margin:0; padding:0; width:16px; position:relative}
.facebooktooltip em{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwnh3KWerXN3Zrcj1vTxLcupRKjhqSKaZE3poH1D_V1qaS9QCc4vG9gy81nVt6Fxm5CBDuGV3zjQLdRPyEkw29qyO9wF1X-TyBp2h5H4N45tjYW7CP3W5VhUbjpAfwQYNd30nx-D-K6Sc/) no-repeat; width:100px; height:30px; position:absolute; top:-60px; left:-27px; text-align:center; text-indent:-9999px; z-index:2; display:none}
#facebook-icon{width:25px; height:24px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PyXdm5IwWdC1-k1gXJBH12wA1vvjbbqlNoEL-8C8zJ_ZDiN2Vn1NSYhgwI_Ef40cU4BFUtOM_YttI1sMk90eNTQn0cVJ0Xu6EPAwcOdqT3BSDonxFs97g9wcl4C5x1XrA9D6ZwoD5AIY/) no-repeat 0 0; text-indent:-9999px; margin:0 5px 0 0; display:block; opacity:0.85; left:0px; position:absolute;}
#facebook-icon:hover{opacity:1.0}
.twittertooltip{margin:0; padding:0; width:100px; position:relative}
.twittertooltip em{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPyMDSx9nQpywliNUC3L-6Q-ecr31tVYBOeGaNfoREa2pkKQFk6Sl84lqBYdOMb16uTnmK-6lhp2QkGUENyTYjAhWpLtlE_RJVZROBVUc_U9X3Jm6-tTQAOwmmKyqsp41hR0-y-5xp_WvA/) no-repeat; width:100px; height:30px; position:absolute; top:-60px; left:8px; text-align:center; text-indent:-9999px; z-index:2; display:none;}
#twitter-icon{width:25px; height:24px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNfM5FjK7M77Rb1APFPSNae04Hr-6JMKbQuDuKVjRumIl17y6nOi01ashZPDDzVi7yz6nz3Ac-29rMRQMSQAPs5eebJ-oaHGK7w5yjjmffDE_Hmngf6hDoSmVdyYsXwk-QOsHnMN54gWnN/) no-repeat 0 0; text-indent:-9999px; margin:0; display:block; opacity:0.85; left:30px; position:absolute;}
#twitter-icon:hover{opacity:1.0}
.rsstooltip{margin:0; padding:0; width:300px; position:relative}
.rsstooltip em{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsRWoGjtsZuN2An79iBvzx6Fks9Hd9ZTAvVRbebzZV7vBYhpVJvY2sWAF78Y-WjH1oehYWolLB-IUiaXY5mluK9ltCVTPs9LrO4jPdwhHVjsJm_RcLr4YTGKU3axSW4wbob5RCFkxEj0/) no-repeat; width:100px; height:30px; position:absolute; top:-60px; left:38px; text-align:center; text-indent:-9999px; z-index:2; display:none}
#rss-icon{width: 25px;height: 24px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSOrqXZV5BG0NtLOZsi72gJ_Pf3xvlmL71N1jYQ3X5mdWaPDehKWZd02gpLw0YRHJ3ZClCcdpK-XUJtCAOXpKsRpFCYxeb583vZgs6D9xxowl0QZzC9QlmVfJS3YPCWUFMj-C_tPgpvkFR/) no-repeat 0 0;text-indent: -9999px;margin: 0 10px;display: block;opacity: 0.85;left:50px;position:absolute;}
#rss-icon:hover{opacity: 1.0}
.emailtooltip{margin:0;padding:0;width:300px;position:relative}
.emailtooltip em{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIdyU-IP7Jvch-97GzMLoqGqUPhlon8X56Bxoz2p0Zsoofd4rIXv_Onn3nqpB7iwuU4lURnQfdID56TDswIIp7gF8VVYhr57CVbQLHXgckAK2aZ0X7XlZgYBuREeH_0okHmJLFFBiwS-k/) no-repeat;width:100px;height:30px;position:absolute;top:-60px;left:68px;text-align:center;text-indent:-9999px;z-index:2;display:none;}
#email-icon{width: 25px;height: 24px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWgWzg8zbaCNXyVHwa25P3T7STFTdA_bckqpEI0pWgRa4H6iZI91EnOqxjTZrZPYgxlulMZjBoI9Igjf2enshNXnyXXuWfsDBEg4e-OET0xTDmDRwhnSVoDHQ_x4G1PVfBfbneED9H4Uw/) no-repeat 0 0;text-indent:-9999px;margin: 0 10px;display: block;opacity: 0.85;left:80px;position:absolute;}
#email-icon:hover{opacity: 1.0}
.status-msg-wrap{width:99%;margin-top:0}
.status-msg-border{border:1px solid #C9C7C7}

]]></b:skin> 

• go to your Dashboard
• then go to Design ► Edit HTML
• Then find </body>
• and Replace kode </body> with code below

<!-- jQuery -->
<script src='http://jancok.googlecode.com/files/jquery.minUser.js' type='text/javascript'/>

<!-- begin Tooltips -->
<script type='text/javascript'>
var $j = jQuery.noConflict();
$j(document).ready(function(){$j(&quot;.rsstooltip a&quot;).hover(function()
{$j(this).next(&quot;em&quot;).stop(true, true).animate({opacity: &quot;show&quot;, top: &quot;-35&quot;}, &quot;slow&quot;);}, function() {$j(this).next(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-30&quot;}, &quot;fast&quot;);});});$j(document).ready(function(){$j(&quot;.facebooktooltip a&quot;).hover(function() {$j(this).next(&quot;em&quot;).stop(true, true).animate({opacity: &quot;show&quot;, top: &quot;-35&quot;}, &quot;slow&quot;);}, function() {$j(this).next(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-30&quot;}, &quot;fast&quot;);});});$j(document).ready(function(){$j(&quot;.twittertooltip a&quot;).hover(function(){$j(this).next(&quot;em&quot;).stop(true, true).animate({opacity: &quot;show&quot;, top: &quot;-35&quot;}, &quot;slow&quot;);}, function() {$j(this).next(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-30&quot;}, &quot;fast&quot;);});});$j(document).ready(function(){$j(&quot;.emailtooltip a&quot;).hover(function() {$j(this).next(&quot;em&quot;).stop(true, true).animate({opacity: &quot;show&quot;, top: &quot;-35&quot;}, &quot;slow&quot;);}, function() {$j(this).next(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-30&quot;}, &quot;fast&quot;);});});
</script>

</body>

• Save your Template 
• Now go to Page Elements
• Add Gadget ► HTML/JavaScript
• Leave the title empty, and in the content area paste the following code.

<div id='iconwrap'>
<div class='facebooktooltip'>
<a href='http://www.facebook.com/pages/Blogger-Tutorialz/110157202393121' id='facebook-icon'/>
<em>Join our community on Facebook</em>
</div>
<div class='twittertooltip'>

<a href='http://twitter.com/bendol212' id='twitter-icon'/>
<em>Follow my Twitter</em>
</div>
<div class='rsstooltip'>
<a href='http://feeds.feedburner.com/blogger-tutorialz' id='rss-icon'/>
<em>RSS</em>
</div>
<div class='emailtooltip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=blogger-tutorialz' id='email-icon'/>
<em>RSS</em>
</div>
</div>

• I've marked you need to replace by your own 
• I guess you already know that I mark  (if you do not know please ask in the comment box below) easy
• After you replace the Blue, cyan, and Red please save your widget
• And see your blog 

hmm...I think your blog looks more professional now, do you agree? ya ya ya...i know... Enjoy

SUBSCRIBE VIA RSS FEED

If you liked the article on this blog, Please CLICK HERE to subscribe for free via email, that way you will get a shipment every article there is an article that appeared in HARAJUKU COLLECTION