Android & Blog Stuff

NEW FLOATING SOCIAL SHARING BAR WIDGET FOR BLOGGER / BLOGSPOT

2012-06-18T19:04:00.000+05:30

LIVE PREVIEW

HOW TO ADD FLOATING SOCIAL SHARING BAR WIDGET?

First,

Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
Select the Template > Click on Edit HTML > Proceed
Check/Tick the Expand Template Widgets checkbox

Just follow 3 Simple steps,

THE JQUERY PLUGIN!

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

THE SOCIAL SCRIPTS

This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages.
Add the below snippet code before </head> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #w2bSocialFloat td{padding:4px;margin:0;border:none;}
 #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
 #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());w2bTopPos=a.offset().top;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){b(this).scrollTop()>=w2bTopPos?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
 // Twitter
 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
 // Google + (plus)
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Stumbleupon
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Digg
 (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

ADDING SOCIAL BUTTONS WIDGET

Let’s add the final Social horizontal bar widget code.
Add this code before <data:post.body/> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
 <tr>
  <td>
   <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
  </td>
  <td>
   <iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
  </td>
  <td>
   <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
    <data:post.body/>
    <script type="text/javascript">
     w2bPinItButton({ 
      url:"<data:post.url/>", 
      thumb: "\<data:post.thumbnailUrl/>", 
      id: "<data:post.id/>", 
      defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcPV_gnFezdGoqTmcpxqw4P-yBPE9expclIRJFM-HKDpo54eRgCVLK2EUjzLQ9zWjQW9hIg7qLS7a4bWzzN3Qguv01JJkHhtnwAz5yo0ugntITvUHbMW1OhauQ5veOB8FFBvLXd-1RokN/s1600/w2b-no-thumbnail.jpg", 
      pincount: "horizontal" 
     }); 
    </script> 
   </div>
  </td>
  <td>
   <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
  </td>
  <td>
   <su:badge layout="1" expr:location="data:post.url"></su:badge>
  </td>
  <td>
   <a class="DiggThisButton DiggCompact"></a>
  </td>
 </tr>
</table>
</div>
</b:if>

SAVE TEMPLATE!!!

Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.

Hope this widget is helpful to you, Please leave your comments, and share this Widget.
Thanks to Raghav! for requesting this simple and awesome widget.

UPDATE :-

1. I FOUND THE TAG THREE TIMES?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,
Solution:
Search for below two lines

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Place the Widget code in between the two tags.

2. HOW TO CHANGE THE BACKGROUND COLOR OF HORIZONTAL BAR?

You can change the background color of Horizontal bar.
Solution:
In the Second step (The Social Scripts), search for

background:#FFFFFF;

and change the #FFFFFF with your own Hex Color.

Thanks to All.

jQuery Popup For Facebook Like Box With Timer!

2012-06-14T15:59:00.000+05:30

Tip: Copy the code given give below and paste it inside this editor.

Adding Popup For Facebook Like Box With Timer (Updated!)

You just need to place a code to your blog widget Follow following steps to add Popup For Facebook Like Box With Timer to WordPress and Blogger.

Adding To Blogger

Go To Blogger > Design > Edit HTML
Backup your template
Paste the following code just above </body>

Adding To WordPress

Go to Dashboard > Appearance > Editor > Header.php
Paste the following code just above </body>

<style>#fblikepop {    background-color: #fff;
    display: none;
    position: fixed;
    top: 200px;
    _position: absolute;
 /* hack for IE 6*/
    width: 450px;
    border: 10px solid #6F6F6F;
    z-index: 200;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin: 0pt;
    padding: 0pt;
    color: #333333;
    text-align: left;
    font-family: arial,sans-serif;
    font-size: 13px;
}#fblikepop body {
    background: #fff none repeat scroll 0%;
    line-height: 1;
    margin: 0pt;
    height: 100%;
}

.fbflush {
    cursor: pointer;
    font-size: 11px !important;
    color: #FFF !important;
    text-decoration: none !important;
    border: 0 !important;
}
#fblikebg {
    display: none;
    position: fixed;
    _position: absolute;
 /* hack for IE 6*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 100;
}#fblikepop #closeable {
    float: right;
    margin: 7px 15px 0 0;
}#fblikepop h1 {
    background: #6D84B4 none repeat scroll 0 0;
    border-top: 1px solid #3B5998;
    border-left: 1px solid #3B5998;
    border-right: 1px solid #3B5998;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 5px !important;
    margin: 0 !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}#fblikepop #actionHolder {
    height: 30px;
    overflow: hidden;
}#fblikepop #buttonArea {
    background: #F2F2F2;
    border-top: 1px solid #CCCCCC;
    padding: 10px;
    min-height: 50px;
}#fblikepop #buttonArea a {
    color: #999999 !important;
    text-decoration: none !important;
    border: 0 !important;
    font-size: 10px !important;
}#fblikepop #buttonArea a:hover {
    color: #333 !important;
    text-decoration: none !important;
    border: 0 !important;
}#fblikepop #popupMessage {
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 22px;
    padding: 8px;
    background: #fff !important;
}#fblikepop #counter-display {
    float: right;
    font-size: 11px !important;
    font-weight: normal !important;
    margin: 5px 0 0 0;
    text-align: right;
    line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
 kakinetworkdotcom01username="android-blogstuff",
 kakinetworkdotcom01title="Join us at Facebook!",
 kakinetworkdotcom01skin="04",
 kakinetworkdotcom01time="20",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://allbloggingtips.com/wp-content/uploads/2012/06/popup-with-timer-codez.js"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Make following important changes:

Replace this AllBloggingTips with your Facebook username.
The timer is set to 20 seconds to change it simply edit timeout: 20
The widget appears immediately after a visiter enter your blog/site. If you want it to appear after one minute or more then edit wait: 0

How to Add Cool Floating Notification bar in Blogger

2012-06-14T15:52:00.003+05:30

Live Demo

Add Cool Floating Notification bar in Blogger !

First Always Back Up Your Template Before You Any Make Changes – How To Back Up A Blogger Template

Goto Blogger => Design => Edit HTML
Next search for this code

<body>

Just below it paste the following code,

<!-- Notification code start -->
<style type='text/css'>
#ut-sticky
{
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#7d7e7d), color-stop(9%,#7d7e7d), color-stop(99%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* IE10+ */
background: linear-gradient(top,  #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 ); /* IE6-9 */

border-bottom:2px solid #999;

color:#fff;
text-align: center;
margin:-12px auto;
padding-bottom:1px;
border-top: 1px solid #333;
height:38px;
font-size:13px;
position:fixed;
vertical-align: baseline; overflow:hidden;
z-index:999;
width:100%;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
 -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
 -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
}
#ut-sticky:hover
{

background-color:#333;background-image:-moz-linear-gradient(top,#555555,#434343);background-image:-ms-linear-gradient(top,#555555,#434343);background-image:-webkit-gradient(linear,0 0,0 100%,from(#555555),to(#434343));background-image:-webkit-linear-gradient(top,#555555,#434343);background-image:-o-linear-gradient(top,#555555,#434343);background-image:linear-gradient(top,#555555,#434343);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#555555&#39;,endColorstr=&#39;#434343&#39;,GradientType=0)

-webkit-transition:all 1.3s ease-in-out;-moz-transition:all 1.3s ease-in-out;-o-transition-duration:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;

 -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
 -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);

}

#ut-button {background:#fff; padding:4px; color:black;text-shadow:0 -1px 0 rgba(255,255,255,0.25);background-color:white}

#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; padding:4px; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; top:4px;float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
.ut-cross, a:hover{color:#DDD; text-decoration:none;}

</style>
<div id='ut-sticky'>
<p style='padding-top:17px;'>Add This Floating Notification Bar To Your Blog <a class='ut-button' href='http://www.android-blogstuff.blogspot.com' target='_blank'>Click Here!</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<br/><br/>
<br/><br/>
<!-- End of Notification code, info - http://www.allbloggingtips.com -->

To Customize it
After adding above code just edit above HIGHLIGHTED text and link to your desire text.

I hope you enjoyed this cool Floating Notification bar widget. Do let me know if you face any problem.

Make a Pop-up Subscribe Form Like Aweber

2011-12-24T10:25:00.003+05:30

You can Install This Widget Easily in your Blog By Following These Simple Steps....

Before you edit any template it's better to keep a Backup..
So First Backup your Template. Now Go To Design>Edit Html>Select Expand Widgets...

Demo : Click Here

Step 1 : The CSS You Need To Search The Following Piece Of Code By Pressing [Ctrl+F]

]]></b:skin>
Now Paste The Bellow Code Just Before it.

/*    ColorBox Core Style:    The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /*
   User Style:
   Change the following styles to modify the appearance of ColorBox. They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }
   #cboxTopLeft{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;}
   #cboxTopCenter{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;}
   #cboxTopRight{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;}
   #cboxBottomLeft{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;}
   #cboxBottomCenter{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;}
   #cboxBottomRight{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;}
   #cboxMiddleLeft{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;}
   #cboxMiddleRight{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;}
   #cboxContent{background:#fff; overflow:visible;}
       #cboxLoadedContent{margin-bottom:5px;}
       #cboxLoadingOverlay{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;}
       #cboxLoadingGraphic{background:url(http://imgboot.com/images/cybersidh/loading.gif) no-repeat center center;}
       #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
       #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
       #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
       #cboxPrevious{left:0px; background-position: -51px -25px;}
       #cboxPrevious.hover{background-position:-51px 0px;}
       #cboxNext{left:27px; background-position:-75px -25px;}
       #cboxNext.hover{background-position:-75px 0px;}
       #cboxClose{right:0; background-position:-100px -25px;}
       #cboxClose.hover{background-position:-100px 0px;}
       .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
       .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
       .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
       .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/*    box popup
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #2C2D31;
   font-size: 20px;
   font-weight: bold;
   margin: 10px 0;
   text-align: center;
}
.box-tagline {
   color: #999;
   font-size: 14px;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
.box-side {
    width: 170px;
    text-align: center;
}
.box-side.left {
   padding: 0 30px 0 15px;
    border-right: 1px solid #ecedf3;
}
.box-side.right {
    float: right;
   margin-top: -223px;
    margin-right: 10px;
}
.box-icon {
    width: 72px;
    height: 54px;
    padding: 6px 0 0 0;
    margin: 0 auto;
}
.box-icon a.rss{
    display: block;
    width: 70px;
    height: 56px;
    margin: 0 auto;
}
.box-icon a{
    display: block;
    width: 72px;
    height: 54px;
}
.box-icon a.email img,
.box-icon a.rss img {
   margin: -5px 0 0;
    border: 0 none;
}
.box-side h4,
.box-side h4 a {
    font-size: 14px;
    line-height: 14px;
    color: #f26535;
    font-weight: bold;
}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {
    font-size: 11px;
    color: #5e6066;
    line-height: 18px;
    margin: 0 0 20px 0;
}
a.sub {
   background: url("http://imgboot.com/images/cybersidh/subscribebutton.png") no-repeat scroll 0 0 transparent;
   color: #996633;
   display: block;
   height: 44px;
   line-height: 29px;
   margin: 0 auto;
   text-indent: -999em;
   width: 130px;
}
.box-side h4 a:hover {
    color: #f26535;
}
#box-or {
   background: #fff;
   font-size: 12px;
   font-weight: bold;
   height: 25px;
   line-height: 25px;
   margin: -115px 0 0 208px;
   position: absolute;
   width: 20px;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}

Now Hit Prievew, If Every Thing Works Fine then Save The Template..

Step 2 : The Html In This Part you'll add the widget to your Blog !!
Goto :: Design>Page Elements>Add Gadget>Html/Javascript
Now Paste The Following Code In It.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> <script src="http://sidharth12.googlecode.com/files/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*15; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"480px", inline:true, href:"#subscribe"}); } }); </script>  <div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <h2 class="box-title">Never Miss Any Update From Us!</h2> <h2 class="box-tagline">Enrich Your Inbox.[402+ Readers]</h2><br/> <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ILibrary', 'popupwindow', 'scrollbars=no,width=560,height=540');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="ILibrary" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a> | Powered By <a href="http://www.mybloggertricks.com">MBT</a></p></form> <br/><h2 class="box-tagline">Subscribe us today and get Quality Articles for free.</h2> </div> </div>

Important :
Remove The Red Colored ILibrary With You FeedBurner ID.
Ignore The Line In Pink If Your Blog Already has JQuery.

Attractive Subscribe Section + Search Box For Blogger

2011-12-23T23:36:00.000+05:30

In this article,I am going to explain how to add more attractive Subscribe Section + Search Box to your blogger blog.This subscribe section is included Feedburner feed and Email subscriptions boxes,Twitter and Facebook boxes for your Twitter and Facebook profiles and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious) to share your articles among social networks.These social network buttons are powered by www.addthis.com.Above the subscribe section,Search box is included.You don't want to change anything in the search box code.To add this widget to your blogger sidebar without doing any modification,sidebar width must be at least 305 px. You can add this Subscribe Section + Search Box into your blog within few seconds and very easy to configure.If you like to add this widget to your blog or a website,then follow the steps given below.

1.Login to your blogger dashboard --> Design --> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Save your template.
4.Now go to Design --> Page Elements and click on "Add a gadget".
5.Select "html/java script" and add the code given below and click save.
<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUAt42ikzQG72H3eCzfKy-tpy-TATr_-2t3jT1SZDRWoWlrPIYOJnI0Kq7aDRx3JbONXBDFQPPG1QUS6J5gtT7dxKG5amT5HlkMdCiMcKHmi0ChDP7-Jd5tRACnQf3d3N0qZPzHCbfaj53/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzOPgYTLwwr0SHtXPe2-mK1bv2iUzsaWgu8OiNSZmShbHCvMlzOEJBEv7SBBN0AZDVzisgOHWmlvsSbKog0RoShTbQPaD8JWUvD6OsPbobJ8T58tIvlarO160_QnZGCW8JtSnxK6n1cgW/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOLVNxHveH5xQH8z1rJ5IQxynidQvEPVY5FSTdIpYei5bPZ7S4ZyO03cf48ZzWBF0fxT7qIPBXvLXCy0KICbb3dn_8Ywtt0U62aAmQXnFpCUs3Ib6sgaVWjDbG-HyVXIJ0tAbrV9Rnz_tf/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggRUT9DYocDDNcDnTFZIdMSq7jXYk8szue3ycytoKR4VzXEq4vJyXrtvEi7eGGhuQJRfl_YAPb4qLKcqVJYeoshCtgPg1a-3CJl79jNt1N9PgpWtJ0Uar76pR4cOVEKv8_jKzeNP2Xcv_c/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44N08H6KEXGCVZmJ7d_5jHUX3IJVg0zvuFNRq7ALwAYU7NbMlh-KMLfBDnCkXcZlKopbHsLV0Xpc583fbmrNZCrubf4sE0o5BPWZ7nCREnr6FWI3GbRCKa5cYunnAacwXPvu6pZc9j-Q/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCw6B8k6nHft0_WT9eSIplfyS-JZiNrjuGzF8K6BYTb5GfWvMWUinRK5ymXBTbr7YTVAwoRcTKTTWy0C4mZullCAQ9t4_uWCuXMReSKbeoNoU9JTIACCAE1vnhkvnEnUDPPELzAAFLVHA/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFbVbPu4Q7GGEam9-fWKrCWuHs-nLzD7W07PFRitZ8SVsG2UF4KCmVwZcIUNz19wQ6v1lYHVljsnQsRO641QI0cCJkgHBdIvfBaw_cp9qGOxVMSFm1Df1Bq07G9CZc1xF7CfF2GdVLIY/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuWsdfqXrzLBmTg_yW2cdTzvtJGmEmjCfvEkGx6CZm2Owrh6hnFXvUYAhLMB3QOfr5WP08SF7lwo6jiWuj5QghzUICXkD3dPhEqfitzqRXMbB5rC2oiL7WVEA5JtzbNE_suws9rLukok/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAXZtkVR0y_JuCbSUjSRlUuUDj_Slzt2_AA52kYOFnH_sHOraUMJ0NvT4mmF6ExvPIqghiFlosgiXOdGDGrcs04vy9UMis9H6gUqpAa9HdRiOZczSKo3U_J4F1UbP7p9djTcQksVFmBjc/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Y5IhwuWHy_LWO_VjQiu3m7c_knTDS1BBLPHjYk8OCP-IWps-Frc8tyx8akP1EWnvJ6ay-K43k37Huqsg5B31PVFyMg2mj8LZJQY4F-v9yHBhXUenOO6hHpNjQMhLWpZJldjS7xz30zc/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2m7pFUWU9ET0xj3v8aH1NgQvzLtPsmeIxpi3HUK2FFLQqAy5WS33c0_Je3Lkk0emHpulC-CxLrANZN-fmLVRZLxOzkUjvKKulZcsNXwdxNMiTvZrjJoI_1h9gzs7q75t5BmXpHyQIFA8/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>
NOTE : Remember to Replace,
FEEDBURNER-ID with your real Feedburner ID.(4 times).
TWITTER-USERNAME with your real Twitter username.
FACEBOOK-USERNAME with your real Facebook username.
You are done.

16 Amazing jQuery Tooltips Collection

2011-12-23T23:32:00.000+05:30

This will be a most wanted list of jQuery tooltips collection for every web designer.When you surfing the web you can see different types of tooltips effect in web sites.Here I listed more popular jQuery tooltips collection in these days.I hope to update this article with new tooltips effects in future.So bookmark this article for your future preference if you like this post.Use the links given below for the tutorials,demos and downloads.

The tooltip or infotip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over.

jQuery (mb)Tooltip

Article : http://pupunzi.open-lab.com/2009/02/07/mbtooltip/

Demo : http://pupunzi.com/#mb.components/mb.tooltip/tooltip.html

Download: http://cloud.github.com/downloads/pupunzi/jquery.mb.tooltip/jquery.mb.tooltip.1.6.zip

qTip

qTip is a tooltip plugin for the jQuery framework. It's cross-browser, customizable and packed full of features!

Article : http://craigsworks.com/projects/qtip/

Demo : http://craigsworks.com/projects/qtip/demos/

Download: http://craigsworks.com/projects/qtip/download/

TipTip

Article : http://code.drewwilson.com/entry/tiptip-jquery-plugin

Demo : http://code.drewwilson.com/entry/tiptip-jquery-plugin

Download: http://www.drewwilson.com/upload/data/4/tipTipv13.zip

jQuery Tools

Article : http://flowplayer.org/tools/tooltip/index.html

Demo : http://flowplayer.org/tools/tooltip/index.html

Download: http://flowplayer.org/tools/img/tooltip/tooltip.zip

Simpletip

Article : http://craigsworks.com/projects/simpletip/

Demo : http://craigsworks.com/projects/simpletip/

Download: http://craigsworks.com/projects/simpletip/

JavaScript Kit Tooltip

Article : http://www.javascriptkit.com/script/script2/htmltooltip.shtml

Demo : http://www.javascriptkit.com/script/script2/htmltooltip.shtml

Download: http://www.javascriptkit.com/script/script2/htmltooltip.shtml

BeautyTips

BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event.

Article : http://plugins.jquery.com/project/bt

Demo : http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

Download: http://plugins.jquery.com/project/bt

clueTip

The clueTip plugin allows you to easily show a fancy tooltip when the user's mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

Article : http://plugins.learningjquery.com/cluetip/

Demo : http://plugins.learningjquery.com/cluetip/demo/

Download: http://plugins.learningjquery.com/cluetip/#download

EZPZ Tooltip

Article : http://theezpzway.com/2009/3/17/jquery-plugin-ezpz-tooltip

Demo : http://theezpzway.com/demos/ezpz-tooltip

Download: http://theezpzway.com/2009/3/17/jquery-plugin-ezpz-tooltip#section-10

Hovertips

Article : http://www.dave-cohen.com/node/1186

Demo : http://www.dave-cohen.com/node/1186

Download: http://www.dave-cohen.com/modules/hovertip/hovertip.js

jQuery Awesomeness

Article : http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/

Demo : http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo/index.html

Download: http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo.zip

Tipsy Tooltip

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

Article : http://onehackoranother.com/projects/jquery/tipsy/

Demo : http://onehackoranother.com/projects/jquery/tipsy/#examples

Download: http://onehackoranother.com/projects/jquery/tipsy/#download

Popup Bubble

Article : http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/

Demo : http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/index.html

Download: http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/

jQuery Horizontal Tooltips Menu

Article : http://www.queness.com/post/556/jquery-horizontal-tooltips-menu-tutorials

Demo : http://www.queness.com/resources/html/tooltipmenu/index.html

Download: http://www.queness.com/resources/archives/jquery-tooltipmenu.zip

Coda Popup Bubbles

Article : http://jqueryfordesigners.com/coda-popup-bubbles/

Demo : http://jqueryfordesigners.com/demo/coda-bubble.html

Download: http://jqueryfordesigners.com/coda-popup-bubbles/

BetterTip

Article : http://edgarverle.com/BetterTip/default.cfm

Demo : http://edgarverle.com/BetterTip/default.cfm

Download: http://edgarverle.com/BetterTip/bettertip.zip

If there is a jQuery tool tip effect you like,but you can not add it to your website or blog yourself,you can contact me,I can do it for you.

Most Wanted 15 jQuery Cheat Sheets for Web Developers

2011-12-23T23:29:00.000+05:30

jQuery is the most popular java script library is used in today.it greatly simplifies java script programming.Here I listed most popular and very useful jQuery cheat sheet collection on the Internet,for anyone who like to learn jQuery.You can get more cheat sheets mentioned here as pdf files or image(.png,.jpeg) files.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

From http://jquery.com/

1. jQuery 1.4.2 Visual Cheat Sheet

jQuery Visual Cheat Sheet, the refined and updated version of the popular woork's jQuery Cheat Sheet. The new edition includes all the reference you will ever need for jQuery 1.4.2 API!

Article : http://woorkup.com/2010/06/13/jquery-1-4-2-visual-cheat-sheet/

Download : http://woorkup.com/wp-content/uploads/2010/06/jQuery-Visual-Cheat-Sheet-1.4.2.pdf

2. jQuery 1.4 Cheat Sheet

This cheet sheet attempts to better align with the new documentation structure jQuery is now using and clearly marks all new and updated functions for jQuery 1.4.

Article : http://labs.impulsestudios.ca/jquery-cheat-sheet

Download : http://labs.impulsestudios.ca/downloads/impulse_studios-jquery_cheat_sheet-1.0.pdf

3. jQuery Selectors

jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips.

You must register(it is free) to get this cheat sheet.

Article : http://refcardz.dzone.com/refcardz/jquery-selectors

4. jQuery 1.4.4 API Cheat Sheet

Article : http://www.futurecolors.ru/jquery/

Download :
http://www.futurecolors.ru/jquery/jquery.cheatsheet.1.4.pdf
http://www.futurecolors.ru/jquery/jquery.cheatsheet.1.4.png

5. jQuery 1.3 cheat sheet wallpaper

Article : http://www.gmtaz.com/jquery-13-cheatsheet-wallpaper/

6. jQuery Cheat Sheet - jQuery 1.3.2

Article : http://www.javascripttoolbox.com/jquery/cheatsheet/

7. jQuery Cheat Sheet - jQuery 1.1.3

Article : http://www.javascripttoolbox.com/jquery/cheatsheet/

8. jQuery - YUI3 Rosetta Stone

Article : http://carlos.bueno.org/jq-yui.html#start

9. jQuery 1.3 Cheatsheet

Article : http://blog.acodingfool.com/cheatsheets/jquery-1-3-cheatsheet/

10. jQuery 1.3 Visual Cheat Sheet

Article : http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html

Download : http://www.scribd.com/doc/20161482/jQuery-Visual-Cheat-Sheet-by-WOORK

11. jQuery cheatsheet wallpaper

Article : http://chris4403.blogspot.com/2008/01/jquery-cheatsheet-wallpaper.html

Download :
http://cheatsheet.googlecode.com/svn/trunk/cheatsheet/src/jquery/jquery1.2-cheatsheet-1280-001.png
http://cheatsheet.googlecode.com/svn/trunk/cheatsheet/src/jquery/jquery1.2-cheatsheet-1280-002.png

12. jQuery 1.2 Cheat Sheet (colorcharge.com)

Article : http://colorcharge.com/jquery/

13. jTouch – jQuery Cheat Sheet for iPhone

Article : http://jtouch.colorcharge.com/

14. jQuery 1.2 Cheat Sheet

Article : http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

Download : http://www.gscottolson.com/jquery/jQuery1.2.cheatsheet.v1.0.pdf

15. jQuery Selectors by codylindley.com

Article : http://codylindley.com/jqueryselectors/

How To Embed Yahoo Media Player to Blogger

2011-12-23T23:24:00.001+05:30

Yahoo Media Player is one of the easiest way to play audio files from your website or blog.It is very easy to embed into your site and only display when you click on the audio file name.Yahoo Media Player is not spend long time to load and someone can play all audio files of your website/blog using Play-list.

These are the main features of Yahoo Media Player:

Adds audio to your site with one line of HTML
Uses simple, easy-to-hack HTML instead of complicated proprietary markup, ushering in the REAL Media Web
Magical floating design never gets lost, is available when you need it, gets out of your way when you don't need it
Automatically finds all audio links on your page, turning your page into a playlist
Plays all your blog entries with a single button click
Allows you to put the play buttons where they belong: IN CONTEXT
Keeps the user in the page rather than sending them away to a media player
Picks up your images and adds them as cover art
Requires no download, install or maintenance

Follow these simple steps to embed Yahoo Media Player to your blog or website.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below (You can also add this code into Edit Html section of your Post Editor.):

<a href="DIRECT_URL_OF_YOUR_MP3-FILE">Name_Of_the_Mp3_File</a>

Note:

Replace "DIRECT_URL_OF_YOUR_MP3-FILE" with your .mp3 file direct url.
Replace "Name_Of_the_Mp3_File" with any name you like.

Look at the example given below:

<a href="http://mediaplayer.yahoo.com/example1.mp3">First link</a>

You can see more info about Yahoo Media Player from here :
http://mediaplayer.yahoo.com/
.

How To Add Cool Jquery Featured Slider to Blogger/Websites

2011-09-23T20:45:00.000+05:30

How To Add Cool Jquery Featured Slider to Blogger/Websites

1.Login to your blogger dashboard and go to Design --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script>
<style> 
#slider { 
    position:relative; 
} 
#slider img { 
        position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
#slider a { 
    border:0; 
    display:block; 
}
.nivo-controlNav { 
    position:absolute; 
    left:260px; 
    bottom:-42px; 
} 
.nivo-controlNav a { 
    display:block; 
    width:22px; 
    height:22px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxBO5nll_GF2CN46eDn4iyoizm8kSYCJIHz1clEfshznkdLZp76eOCO2BSeYBXzcaHuWrL4EQiOvVgW3hetMVv3G1AiTNP9FQzKemL0Szd7p5KSm6vG-U00INAO6PUa5fat2G7tJ7low/s400/bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin-right:3px; 
    float:left; 
} 
.nivo-controlNav a.active { 
    background-position:0 -22px; 
}
.nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJNOlgl49RgLUlDoBfAHuJGa8UjC0_3_HXHW-kMQPK2I6D6AQiGfXwvUqtnA80CwtJymNFwbZh5qJH7spt6lUSA4gobztGcTyJhwr3LHg0ofyzUF6z37Vgq4stnvCGavxtOcT7brZwA8/s400/arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
a.nivo-prevNav { 
    left:15px; 
}
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size:16px; 
    padding: 10px 0px; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
}
.clear { 
    clear:both; 
}
.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:none; 
} 
 
.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
} 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    opacity:0.7; /* Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:89; 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
 
.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
.nivo-controlNav a { 
    position:relative; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 
</style>
<div id="slider">
 
<a href="URL-of-Post 1"><img src="Slide-X-Image-Address 1" alt="" title="Slide X Description [...] 1" /></a> 
 
<a href="URL-of-Post 2"><img src="Slide-X-Image-Address 2" alt="" title="Slide X Description [...] 2" /></a>
 
<a href="URL-of-Post 3"><img src="Slide-X-Image-Address 3" alt="" title="Slide X Description [...] 3" /></a>
 
<a href="URL-of-Post 4"><img src="Slide-X-Image-Address 4" alt="" title="Slide X Description [...] 4" /></a>
 
<a href="URL-of-Post 5"><img src="Slide-X-Image-Address 5" alt="" title="Slide X Description [...] 5" /></a>   
 
</div>
 
<br/> 
<br/>

Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=300px and height=618px images for your slides.

Look at the code below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script>
<style> 
#slider { 
    position:relative; 
} 
#slider img { 
        position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
#slider a { 
    border:0; 
    display:block; 
}
.nivo-controlNav { 
    position:absolute; 
    left:260px; 
    bottom:-42px; 
} 
.nivo-controlNav a { 
    display:block; 
    width:22px; 
    height:22px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxBO5nll_GF2CN46eDn4iyoizm8kSYCJIHz1clEfshznkdLZp76eOCO2BSeYBXzcaHuWrL4EQiOvVgW3hetMVv3G1AiTNP9FQzKemL0Szd7p5KSm6vG-U00INAO6PUa5fat2G7tJ7low/s400/bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin-right:3px; 
    float:left; 
} 
.nivo-controlNav a.active { 
    background-position:0 -22px; 
}
.nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJNOlgl49RgLUlDoBfAHuJGa8UjC0_3_HXHW-kMQPK2I6D6AQiGfXwvUqtnA80CwtJymNFwbZh5qJH7spt6lUSA4gobztGcTyJhwr3LHg0ofyzUF6z37Vgq4stnvCGavxtOcT7brZwA8/s400/arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
a.nivo-prevNav { 
    left:15px; 
}
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size:16px; 
    padding: 10px 0px; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
}
.clear { 
    clear:both; 
}
.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:none; 
} 
 
.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
} 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    opacity:0.7; /* Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:89; 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
 
.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
.nivo-controlNav a { 
    position:relative; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 
</style>
<div id="slider">
 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzgGQDuZ0yueVnRsQF9r1CsXfMeVM-f8y_yzdjy9oZ95LLt6hwR2PnNnfmrms1-TAI1gu7M1uitloAjFhPueswhN3t_u0xgp6jEnDPLaCWfMjplV9sN9NXju7b6S3C-s8XRDhBXbf3cKYW/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWnyLIBTSFTjN1AnsiwXieCwJdBg33ZOurN-AmdLHjKDM9srILySpX3YKrs8OGRGLfr1sJ0ndYFXg8j2iU_zqFFfOyVrvAkfTyJpyY-Q98euxTipUV-lmxPTcgL49uYpRbJHqekz_wha-e/s800/Curious_Cat%252C_Siberian_Tiger.gif" alt="" title="You can add Description here or leave it blank as shown in the next image" /> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxCnV3TEz-Hunlh2QCeAJP3Pi2UY1LIeI0M7bTCPEHM6GLMApFx3LcuId4RM6FNYeeGLtZxWF5KsKHF3_f47TpNhNvWtwHT3h6lBzZBpJbTDlesr8iK_TzyVohkSJE__Ovk29KPaf4Mac/s800/Christmas_Cat.gif" alt="" /> 
 
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEispYe8x9Qr3rp-h1cMGgAU1-SsPTqpimw4NqS2v0sAyW83Kv31xuzw5zSeA_QZVFQ8pgblgHZCp7MUxuYkghrlbm5oHiLd2fkrSwiXaW9kwgHG5E_NIdrSYsarFIYum6c8qhwMbCi_DrgB/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" /> 
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0LNDZy8cSV_V0RBpIGLibsngjdOJLvdhjzjnCSDteZVt4Zfnr8OUxMXEq0Qm_E_2jVoeW6lV1bMBh-INa3sf9KHNkN5x3hW9USmyQof1Diu9s1kR2yRpPLDv73PZwzbL5MwXWMNLEU9jj/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" /> 
 
 
</div>
 
 
<br/> 
<br/>

Download the new version of slide. Please click here.

Now you are done.

Cheers

Free Games 4 Android: Asphalt 5 v3.3.7

2011-09-01T22:42:00.000+05:30

Get in, start up and punch it in the fastest dream cars ever created by some of the most prestigious manufacturers in the world. Everything you’ve ever dreamed of doing behind the wheel is here! Stop dreaming and get in!

THERE’S A DREAM CAR FOR YOU Take a ride in over 30 of the fastest, most prestigious cars you’ve ever dreamed of, from manufacturers like Ferrari, Lamborghini, Audi and Ducati.

THE WORLD IS YOUR RACETRACK Highly polished HD graphics let you see every detail and animation of the track as you speed over snow, mud, dirt and more in 12 beautiful locations around the world including St. Tropez, Aspen and Las Vegas. Discover hidden shortcuts and jump off ramps!

NEW WAYS TO PLAY Challenge yourself to 8 different racing events including Drift Contest, Cop Chase, Time Attack, Duel Mode, Last Man Standing and Escape.

Download This Free Game 4 Android here:

FileSonic HTC / Snapdragon version
zip file: 137.81MB

FileSonic Samsung / Motorola version
zip file: 137.81MB

FileSonic Galaxy Tab update
zip file: 214.82MB

Free Games 4 Android: Parkour: Roof Riders v2.0.4

2011-09-01T22:40:00.000+05:30

Run over the city's roofs and become a professional in Parkour!
Become a professional Traceur!

Run over the different amazing roofs, but be careful! You may fall in the attempt...
Brand new Roof Riders!

Parkour - Roof Riders bring a new way of controlling the gameplay. gesture control!

Features:

5 different scenarios.
Performance improvement for each type of device.
Scores online.
New flips and tricks.
New sounds. New music.

Enjoy!

Download This Free Game For Android Here:

FileSonic
apk file: 6.92MB

Free Apps 4 Android: Better Music Player v2.0.9

2011-09-01T22:37:00.000+05:30

Welcome to Better Music player, a Superior Music player for Android. A stylish music player providing much more than the basic android music experience.

This media player also includes scrobbling for Last.fm subscribers, id3 editing, album art downloads, artist image downloads, cover flow like gallery view.

Features:

id3 tag editor
Recently added Tracks
Tab Layout for Artist, Albums, Tracks, Genres, and Playlists.
Set as Ringtone
repeat track / shuffle track
Web Search / YouTube Search
Track delete
Color Themed Player and controls
Swipe gestures to change tracks
Make and edit playlists
Last.fm Scrobbling
Audio balance controls
Downloads Missing album art
5 widgets styles
English, Japanese, French, Spanish, Portuguese and Russian Languages.
swipe up on album art to enter gallery view
rotate phone on player screen to enter gallery view

Download This Free App For Android Here:

FileSonic
zip file: 1.75MB

Free Games 4 Android: Asphalt 6 Adrenaline HD v3.1.9

2011-09-01T22:31:00.000+05:30

Get your adrenaline pumping for the newest edition of the Asphalt series. Discover 42 cars & bikes from Ferrari, Lamborghini, Aston Martin, Ducati and other world-class manufacturers.

Build a collection in your 3D garage that you can explore using the touch screen, then tune your vehicle & customize it with decals before tearing up the streets of L.A., Tokyo, the Bahamas & other beautiful locations, each rendered in HD.

You’ll be driving against tough opponents in 11 different leagues with 55 events plus Online/Local Multiplayer for up to 6 players.

Features:

42 models from the most prestigious manufacturers (Ferrari, Lamborghini, Aston Martin and more)
Online/Local Multiplayer mode for up to 6 players
12 tracks, from L.A. to Tokyo and more, with HD graphics
An immersive Career mode with 11 different leagues and 55 events
Amazing number of tuning options for each model (decals, rims, boosts, and more)

Requirements:

Android 2.1 or higher
High-end devices only

Download This Free Game 4 Android here:

FileSonic HTC version
zip file: 517.32MB

FileSonic Samsung version
zip file: 523.16MB

FileSonic Motorola version
zip file: 513.73MB

FileSonic LG Optimus 2x / Tegra 2
apk file: 6.04MB

Free Games 4 Android: Toki Tori v1.0

2011-09-01T22:16:00.000+05:30

Toki Tori is finally available on Android!
Toki Tori is a mind-bending, brain-teasing puzzle platformer starring the worlds cutest chicken!

Guide Toki Tori through 80 fun and fiendish levels, chock-full of traps, puzzles, ghosts, and evil slugs, collecting all the eggs along the way.

To help you through, you'll have an arsenal of useful items such as the Telewarp, Freeze-O-Matic or the indispensible Slug Sucker!

Download This Free Game For Android Here:

FileSonic
apk file: 11.77MB

Free Apps 4 Android: Custom Launcher Icons v4.1.3

2011-09-01T22:12:00.000+05:30

Easily the best source of icons and docks for any Launcher. (Formerly known as LauncherPro Icons and Docks)

Features:

Over 900 icons
120 styles
300 dock backgrounds
Smart search and filter
Custom Icons for popular apps

Customize your phone with icons for: LauncherPro, ADW, ADW EX, Open Home, Go Launcher EX !

The docks can be used with: LauncherPro, ADW EX, and GO Launcher EX !

Note that this is not strictly a theme or skin. You can apply the icons however you choose, and however your launcher allows them to be used. This is the closest thing available to a custom LauncherPro theme.

Download This Free App For Android Here:

FileSonic
apk file: 1.23MB

Free Games 4 Android: Tom Clancy's Splinter Cell Conviction v3.1.6

2011-09-01T22:10:00.000+05:30

Play as Sam Fisher, a highly skilled Special Forces operative and fight a corrupt secret agency to get your daughter back. Follow a trail of intrigue that leads from Iraq to a high-security building in Washington.

Run, jump, fight, and shoot using a handgun, shotgun, AK47 and bazooka, or maintain stealth by improvising with nearby objects. You are now a renegade spy agent; you don't follow any orders except for your own rules of engagement!

Features:

Go through 11 levels set in 8 different locations, including a smartphone-exclusive sequence on the Potomac River.
Experience fully polished 3D graphics with an amazing depth of view.
The Mark & Execute feature allows you to mark multiple targets then quickly eliminate them all at once.
The Last Known Position indicates where your enemies think you are, allowing you to outflank and eliminate them.
Use a wide range of equipment to get rid of foes. Pistols, sonar goggles and camera grenades are at your disposal!
Beat your opponents in stunning hand-to-hand combat and interrogate enemies to get crucial information.

Download This Free Game For Android Here:

FileSonic
zip file: 484.24MB

How to Add/Install a Forum to Blogger/Blogspot Blog

2011-08-24T21:45:00.000+05:30

Embedding a forum on a website with static pages is really easy job to do. All you have to do is to create a forum on some third party site, take the generated script and put that in your site on a new blank page.

But did you know that you can put that same forum on your Blog too? No? Well you can.. and this is true!
Now you can embed a complete forum inside your blog anywhere, whether in a new page or inside a blog post!

Last week when I decided to look for such a thing to put in my blog. I started searching for such a a script or a third party tool that can help me putting a forum in my blog and I found this blog that had this embedded forum in a blog post – exactly the thing what I was looking for!

I learned that if you have your own hosting server behind your blog, then you can do it easily by creating a blank page, and putting forum script in it and giving it a nice sub-domain name.

But if you don’t have your own hosting account you don’t have to worry now. Nabble.com is the site that helps those bloggers that want to put a forum in their (free hosted) blogs.
With Nabble, you can embed a forum using a single javascript code, and your forum will work like a natively installed part of your site.

Just follow the instructions carefully:

Creating the Forum

1. Go to Nabble.com.

2. Put in your name, forum name and description and hit “Create Forum” button.

On the next page you’ll see a blank forum ready for you with a message:

3. Click “Yes Create sample Sub Forums” button to create sub-forums (categories) in your forum.

3. To do this, click option > structure > create new sub-forums.

You can change the appearance, numbers of users allowed. security settings and lots of other settings.

4. After you are done with your changes, click “Embedding Options” on top right of the page to get the script of your forum.

5. Copy the script.

You can also register yourself to claim the forum you edited so that you can make changes in the future. You can make changes in the forum even after putting in your blog!

Embedding the forum in your blog

6. Create a new post and in “Edit HTML” tab of your post editor, paste the script you copied.

7. Click “Post Options” below your post editor and under “Reader comments” select “Don’t Allow”. This will disable the comments and hide the comment form below the forum.

8. That’s it! Publish and Preview your forum!

Add your selective icon before post title in blogger

2011-08-22T20:12:00.000+05:30

Add your selective icon before post title in blogger.

Now add your selective icon before post title in blogger blog to give great effect to your blog .

Follow below simple and easy step to add this trick in your blog now---->>>>

* First go to your blogger DASHBOARD.

* Now click in design tab and Edit HTML.

* Click in small box to expand your blogger template now.

* Now find below code by scrolling or search By CTRL+F key with copy some code.

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>

* Now copy below code --->>>

<img src="YOUR-IMAGE-URL" style="border-width: 0px;" />

NOTE:- Remember Change your image URL with your image URL ok

* Now paste it between <a expr:href='data:post.url'> and <data:post.title/>.

* Now save your blogger template and you are done OK

Add thumbnail related post widget below blog post in blogger.

2011-08-22T19:58:00.000+05:30

Hello friends related post is very important for every blogger so i give you thumbnail related post widget with new style add this widget and enjoy with your blog and do everyday blogging.

Follow simple step to add this related post widget in your blogger blog---->>>>

* First go to your blogger dashboard.

* Now click in design tab and edit HTML now.

* Click in small box to expand your blogger template now.

* Find this code </head> by CTRL+F Key .

* Now copy below code and paste before </head>

 <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; height:100%; min-height:100%; padding-top:10px; padding-left:15px; padding-right:15px; } #related-posts h2{ font-size: 1.3em; color: black; font-family: Arial; margin-bottom: 0.75em; } #related-posts a{ color:black; } #related-posts a:hover { background-color:#eeeeee; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhORZ7eVC3Dy9MsiOi9_vbNL37YUg_2Z7BM7yg3YurWlsFxewxGWNDVmfrtCQXkbFPnCxpu34ZyQismSI5TEtIg21dZ-Y6LVnjfxHNk7W4tpAHq4IcuoQrrboNcVn8D64xvAE6ZU3B2JAZ6/"; var maxresults=5; var splittercolor="#cccccc"; var relatedpoststitle="YOU MAY ALSO LIKE BELOW TIPS"; </script> </b:if>

* Again search this code <p class='post-footer-line post-footer-line-1'/> or as Post footer line code.

* Copy below code and paste below code after above code now .

 <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> </b:if> 

* Now save your blogger template now and you are done .

Add Fixed Floating twitter widget to Blogspot.

2011-08-22T19:50:00.002+05:30

Hello friends social bookmark widget give you more followers and backlinks so don.t neglect them here the cool twitter widget for you add now.

Follow simple step to adding this widget in your blogger blog---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Find this code </head> by CTRL+F key now.

* Copy below giving code and paste before </head>

<!--TWITTER-FOLLOW-ME-BY Android-blogstuff.blogspot.COM-->

<style type='text/css'>

.feedbacktw {

width: 31px;

height: 116px;

display: block;

font-size: 10px;

text-decoration: none;

background-repeat:no-repeat;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixTqUyTdf-YjpWsc7SyWAk6a2NFP0fv3XndoIfkI62TjSVC2utEJI3lx2eHDzYYLzerFmIueKN3AjHZ7B31MC8XlSbSy-s8mNplLet6TgKIng4BTByHyRipV3ZARCxABi0MOQUNtUaD4/);

position:fixed;

top:20%;

right:2px;

}



.feedbacktw:hover {

width: 31px;

height: 116px;

display: block;

text-decoration: none;

background-repeat:no-repeat;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixTqUyTdf-YjpWsc7SyWAk6a2NFP0fv3XndoIfkI62TjSVC2utEJI3lx2eHDzYYLzerFmIueKN3AjHZ7B31MC8XlSbSy-s8mNplLet6TgKIng4BTByHyRipV3ZARCxABi0MOQUNtUaD4/);

position:fixed;

top:20%;

right:10px;

}

</style>

<!--TWITTER-FOLLOW-ME-STOPS-Widget-by-http://www.Android-blogstuff.blogspot.com-->

* Now save your blogger Template now.

* Again go blogger Dashboard and click in design tab and you are now here--->>> Add new element.

* Click add Gadget which is in sidebar and when open new window select HTML/Javascript from list.

* When open new blank box copy below code paste in blank box.

<!--FOLLOW-ME-STARTS Blogger9.com--><a style="display:scroll;" href="http://twitter.com/Your profile" class="feedbacktw"> </a><!--FOLLOW-ME-STOPS Android-blogstuff.blogspot.com-->

Preview--->>

* Change your twitter profile in above code .

* Now save your HTML/Javascript now you are done.

Add print this page option in your blogger blog

2011-08-22T19:48:00.000+05:30

To give your visitor to print your blog post if he like your post this trick is very simple to adding in your blog.

Follow simple step to adding this widget in your blogger blog---->>>>

* First go to your blogger Dashboard .

* Now click in design tab and edit HTML .

* Now find this code </head> by CTRL+F key easily .

* Copy below code and paste before </head>

<style type="text/css" media="print"> #noprint {display: none;} // Hide unwanted elements body {background:fff; color:000;} // Black text on White background a {text-decoration: underline; color:00f;} //Underline Hyperlinks in blue } </style>

* Now again find below code By scrolling --->>>

<p><data:post.body/></p>

* Now copy below code and paste it after <p><data:post.body/></p>

<a href="javascript:window.print()">Print Page</a>

* Now save your blogger template and you are now done.

Add left right dancing link effect in your blogger blog.

2011-08-22T19:46:00.000+05:30

This trick give your blogger great effect because when you add this trick in your blog and when touch link from your mouse cursor link text dance left and right .

Now follow simple and easy step to give cool effect to your blogger selective link.--->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger template now.

* Find this code </head> by CTRL+F key easily from your web browser.

* Copy below code and paste before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { slide("#sliding-navigation", 25, 15, 150, .8); }); function slide(navigation_id, pad_out, pad_in, time, multiplier) { // creates the target paths var list_elements = navigation_id + " li.sliding-element"; var link_elements = list_elements + " a"; // initiates the timer used for the sliding animation var timer = 0; // creates the slide animation for all list elements $(list_elements).each(function(i) { // margin left = - ([width of element] + [total vertical padding of element]) $(this).css("margin-left","-180px"); // updates timer timer = (timer*multiplier + time); $(this).animate({ marginLeft: "0" }, timer); $(this).animate({ marginLeft: "15px" }, timer); $(this).animate({ marginLeft: "0" }, timer); }); // creates the hover-slide effect for all link elements $(link_elements).each(function(i) { $(this).hover( function() { $(this).animate({ paddingLeft: pad_out }, 150); }, function() { $(this).animate({ paddingLeft: pad_in }, 150); }); }); } //]]> </script>

* Click in sve tab to save your blogger template now.

* Again go blogger DASHBOARD and click in design tab.

* Now you are here--->>> Add new element.

* Click in add new gadget which is sidebar now.

* Select HTML/Javascript from list and when open new blank box copy below code and paste in blank box.

<ul id="sliding-navigation"> <li class="sliding-element"><a href="#">Your Link 1</a></li> <li class="sliding-element"><a href="#">Your Link 2</a></li> <li class="sliding-element"><a href="#">Your Link 3</a></li> <li class="sliding-element"><a href="#">Your Link 4</a></li> <li class="sliding-element"><a href="#">YourLink 5</a></li> <li class="sliding-element"><a href="#">Your Link 6</a></li> <li class="sliding-element"><a href="#">Your Link 7</a></li> <li class="sliding-element"><a href="#">Your Link 8</a></li> <li class="sliding-element"><a href="#">Your Link 9</a></li> <li class="sliding-element"><a href="#">Your Link 10</a></li> </ul>

Note- Change your link with your own Label link ok.

* Now save your HTML/Javascript and your are done

change selected text effect color in bogger blog with easy step.

2011-08-22T19:45:00.000+05:30

Hello friends when you select any text with dragging mouse the background color of selective text is default color as- Black, Blue etc. if you want to change this effect i giving you easy and nice tip by this post.

Follow simple step to adding this effect in your blogger blog ----->>>

* First go to your blogger DASHBOARD.

* Now click in design tab and again click in edit html.

* Now click in small box which is corner to expand your blogger template.

* Now find this code </head> by CTRL+F key easily

* Copy below code and paste before </head>

<style type="text/css"> ::selection {background:#cc0000;color:#ffffff;} ::-moz-selection{background:#cc0000;color:#ffffff;} code::selection {background: #333333;color:#ffffff;} code::-moz-selection {background: #333333;color:#ffffff;} pre::selection {background: #44ceff;color:#ffffff;} pre::-moz-selection {background: #44ceff;color:#ffffff;} </style>

* Now save your blogger template and you are done my friend.

Submit your blog content to free feed directory and get more backlink.

2011-08-22T19:42:00.000+05:30

Here i have collect best free feed blog directory which is give for your blogger blog more backlinks free. so submit your feed or blogger address to free feed blog directory.

Here the list of free feed blog directory now submit your site ---->>>>

* http://www.newsknowledge.com/products/suggest_new_source.html

*  http://www.moneyhighstreet.com/feed_directory/add_url.php/

* http://www.feedest.com/feedAdd.cfm

* http://www.leighrss.com/rss-add.htm.

* http://www.millionrss.com/add-my-feed.php

* http://www.feedsee.com/submit.html

* http://www.codango.com/asp/fnc/addres/rss/?proc=getrss

* http://www.solarwarp.net/submitrss.php

* http://www.feedbase.net/Add.php

* http://www.finance-investing.com/submitrss.php

* http://www.blogoculars.com/submit-blog-free

* http://www.rssmicro.com/feedsubmit.web

* http://www.rssmotron.com/feed_submission.php

*  http://rss-feeds-submission.com/RSS/l_op=Addrss.html

* http://publisher.yahoo.com/rss_guide/submit.php

* http://www.blogdigger.com/add.jsp

* http://www.weblogalot.com/Ping/

* http://www.feedboy.com/addfeed.html?catid=

* http://blogpulse.com/submit.html

* http://www.rss-network.com/submitrss.php

* http://www.jordomedia.com/RSS/l_op=Addrss.html

* http://www.goldenfeed.com/AddFeed.aspx

* http://ngoid.sourceforge.net/sub_rss.php

*  http://www.devasp.com/search/AddRSS.asp

*   http://www.feedgy.com

* http://www.feedmap.net/submit/

* http://www.feedzie.com/submit.php

* http://www.freefeedsdirectory.com

* http://www.icerocket.com/c?p=addblog

* http://www.keegy.com/suggest/

*  http://www.metafeeder.com/suggest-feed.html

* http://www.newsmaster.lv/newsmaster/catalogue/add/en

* http://www.paiddirectory.com/feeds

*   http://www.rssjunky.com/submit.html

*  http://www.rsspodcastdirectory.com/

*  http://www.rssbuffet.com/submit.php

*  http://www.rsstop10.com/directory/rss-submit.php

*  http://www.xmeta.net/users/

*  http://www.security-protection.net/submitrss.php.

*  http://www.realty-feeds.net/submitrss.php

*  http://www.medical-feeds.com/submitrss.php

*  http://www.religious-podcasts.net/submitrss.php

*  http://www.sports-feeds.com/submitrss.ph

*  http://www.political-humor.net/submitrs.php

*  http://www.government-central.com/submitrss.php

*  http://www.educational-feeds.com/submitrss.php

Thanks for visiting us and enjoy free backlink.

Now remove post with label from blogger blog easily.

2011-08-22T19:40:00.000+05:30

Hello friends somebody want to remove post with label but but they did not know how do follow this step.

Follow simple and easy step to solve this problem in blogger blog---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger template.

* Find this below code by scrolling or find with CTRL+F key by copy one line of below code.

<b:includable id='status-message'>
    <b:if cond='data:navMessage'>
    <div class='status-msg-wrap'>
    <div class='status-msg-body'>
    <data:navMessage/>
    </div>
    <div class='status-msg-border'>
    <div class='status-msg-bg'>
    <div class='status-msg-hidden'><data:navMessage/></div>
    </div>
    </div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:includable>

* Now remove above code by below code--->>>

<b:includable id='status-message'>
    <b:if cond='data:navMessage'>
    <div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:includable>

* Now save your blogger template and you are done.