Use jquery to style your external links with image

You must have noticed in Wikipedia that all external links is followed by an image basically this tells user that the link will open in a new tab.
Lets see an example -
Blogger -An external Link
Fun with blogger -Internal link

You have noticed that the hyperlink blogger has an arrow image on right of it! This tells the user that the link will open up in a new tab when being clicked!One way of doing this is manually putting the class name to each anchor tag entry having external target! or just use jquery function and let Jquery do it for you.

# Understanding External Links strategy.What are external links?
External links are those links which points away from  your site.For this  we use a special attribute target="_blank" which tells the browser to open external link in new tab or window.
External link Looks like this
<a href="http://www.blogger.com/" target="_blank">Blogger </a>
# Purpose/Use  of JQuery.We will use jQuery to find out all a tags with target="_blank" attribute and will append a class name "external" to them by easily defining css for class external.
# Add Class name "external" To your blogger.Just Edit your Template:
Blogger Dashboard >
Layout > Edit HTML

a.external {
padding-right: 13px;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2_eiY3Lzo0VpSKWoPJ_eNV7VTDDQ66SIJKUU2oisjwnwoOXmdHusTL0rWh97x9LuM47BbCJzVQ7IrQm5rsfBc5grgrXW3mn82_EGI3ZxyASlQBfHqv00fUUOJXwRYp0O_PrIG6CHgIWk/s320/external.png") no-repeat scroll right center;
}

Now paste the above CSS code before ]]></b:skin>

#Append JQuery to your blogger.Copy below code and paste it Before the </head> in your template.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script><script type="text/javascript">$(document).ready(function() {    $('a[target="_blank"]').addClass("external");});</script>

This javascript code consist of two parts:
Jquery library-
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
And a function which search  target="_blank" attribute and will append a class name "external" to it.

---

That was all regarding Using jquery to make your external links looks cool and different.Stay in touch with me bu subscribing to my posts with RSS And MAIL
Please  give your feedback and do share this article with your friends.

Google Buzz Widget -Display Your Buzz on webpages

You must have seen twitter API widget which displays your tweets on to your blog using JQuery.This Google buzz gadget works similarly by taking feeds from your google buzz and display on your web pages.
This widget is developed by moretechtips and is on google code.You can either download it from there and put in a direct way.

 This is a jQuery widget for the brand new social network -Google Buzz- that you can embed anywhere to integrate your buzz stream into your page.

You need to add following before </head> section.

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://google-buzz-widget.googlecode.com/files/jquery.google-buzz-1.0.min.js"></script>

First one is a jquery library and the second one is google buzz widget script.

And finally you have to add a javascript which calls various parameters from your google buzz widget javascript ,which is the second one from above two.

<script type="text/javascript">
   $(document).ready(function(){
      $('div.my-buzz').googleBuzz({
         username:'Your googleprofile name'
         ,n:4
         ,show_n:0
      });
   });
</script>

<div class="my-buzz">loading..</div>

Options and Modifications-

Your googleprofile name - Replace This with your own google profile name which is generally your gmail id.
n is the number of buzzes to read (maximum 100, default 10)
show_n is the maximum amount of buzz to display simultaneously (zero disables the transition effect and the default is 1)

Animated jquery sharing bar with 360 revolution

Today i am sharing with you  an awesome animated sharing option (from Martin Angelov on tutorialzine) by using pure JavaScript with the jQuery framework.which will enable your website visitors to share posts on a number of social networks.Social networking place a very important role in the popularity of the blog,blogger that communicate better and understand the power of social media are generally the most popular ones.
Before we start you make also like to look at  some of my previous posts:Tiny facebook gadget (add to your blogger)Another social bookmarking using image swapping
Now,Installing it to the blogger below every post is like every other social bookmarking bar ,there is an Html with a css supporting it, on the top of it working the Jquery.

Copy this CSS code and paste it above  ]]></b:skin> in your template code ,no need to expand widget template.

#share{ /* The share box container */ width:500px; background:#ececec; height:220px; margin:60px auto; overflow:hidden; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}#share-label{ /* The image on the right */ background:url(img/share.png) no-repeat 50% 50%; float:left; height:220px; width:200px;}#stage{ /* This is where the animation takes place */ position:relative; border-right:1px solid #DDDDDD; width:290px; height:220px; background:white; float:left; border-bottom-left-radius:12px; border-top-left-radius:12px; -moz-border-radius-bottomleft:12px; -moz-border-radius-topleft:12px; -webkit-border-bottom-left-radius:12px; -webkit-border-top-left-radius:12px;}.btn{ /* This class is assigned to every share button */ background-color:white; height:90px; left:0; top:0; width:60px; position:relative; margin:20px 0 0 10px; float:left;}.bcontent{ /* Positioned inside the .btn container */ position:absolute; top:auto; bottom:20px; left:0;}/* Individual rules for every share button */.digg{ background:url(img/digg_reflection.png) no-repeat -4px bottom;}.reddit{ background:url(img/reddit_reflection.png) no-repeat -4px bottom;}.facebook{ background:url(img/facebook_reflection.png) no-repeat bottom center;}.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}.thanksto{ position:absolute; bottom:2px; right:4px; font-size:10px;}.thanksto a,.thanksto a:visited{ color:#BBB;}/* Customizing the facebook share button */span.fb_share_no_count { display:block;}span.fb_share_count_top.fb_share_no_count { line-height:54px;}span.fb_share_count_nub_top.fb_share_no_count{ display:none;}span.fb_share_no_count span.fb_share_count_inner { background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px; display:block;}

For get this working we need to install these two JavaScript between head sections :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ikb.fileave.com/rotating%20social.js"></script>
 

First one includes jquery library from google's CDN and the second one is rotating social file.

To show the code below every post paste this HTML code below <data:post.body/>

<div id="share"><div id="stage"><div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div><div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div><div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div><div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div><div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div></div><div id="share-label"><!-- This is where the share some love image appears --></div></div>
And save your template Click on view blog to see it working.

Make your widgets dragable - Feel Like MAC ♥

Drag and Drop Your widgets

No, this is not a  MAC's  review nor it is Upcoming Notebook promotion . This is a blogger trick which will let you and your readers to give MAC like effect to your blog.This will let you to drag and grop your widget box from one place to another.You just have to choose widgets name which you want to make dragable.


Lets see a    to see how its look like.Try To Drag and drop widgets from sidebar to any position on the screen

How to Do that for My blog ..??

Copy Below given code which include three JavaScript and paste it just above your</body>
Do not forgot to Expand your template.
Hint : Use your browser search( Ctrl + F ) to find </body>

Do not just copy Blindly read the full post first.

<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".widget.HTML").draggable();
$(".widget.Label").draggable();
$(".widget.BlogArchive").draggable();

});
</script>

Let me explain you about the code:

1st javascript block is to recieve Ajax library from google server.
2nd javascript block is to recieve Jquery library from google server.
3rd javascript ,i am specifing all widgets which i want to make dragable by calling dragable function of Jquery itself .

How to select widgets :

Selecting your widgets is easy,you have to get the name of your widgets as defined in your template code.

$(".widget.HTML").draggable(); will make your all HTML widgets dragable.
$(".widget.Label").draggable(); will make your Label widget dragable.
$(".widget.BlogArchive").draggable(); will make your BlogArchive widget dragable.

 What if you want your BlogArchive to remain stationary , just delete this line
$(".widget.BlogArchive").draggable();
from the above codeand you are done.

Do not forgot to save your template

I have tried to make this tutorial as explainatory as possible ,if you still feel any problem or want to  add your thoughts to it.Let me know through your comments will LUV to hear you.

Add JQuery Color fading Menu to blogger

Need a Additional navigation Menu For your blog just try this one,a cool widget navigation using jQuery with Black-grey hovering effect.

Follow the Steps And the Navigation could be yours:
1.Login to your dashboard
2.navigate through Layout->Edit HTML
3.Search for </head>  and add the below given code above </head>.
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /> <script type='text/javascript'><br /> //<![CDATA[<br /> <br /> /*<br /> * jQuery Color Animations<br /> * Copyright 2007 John Resig<br /> * Released under the MIT and GPL licenses.<br /> */<br /> <br /> (function(jQuery){<br /> <br /> // We override the animation for all of these color styles<br /> jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){<br />  jQuery.fx.step[attr] = function(fx){<br />   if ( fx.state == 0 ) {<br />    fx.start = getColor( fx.elem, attr );<br />    fx.end = getRGB( fx.end );<br />   }<br /> <br />   fx.elem.style[attr] = "rgb("   [<br />    Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0]))   fx.start[0]), 255), 0),<br />    Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1]))   fx.start[1]), 255), 0),<br />    Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2]))   fx.start[2]), 255), 0)<br />   ].join(",")   ")";<br />  }<br /> });<br /> <br /> // Color Conversion functions from highlightFade<br /> // By Blair Mitchelmore<br /> // http://jquery.offput.ca/highlightFade/<br /> <br /> // Parse strings looking for color tuples [255,255,255]<br /> function getRGB(color) {<br />  var result;<br /> <br />  // Check if we're already dealing with an array of colors<br />  if ( color && color.constructor == Array && color.length == 3 )<br />   return color;<br /> <br />  // Look for rgb(num,num,num)<br />  if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))<br />   return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];<br /> <br />  // Look for rgb(num%,num%,num%)<br />  if (result = /rgb\(\s*([0-9] (?:\.[0-9] )?)\%\s*,\s*([0-9] (?:\.[0-9] )?)\%\s*,\s*([0-9] (?:\.[0-9] )?)\%\s*\)/.exec(color))<br />   return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];<br /> <br />  // Look for #a0b1c2<br />  if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))<br />   return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];<br /> <br />  // Look for #fff<br />  if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))<br />   return [parseInt(result[1] result[1],16), parseInt(result[2] result[2],16), parseInt(result[3] result[3],16)];<br /> <br />  // Otherwise, we're most likely dealing with a named color<br />  return colors[jQuery.trim(color).toLowerCase()];<br /> }<br /> <br /> function getColor(elem, attr) {<br />  var color;<br /> <br />  do {<br />   color = jQuery.curCSS(elem, attr);<br /> <br />   // Keep going until we find an element that has color, or we hit the body<br />   if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )<br />    break;<br /> <br />   attr = "backgroundColor";<br />  } while ( elem = elem.parentNode );<br /> <br />  return getRGB(color);<br /> };<br /> <br /> // Some named colors to work with<br /> // From Interface by Stefan Petre<br /> // http://interface.eyecon.ro/<br /> <br /> var colors = {<br />  aqua:[0,255,255],<br />  azure:[240,255,255],<br />  beige:[245,245,220],<br />  black:[0,0,0],<br />  blue:[0,0,255],<br />  brown:[165,42,42],<br />  cyan:[0,255,255],<br />  darkblue:[0,0,139],<br />  darkcyan:[0,139,139],<br />  darkgrey:[169,169,169],<br />  darkgreen:[0,100,0],<br />  darkkhaki:[189,183,107],<br />  darkmagenta:[139,0,139],<br />  darkolivegreen:[85,107,47],<br />  darkorange:[255,140,0],<br />  darkorchid:[153,50,204],<br />  darkred:[139,0,0],<br />  darksalmon:[233,150,122],<br />  darkviolet:[148,0,211],<br />  fuchsia:[255,0,255],<br />  gold:[255,215,0],<br />  green:[0,128,0],<br />  indigo:[75,0,130],<br />  khaki:[240,230,140],<br />  lightblue:[173,216,230],<br />  lightcyan:[224,255,255],<br />  lightgreen:[144,238,144],<br />  lightgrey:[211,211,211],<br />  lightpink:[255,182,193],<br />  lightyellow:[255,255,224],<br />  lime:[0,255,0],<br />  magenta:[255,0,255],<br />  maroon:[128,0,0],<br />  navy:[0,0,128],<br />  olive:[128,128,0],<br />  orange:[255,165,0],<br />  pink:[255,192,203],<br />  purple:[128,0,128],<br />  violet:[128,0,128],<br />  red:[255,0,0],<br />  silver:[192,192,192],<br />  white:[255,255,255],<br />  yellow:[255,255,0]<br /> };<br /> <br /> })(jQuery);<br /> <br /> //]]><br /> </script><br /> <br /> <script type='text/javascript'><br /> //<![CDATA[<br /> <br /> var hoverColour = "#FFF";<br /> <br /> $(function(){<br /> $("a.hoverBtn").show("fast", function() {<br />  $(this).wrap("<div class=\"hoverBtn\">");<br />  $(this).attr("class", "");<br /> });<br /> <br /> //display the hover div<br /> $("div.hoverBtn").show("fast", function() {<br />  //append the background div<br />  $(this).append("<div></div>");<br /> <br />  //get link's size<br />  var wid = $(this).children("a").width();<br />  var hei = $(this).children("a").height();<br /> <br />  //set div's size<br />  $(this).width(wid);<br />  $(this).height(hei);<br />  $(this).children("div").width(wid);<br />  $(this).children("div").height(hei);<br /> <br />  //on link hover<br />  $(this).children("a").hover(function(){<br />   //store initial link colour<br />   if ($(this).attr("rel") == "") {<br />    $(this).attr("rel", $(this).css("color"));<br />   }<br />   //fade in the background<br />   $(this).parent().children("div")<br />    .stop()<br />    .css({"display": "none", "opacity": "1"})<br />    .fadeIn("fast");<br />   //fade the colour<br />   $(this) .stop()<br />    .css({"color": $(this).attr("rel")})<br />    .animate({"color": hoverColour}, 350);<br />  },function(){<br />   //fade out the background<br />   $(this).parent().children("div")<br />    .stop()<br />    .fadeOut("slow");<br />   //fade the colour<br />   $(this) .stop()<br />    .animate({"color": $(this).attr("rel")}, 250);<br />  });<br /> });<br /> });<br /> <br /> //]]><br /> </script><br /> <br /> <style type='text/css'><br /> div.hoverBtn {<br /> position:   relative;<br /> float:   left;<br /> background:  #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvjrb6pelxp55dhBl0AUS9sEjVlC-rW8FXgawL7ROdvU6aiaZy0z32b4abvcQaNLZ2HkP3T8B5ffMBx9v1YkdHlc58mKsePYSueOBE0Uwje9AI1eTGXAhUdeozE7Svjt2hCkQPqRlZKtXI/) repeat-x 0 0 scroll;<br /> }<br /> div.hoverBtn a {<br /> position:   relative;<br /> z-index:   2;<br /> display:   block;<br /> width:    100px;<br /> height:   30px;<br /> line-height:   30px;<br /> text-align:   center;<br /> font-size:  1.1em;<br /> text-decoration: none;<br /> color:   #000;<br /> background:  transparent none repeat-x 0 0 scroll;<br /> }<br /> div.hoverBtn div {<br /> display:  none;<br /> position:   absolute;<br /> z-index:   1;<br /> top:    0px;<br /> background:  #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiozahVrztnbB4nLuBeZlXsUkgIZaIFoRWSIwHOSXZb6LyebP3OaAWe0Df6J29_x3EmIVhFiLcFbEXCvLpyN3IzgJVpe6SQHsJo6u_l5AX5t-RaWQPr_42_j1rruSznXva_7h4WonEoSX2V/) repeat-x 0 0 scroll;<br /> </style>

4.Click on Save Template
Note:I suggest you to host images yourself.

5.Now go to layout -> page element  and Click on Add a .Gadget and choose Html/javascript From the popup.

6.Now Add the below given Html modifying according to your need

<a class="hoverBtn" href="#">Home</a>
<a class="hoverBtn" href="#">HTML</a>
<a class="hoverBtn" href="#">CSS</a>
<a class="hoverBtn" href="#">About</a>
<a class="hoverBtn" href="#">Contact</a>

Just Reply back..!! to say thanks...OR you have any problem with this tricks..