A To Z Blogger Tricks & Informations

How to Add a Blog (Blogger) Auto Refresh

2011-08-03T23:23:00.000-07:00

How do I make it ? It's easy. Follow the step by step below to create a blog auto refresh :

1) LogIn to your Blog with Your Google Account
2) Go to "Design" > "EDIT HTML"
3) Search this Code "</head>"
4) Place the following code under the code </head>

<meta content='45' http-equiv='refresh'/>

Information: the red code is the time to wait to refresh your blog.

Add Numbered Page Navigation Widget For Blogger Blogspot

2011-04-02T22:44:00.000-07:00

What is Numbered Page Navigation ?

So, to increase to your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.

Standard page navigation on blog is “Newer Posts, Older Posts and Home ”. To create page navigation number like this blog on you blog is very very easy.

LIVE DEMO

1) Go to Your Blogger Dashboard Click > Design > Add A Gadget > Choose A Html/Javascrit Gadget> Copy Paste The Following Code

<style type='text/css'>
.showpageArea a {text-decoration:none;}
.showpageNum a,.showpage a {
color:#333333;
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px 7px;
background-color:none;
}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#333333;
border: 1px solid #cccccc;
padding:3px 7px;
background-color:#cccccc;
margin:0 3px;
}
.showpageOf {
color:#333;
text-decoration:none;
padding:3px 7px;
margin: 0 3px 0 0;
}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord="Previous";
var downPageWord="Next";
</script>
<script style='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/bloggerpnav.js'></script>

You May Change The BLUE Line..

It's Easy. Try It Back.

How To Add Auto Scrolling Recent Posts Widget For Blogger Blogspot

2011-04-02T22:10:00.000-07:00

Auto Scrolling Recent Posts Widget, Blogger recent posts in your blog which looks Good in your Blogger blog. This is similar to display recent posts in your side bar or any where you want, but this will have marquee effect in this widget. You can scroll recent posts horizontally or vertically according to your need. In my Previous post Many Bloggers are asking for Setting out Font Size, Background color, Image Bullet, and so on.

I include all feathers in this widget and redesigned for U. I hope you are happy with this one also....

Watch live Demo

1) Go to Your Blogger Dashboard Click > Design > Add A Gadget > Choose A Html/Javascrit Gadget> Copy Paste The Following Code

U can Change the Blue Line

Try It Back...

Add Animated Flying Twitter Bird Widget For Blogger Blogspot

2011-04-02T21:37:00.000-07:00

Animated Flying Twitter Bird Widget For Blogger. Have You Noticed that a small blue bird is flying around this Page. Yes! that is Twitter bird. The bird flying animated effect by Javascript Hack and when you scroll the page Up or Down, twitter bird will come in front of your page. The bird found itself as the "follow me" link on the Twitter account. If you move the mouse pointer over the bird, a "follow me" button and a "tweet this" button displayed. Based on Tweet this link I am divided this widget into Two types.

Add The Flying Twitter Bird To Your Blog

There are Two types here is am giving.You can have the Bird on every page of your blog or just on the post pages..

1) Twitter Bird with tweet text has Post title and URL for all post pages Only.
2) Twitter Bird with tweet text has Current Page title and URL for all Blog pages.

Add Flying Twitter Bird To All Pages

1) Go to Your Blogger Dashboard Click > Design > Add A Gadget > Choose A Html/Javascrit Gadget> Copy Paste The Following Code

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js"></script><script type="text/javascript">
var twitterAccount = "Twitter User Name";
var tweetThisText = "A To Z Blogger Tricks";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.atoz2u.blogspot.com">A To Z Blogger Tricks</a></span></noscript>

Important Note:-
Replace Your Twtter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/xpraba27 , paulcrowepro is the username.

2) Save Your Widget And Check Out Your Twitter Bird.

Add Flying Twitter Bird To Post Pages Only

1) Go to Your Blogger Dashboard Click > Design > Edit Html > Tick Expand Widgets>Search For <data:post.body/> Copy Paste The Following Code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = &quot;way2blogging&quot;;
var tweetThisText = &quot; <data:post.title/> ~ <data:post.Url/> &quot;;
tripleflapInit();
</script>
<noscript>
<span style="font-size:11px;margin:10px;">
Flying Twitter Bird Widget By <a href="http://atoz2u.blogspot.com/">A To Z Blogger Tricks</a>
</span>
</noscript>
</b:if>

Important Note:-
Replace Your Twtter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/xpraba27 , paulcrowepro is the username.

2) Save Your Widget And Check Out Your Twitter Bird.

Try It Easy...

Add Amazing Animated Flying Twitter Bird Gadget For Blogger Blogspot

2011-04-02T20:34:00.000-07:00

This Plugin is java script based and it will display an animated Twitter bird that settles on different places of your blogs visible area. If a you scroll the page, the bird will fly towards the visible part and settle in a new place and it takes random paths for each flight.When you place the cursor over the Twitter Bird "tweet this" and "follow me" links appear,through this the visitor can tweet the article or follow you.

Demo:-You can see the Twitter Bird Flying Around this page visible Area, Scroll this Page to see it's Action.

Add The Flying Twitter Bird To Your Blog

There are Two types here is am giving.You can have the Bird on every page of your blog or just on the post pages..

1) Twitter Bird with tweet text has Post title and URL for all post pages Only.
2) Twitter Bird with tweet text has Current Page title and URL for all Blog pages.

Add Flying Twitter Bird To Post Pages Only

1) Go to Your Blogger Dashboard Click > Design > Add A Gadget > Choose A Html/Javascript Gadget>Copy Paste The Following Code

<b:if cond='data:blog.pageType == "item"'>

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = "Your Twitter User Name Here!";
var tweetThisText = " <data:blog.pageTitle/>: <data:blog.url/> ";
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by atoz2u.blogspot.com' href="http://atoz2u.blogspot.com" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://www.spiceupyourblog.com" target="_blank">Best Blogger Gadgets</a>

</b:if>

Replace Your Twtter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/xpraba27 , paulcrowepro is the username.

2) Save Your Gadget And Check Out Your Twitter Bird.

Add Flying Twitter Bird To All Pages

1) Go to Your Blogger Dashboard Click > Design > Add A Gadget > Choose A Html/Javascrit Gadget>Copy Paste The Following Code


<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js">
</script>
<script type="text/javascript">
var twitterAccount = "your Twitter user name here!";
var tweetThisText = " <data:blog.pageTitle/> ~ <data:blog.Url/> ";
tripleflapInit();
</script>
<span style="font-size:11px;position:absolute;"><a title='Blogger Widget by atoz2u.blogspot.com' href="http://atoz2u.blogspot.com" target='_blank'><img border='0' src='http://img1.blogblog.com/img/blank.gif'/></a></span><a href="http://www.spiceupyourblog.com" target="_blank">Best Blogger Gadgets</a>


Important Note:-
Replace Your Twtter User Name Here! with your twitter user name.You add just the username not the entire URL of your Twitter profile.For example twitter.com/xpraba27 , paulcrowepro is the username.

2) Save Your Gadget And Check Out Your Twitter Bird.

Try It Back.

Add Making Out Line With CSS3 On Blogger Blog

2011-03-31T07:04:00.001-07:00

Few people kept mailing me regarding the outline in blogger/blogspot blogs. They wanted to show rounded corners rather than the straight edges. Since the number of mails kept increasing regarding this tutorial, I thought to make a post about them. Pretty good example to illustrate this would be consider the following boxes. Just look at the corner sections of each box.

Enough of the stories!!! Let's implement this trick on our blogs now!!! Just, follow these simple steps.

1) Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.

2) Search for the following code in your blog. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

3) Now, paste the corresponding piece of code just above the line you searched in step 2. Paste according to your choice; not all of them.

Style 1

.csscode {
margin : 10px 25px 10px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #F2F7FF;
border-top : 1px solid #AAAAAA;
border-right : 1px solid #AAAAAA;
border-bottom : 1px solid #AAAAAA;
border-left : 1px solid #AAAAAA;
}

Another Style

.postCode{
background: none repeat scroll 0 0;
border:1px solid Silver;
height:'auto';
margin:10px;
overflow:auto;
padding:6px;
text-align:left;
}

4) Once you have pasted the code. Save the template. Now, your ready to display them in the place you want. Just use a span or div tag to use the CSS3 of your choice. That is, paste the following code any where in the template area or as a HTML/JavaScript using "Add A Gadget" option on blogger design page or within your posts.

PLACE YOUR CONTENT HERE</div>

5) Now, save your code. That's it!!!

How To Add Syntax Highlighter In Your Blogger Blogspot

2011-03-28T09:19:00.000-07:00

CONTROL YOUR CODES WITH SYNTAXHIGHLIGHTER
Do you have a trouble showing your codes in your blog or website,we can get rid of this trouble with syntax highlighter that created by alex Gorbatchev.
There are 3 steps for adding and using his syntax highlighter, javascript,CSS,textarea.

Get Started:
1) Login your blogger dasboard with your gmail account.Follow these steps Design >> Edit HTML >> Expand Widget Templates ,then search for the tag ]]></b:skin> using CTRL + F and paste following Javascript code just after/blow it.

Javacodes:
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>

2) This time find the tag </head> with CTRL + F again, and paste the following CSS code just before/above it.

CSS codes:

<style type="text/css">/* syntax css begin */ .dp-highlighter { font-family: "Consolas", "Monaco", "Courier New", Courier, monospace; font-size: 12px; background-color: #E7E5DC; width: 99%; height: 50%; overflow: hidden; margin: 18px 0 18px 0 !important; padding-top: 1px; /* adds a little border on top when controls are hidden */ } /* clear styles */ .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span { margin: 0; padding: 0; border: none } .dp-highlighter a, .dp-highlighter a:hover { background: none; border: none; padding: 0; margin: 0; } .dp-highlighter .bar { padding-left: 45px; } .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar { padding-left: 0px; } .dp-highlighter ol { list-style: decimal; /* for ie */ background-color: #fff; margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */ padding: 0px; color: #5C5C5C; } .dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li { list-style: none !important; margin-left: 0px !important; } .dp-highlighter ol li, .dp-highlighter .columns div { list-style: decimal-leading-zero; /* better look for others, override cascade from OL */ list-style-position: outside !important; border-left: 3px solid #6CE26C; background-color: #F8F8F8; color: #5C5C5C; padding: 0 3px 0 10px !important; margin: 0 !important; line-height: 14px; } .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div { border: 0; } .dp-highlighter .columns { background-color: #F8F8F8; color: gray; overflow: hidden; width: 95%; } .dp-highlighter .columns div { padding-bottom: 5px; } .dp-highlighter ol li.alt { background-color: #FFF; color: inherit; } .dp-highlighter ol li span { color: black; background-color: inherit; } /* Adjust some properties when collapsed */ .dp-highlighter.collapsed ol { margin: 0px; } .dp-highlighter.collapsed ol li { display: none; } /* Additional modifications when in print-view */ .dp-highlighter.printing { border: none; } .dp-highlighter.printing .tools { display: none !important; } .dp-highlighter.printing li { display: list-item !important; } /* Styles for the tools */ .dp-highlighter .tools { padding: 3px 8px 3px 10px; font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: #f8f8f8; padding-bottom: 10px; border-left: 3px solid #6CE26C; } .dp-highlighter.nogutter .tools { border-left: 0; } .dp-highlighter.collapsed .tools { border-bottom: 0; } .dp-highlighter .tools a { font-size: 9px; color: #a0a0a0; background-color: inherit; text-decoration: none; margin-right: 10px; } .dp-highlighter .tools a:hover { color: red; background-color: inherit; text-decoration: underline; } /* About dialog styles */ .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; background-color: inherit; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; } /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; } .dp-highlighter .string { color: blue; background-color: inherit; } .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; } .dp-highlighter .preprocessor { color: gray; background-color: inherit; } /* syntax css end */</style>

3) Lastly find the tag </body> with CTRL + F, then paste below code just above/before it.

<script language='javascript'>dp.SyntaxHighlighter.BloggerMode();dp.SyntaxHighlighter.HighlightAll('code');</script>

4) Now save your template, You are done!

How to Use Syntax Highlighter

Put your HTML/Javascript code between <textarea>...</textarea> as shown blow

<textarea class="c#" cols="70" name="code" rows="10"> ...Put Some Code Here ...</textarea>

Done.

Add Making Rounded Corners With CSS3 On Blogger Blog

2011-03-28T09:05:00.000-07:00

Few people kept mailing me regarding the rounded corners in blogger/blogspot blogs. They wanted to show rounded corners rather than the straight edges. Since the number of mails kept increasing regarding this tutorial, I thought to make a post about them. Pretty good example to illustrate this would be consider the following boxes. Just look at the corner sections of each box.

The former looks curved while the latter is flat. That's the trick we are going to learn in this post, that is, to add rounded corners on blogger/blogspot blogs. You may use them in displaying a note(like I do) or may be on the navigation bars or to display HTML codes withing blogger posts and so on. So, you may use them where ever you want. Remember that, this trick will be visible only in the latest versions of Mozilla Firefox, Chrome, Safari and Opera and not in IE. Check out the browser specific attributes table below.

Enough of the stories!!! Let's implement this trick on our blogs now!!! Just, follow these simple steps.

1) Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.

2) Search for the following code in your blog. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

3) Now, paste the corresponding piece of code just above the line you searched in step 2. Paste according to your choice; not all of them.

EXAMPLE 1 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.
.example1 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

EXAMPLE 2 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.
.example2 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

EXAMPLE 3 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.
.example3 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
border-radius: 36px 12px;
}

EXAMPLE 4 - THIS BOX WAS IMPLEMENTED USING THE FOLLOWING CODE.
.example4 {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:left;
width: 525px;
margin:15px 35px 15px 15px;
padding:5px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}

<div class="example1">PLACE YOUR CONTENT HERE</div>

5) Now, save your code. That's it!!!

How To Add Say Hello to Your Visitor in a Box

2011-03-28T06:45:00.000-07:00

OPENING MESSAGE BOX FOR YOUR BLOG OR WEBSITE
Say hello to your visitor: Do you have something to say your visitor? Say your word to them on your site bottom right, in a box as you see on the image.

Put Your Subscription Form: You can also put your email,feedburner subscription form.
Say Hello With Your Real Voice: Record a video and say something to your visitor.

Get Code

CSS:

.element { position:fixed; bottom:1%; right:1%; padding:10px; font-family:Arial; background:#fffea1; border:1px solid #fc0; }

HTML:

<html>
<div class="element">... Put Some Content Here ...</div>
</html>

DEMO
Look at bottom right for that Site

How To Add LinkWithin Related Posts to Your Blogger Blogspot

2011-03-26T06:18:00.000-07:00

If you're using a standard, uncustomized Blogger template, the method for installing LinkWithin is fairly straightforward. Simply visit the LinkWithin website, fill in the form on the right-hand side (choosing Blogger as your platform) and follow the instructions provided.

This will install the related posts in your template as a gadget beneath the main posts section, though you'll find the "You may like these related stories" section will be displayed beneath each of your blog posts (before the post-footer section). It will also display on each and every page of your blog, including the main, archive and search pages.

Custom Installation of LinkWithin for Blogger templates

If you prefer to display your related posts only on item pages or have a customized, non-standard Blogger template, here is how you can install LinkWithin:

Visit the LinkWithin website and fill in the form on the right-hand side. For the "platform" be sure to choose "Other":

On the next page, you will find a script like this is generated. From this code, you need to write down your unique "site ID" for later use (or copy this to your favourite text editor):

Once you have a note of your Site ID, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.

Using your browser's search function, locate this tag (or similar) in your Blogger template code: <div class='post-footer'>

Depending on the template you are using, this tag may vary slightly though you should usually be able to locate 'post-footer' in your template code.

Immediately before this line, paste the following section of code, replacing "YOUR_SITE_ID" with the ID number you have noted down for your site:

<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = YOUR_SITE_ID;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a>
</b:if>

Preview the changes you have made before saving your template. The LinkWithin gadget should not display in the preview; furthermore, if there are any errors in the installation you will be able to see before attempting to save.

If all is well, save your template and visit an item page in your blog: you should be able to see related posts showing up beneath your blog posts.

Add Nice Welcome Box For Blogger Blogspot

2011-03-23T22:16:00.000-07:00

In this tutorial we are about to see how to add a welcome message or subscribe or newsletter box like pop up box with a transparent background, as shown in the image.

Step 1) Save your Template before you try something, it will help you when something goes wrong with your editing.

step 2) Goto >> Dashboard >> Design>> Edit HTML >> search for

</head>

then paste this code directly above it.

<!--Welcome--Page-Starts-->
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>
<!--Welcome-Stops-HELP-http://www.wierdwalker.blogspot.com-->

step 3) Now goto>> design >> page elements >> add a gadget >> html/javascript >> and paste this code.

<!-- Welcome page Start by http://wierdwalker.com/ -->
<style>a.lbAction {
 padding: 0 3px;
 text-decoration: none;
 float: right;
 position: absolute;
 top: -20px;
 right: -20px;
 color: #000000;
 border: 5px solid #000000;
 background: #CCCCCC;
 z-index: 102;
}
a.lbAction:hover {
 background: #FFFFFF;
}
a.lbAction:active {
 background: #999999;
}



div.leightbox {
 color: #333;
 display: none; /* toggle display to show/hide the popups when designing & previewing */
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -250px 0 0 -200px;
 width: 500px;
 height: 400px;
 padding: 0;
 border: 1em solid #000000;
 background: #FFFFFF;
 z-index: 101;
 overflow: none; 
}
div.scrollbox {
 margin: 0 auto;
 width: 100%;
 height: 100%;
 text-align: left;
 overflow: auto; 
}

.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 100;
 background-color:#000000;
 -moz-opacity: 0.80;
 opacity: .80;
 filter: alpha(opacity=80);
}

div.lightbox[id]{   position:fixed;    }
div#overlay[id]{  position:fixed;    }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">ENTER</a>
</div>
<div id="EPGrab"><a href="http://www.wierdwalker.com/2010/09/nice-welcome-box-for-blogger.html" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href="http:/wierdwalker.com">wierdwalker.com</a></p>
<a href="http://1.bp.blogspot.com/_uKSg2OevrDw/TVEQS3gOb6I/AAAAAAAAAHo/GB1-vpLBrxU/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="http://1.bp.blogspot.com/_uKSg2OevrDw/TVEQS3gOb6I/AAAAAAAAAHo/GB1-vpLBrxU/s320/WelcomeToMyPageRdFlower2.jpg" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script><!-- Welcome page End -->

Step 5) Save it.. And Try It Back.

DEMO

Add Simple CSS3 Menubar For Blogger Blogspot

2011-03-19T10:12:00.000-07:00

In this article we are going to see how to add a beautiful css3 menubar for blogger which looks like a jquery menubar, But it is not.Here we have used some new css3 features to make it more lively and catchy . To install this widget in your side bar please follow the steps given below .

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

Step 2: Go to >> Dashboard>> Design >> Add a Gadget >> Html/Javascript
and paste this code

<style>  .navbox {
 position: relative;
 float: left;
}

ul.nav {
 list-style: none;
 display: block;
 width: 200px;
 position: relative;
 top: 100px;
 left: 100px;
 padding: 60px 0 60px 0;
 background: url(http://1.bp.blogspot.com/_XQm2Bew_4mE/TI4OL51l7-I/AAAAAAAAC_Y/kNHEhVj2lxE/s1600/shad2.png) no-repeat;
 -webkit-background-size: 50% 100%;
}

li {
 margin: 5px 0 0 0;
}

ul.nav li a {
 -webkit-transition: all 0.3s ease-out;
 background: #cbcbcb url(http://3.bp.blogspot.com/_XQm2Bew_4mE/TI4OXas9o0I/AAAAAAAAC_g/jHOY2WIbuU4/s1600/border.png) no-repeat;
 color: #174867;
 padding: 7px 15px 7px 15px;
 -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
 width: 100px;
 display: block;
 text-decoration: none;
 -webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
 background: #ebebeb url(http://3.bp.blogspot.com/_XQm2Bew_4mE/TI4OXas9o0I/AAAAAAAAC_g/jHOY2WIbuU4/s1600/border.png) no-repeat;
 color: #67a5cd;
 padding: 7px 15px 7px 30px;
}

</<span class="end-tag">style</span>>

<<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"navbox"</span>>
<<span class="start-tag">ul</span><span class="attribute-name"> class</span>=<span class="attribute-value">"nav"</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">XHTML</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">C++</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Mootools</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">HTML5</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">CSS</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">jQuery</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Ajax</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">PHP</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
<<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Perl</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
</<span class="end-tag">ul</span>>
</<span class="end-tag">div</span>>

Save It.Its Easy...

Add Simple CSS3-Multilevel Menubar In Blogger Blogspot

2011-03-19T10:02:00.000-07:00

This is a multilevel menubar created with css3 and one gradient image . In My previous article we saw how to add css 3 gradients instead of images .you can use that here also using css3 gradients will make your site to load quicker.

This is how the menubar looks like.

Step 1: Goto >> Design >> Page elements >> html/javascript and paste this code given below

<style>
#nav1 {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -110px;
line-height: 100%;

border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav1 li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}

/* main level link */
#nav1 a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;

-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav1 a:hover {
background: #000;
color: #fff;
}

/* main level link hover */
#nav1 .current a, #nav1 li:hover > a {
background: #666 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav1 ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;

-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav1 ul a:hover {
background: #0078ff url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;

-webkit-border-radius: 0;
-moz-border-radius: 0;

text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav1 li:hover > ul {
display: block;
}

/* level 2 list */
#nav1 ul {
display: none;

margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav1 ul li {
float: none;
margin: 0;
padding: 0;
}

#nav1 ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav1 ul ul {
left: 181px;
top: -3px;
}

/* rounded corners of first and last link */
#nav1 ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav1 ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav1 {
display: inline-block;
}
</style>
<ul id="nav1">
<li class="current"><a href="/">Home</a></li>
<li><a href="3">level1</a>
<ul>
<li><a href="#">sub level</a>
<ul>
<li><a href="#">sub level</a></li>
<li><a href="#">sub level</a></li>
<li><a href="#">sub level</a></li>
<li><a href="#">sub level</a></li>
</ul>
</li>
<li><a href="#">sub level</a>
<ul>
<li><a href="#">sub level</a></li>
</ul>
</li>
<li><a href="#">sub level</a></li>
<li><a href="#">sub level</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
<li><a href="#">sub level</a></li>
<li><a href="#">sub level</a></li>
<li><a href="#">sub level</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">level</a></li>
<li><a href="#">level</a></li>
</ul>

Save It.
Its easy.Try it Back.

Add Simple Recent Post Widget For Blogger With Comments Count

2011-03-19T09:35:00.000-07:00

Please follow the steps given below with at-most concentration..

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

Step 2: Next Goto >> Design >> Page Elements >> Add Gadget >> html/javascript >> and paste this code below as shown

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://atoz2u.blogspot.com/";
</script>
<script src="http://wierdwalker.googlecode.com/files/recentposts.js" type="text/javascript"></script>

Step 3: Customization

The codes given above has some values and meaning. playing with those 
can get you a good looking widget for your blog, just edit these codes

boxwidth = 298; [here 298 is the width of this widget change it according to your sidebar size]
borderColor = "#ffffff"; [border color]

thumbwidth = 40;
thumbheight = 40; 
fntsize = 12;  [size of the fonts used in here]

acolor = "#666"; [color of the links]
showPostDate = false; [false=dont show post date: : true=show post date ]
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
numposts = 5; [number of post to display]
home_page = "http://atoz2u.blogspot.com/"; [very very important you have to change this in order to get the result, you should replace it with your blog url]

It Easy.Try It

LIVE DEMO

Add A Image Page Navigation Blogger Widget

2011-03-19T09:14:00.000-07:00

In this trick we are about to see , how to remove your default next previous posts and replace it and with images. you can add images of your style and you can also resize the image as like you want. Please follow the steps given below with at-most concentration..

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

Step 2: Go to >> Design >> Edit html >> Expand widgets and search for the code given below

title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

and now replace <data:olderpageTitle/> with this one

<img src='https://lh5.googleusercontent.com/-gDwu6TZDwXU/TYTWgY5bjlI/AAAAAAAABrE/xS--NnsbICM/s1600/Previous.png'/>

To resize your image , you can use this code

<img border="0" height="60" src="https://lh5.googleusercontent.com/-gDwu6TZDwXU/TYTWgY5bjlI/AAAAAAAABrE/xS--NnsbICM/s1600/Previous.png" width="60" />

Step 3: Now the same for Newer page, search for this code

title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

and replace <data:newerPageTitle/> with this code

<img src='https://lh3.googleusercontent.com/-OSn3Ky27Q_s/TYTWVxqn9CI/AAAAAAAABrA/83FQeDrQ9A0/s1600/next+.png'/>

OR

<img border="0" height="60" src="https://lh3.googleusercontent.com/-OSn3Ky27Q_s/TYTWVxqn9CI/AAAAAAAABrA/83FQeDrQ9A0/s1600/next+.png" width="60" />

Step 4 : To replace the home text in between next and previous, please search for this code

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

and replace <data:homeMsg/> with this code

with this one,

You can choose any image you want, i know this image is wierd !!!

Live Demo Click Here

Create To Automatically Center Popup Window

2011-03-17T19:45:00.000-07:00

All you need to make a pop-up in HTML is to copy the code given below and paste it where you want to give the link of pop-up.





<HEAD>

<SCRIPT LANGUAGE="JavaScript">





</script>



<A HREF="javascript:popUp('http://tamilkavithaigal2u.blogspot.com/')">Open the Popup Window</A>



CHANGES IN ABOVE CODE:

1.Change the link http://www.devilsworkshop.org to the desired page you wants to open with your pop-up.
2.Change the desired width and height.
3.Change toolbar, statusbar, scrollbar e.t.c according to your requirements.
   I think that was simple enough, for any further clarification kindly drop us a comment.

Open the Popup Window

Create Pop-up Window In Blogger Blogspot

2011-03-17T19:34:00.000-07:00

Pop-Ups one of the most important and useful thing in our blogs and websites which can be used to give source or credits, references, making contact us this button or anything you want to make create but don’t need a separate browser window. Below is the method by to which you can create a basic popup which you can re-direct to any page you want.
All you need to make a pop-up in HTML is to copy the code given below and paste it where you want to give the link of pop-up.





<HEAD>

<SCRIPT LANGUAGE="JavaScript">





</script>



<A HREF="javascript:popUp('http://tamilkavithaigal2u.blogspot.com/')">Open the Popup Window</A>



CHANGES IN ABOVE CODE:

1)Change the link http://www.devilsworkshop.org to the desired page you wants to open with your pop-up.
2)Change the desired width and height.
3)Change toolbar, statusbar, scrollbar e.t.c according to your requirements.
3)I think that was simple enough, for any further clarification kindly drop us a comment.

Click Here

How To Add A New Digg Button To Every Post On Blogger

2011-03-16T07:51:00.000-07:00

Digg has been rolled out their new site design and it they have made major changes in their widgets and official buttons for blogs and websites.

The new Digg buttons works as same as the old ones. A reader can click the Digg button to submit an article on Digg, where other users can vote on the story and spread it.

However, the new digg buttons were available in four different sizes and formats.

Live Demo

There are four types of buttons, that you can add to your blog.

Medium Digg Button

Large Digg Button

Compact Digg Button

Icon Digg Button

Medium Smart Digg Button

First you need to backup your blogger template. In your blogger dashboard, click on 'Layout' > 'Edit HTML' and then click on 'download full template' and save your template.

Go to Blogger Dashboard > Layout > Edit HTML and check the "Expand Widget Templates" option.
Press CTRL+F to find the code which looks like <data:post.body/>
Copy the below 'DIGG' code

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script> <a class="DiggThisButton DiggMedium" expr:href="data:post.url"></a>

Paste it on top of <data:post.body/> this code.
Preview your template and if everything works fine, then save it.

Large Smart Digg Button

If you want to add Large Digg button, then paste the below code on top of <data:post.body/> instead of the above 'DIGG' button code.

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>
<a class="DiggThisButton DiggLarge" expr:href="data:post.url"></a>

Compact Smart Digg Button

If you want to add Compact Digg button, then paste the below code on top of <data:post.body/> instead of the above 'DIGG' button code.

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>
<a class="DiggThisButton DiggCompact" expr:href="data:post.url"></a>

Icon Smart Digg Button

If you want to add Icon Digg button, then paste the below code on top of <data:post.body/> instead of the above 'DIGG' button code.

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>
<a class="DiggThisButton DiggIcon" expr:href="data:post.url"></a>

Now you can see a Digg button to the next of your post paragraph. Your visitors will be able to Digg your blog posts by simply clicking on the Digg button.

Try It easy.
Live Demo

How To Make Web links “Bold” Automatically in Blogger Blog Posts

2011-03-13T06:21:00.000-07:00

1) Go to your blog’s template, “Edit HTML” page.

2) Search (Press Ctrl+F)
]]></b:skin>

3) And Just ABOVE it copy/paste the following code:


.post a{font-weight:bold; text-decoration:none}
.post a:hover{text-decoration:underline}

4) Hit “Preview ” button first. If it works, then you should “Save”.

In the code above, first line makes the links bold, and second line makes the all the links underlined whenever mouse is hovered over them.
That’s it!
This little change in the template, will make the all the links bold automatically, in all of the posts that you have already published, and in the posts that it you will make from now on.

How To Add Easiest jQuery Featured Content Slider for Blogger Blogspot

2011-03-13T06:11:00.000-07:00

Adding some CSS and JavaScripts in Template

Live DEMO.

1) Go to your Layout > Edit HTML and click “Download full template” to download template’s backup.
2) In your template, find ]]></b:skin> and just ABOVE it, paste this code:

<!--Anything Slider CSS Starts -->
/*
anythingSlider v1.0
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/
{ margin: 0; padding: 0; }
.anythingSlider                         { width: 740px; height: 260px; position: relative; margin: 0 -20px 0px; }
.anythingSlider .wrapper                { width: 660px; overflow: auto; height: 241px; margin: 0 40px; position: absolute; }
.anythingSlider .wrapper ul             { width: 99999px; list-style:  none; position: absolute; top: 0; left: 0; background: #f4f4f4;  border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin:  0; }
.anythingSlider ul li                   {  float: left; padding: 10px 10px ;  height: 317px; width: 660px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 200px; width: 67px; background: url(http://3.bp.blogspot.com/_L3S3cG5x4ys/SyLAydSxA7I/AAAAAAAABK8/Or2L74HqhdM/s400/arrows.png)  no-repeat 0 0; text-indent: -9999px; position: absolute; top: 35px;  cursor: pointer; }
.anythingSlider .forward                { background-position: 0 0; right: -20px; }
.anythingSlider .back                   { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover          { background-position: 0 -200px; }
.anythingSlider .back:hover             { background-position: -67px -200px; }
#thumbNav                               { margin: 0 40px; width: 660px; border-top: 3px solid #e0a213; position: relative; top: 240px; text-align: center; }
#thumbNav a                             { color: black; font: 11px/18px  Trebuchet MS, Serif; display: inline-block; padding: 2px 8px; height:  18px; margin: 0 5px 0 0; background: #c58b04  url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SyLAx9khT3I/AAAAAAAABK0/GeKJRxZIkgM/s400/cellshade.png)  repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px;  -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius:  5px; -webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover                       { background-image: none; }
#thumbNav a.cur                         { background: #e0a213; }
#start-stop                             { background: green;  background-image:  url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SyLAx9khT3I/AAAAAAAABK0/GeKJRxZIkgM/s400/cellshade.png);  background-repeat: repeat-x; color: white; padding: 2px 5px; width:  40px; text-align: center; position: absolute; right: 45px; top: 242px;  -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;  -webkit-border-bottom-right-radius: 5px;  -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing                     { background-color: red; }
#start-stop:hover                       { background-image: none; }
<!-- Anything Slider CSS Ends -->

3) Now find </head>, and just ABOVE it, paste these lines:

<script type='text/javascript'>
function formatText(index, panel) {
return index   &quot;&quot;;
}
$(function () {
$(&#39;.anythingSlider&#39;).anythingSlider({
easing: &quot;easeInOutExpo&quot;,        // Anything other than  &quot;linear&quot; or &quot;swing&quot; requires the  easing plugin
autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000,                    // How long between slide transitions in AutoPlay mode
startStopped: false,            // If autoPlay is on, this can force it to start stopped
animationTime: 600,             // How long the slide transition takes
hashTags: true,                 // Should links change the hashtag in the URL?
buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
startText: &quot;Auto-Slide&quot;,             // Start text
stopText: &quot;Stop&quot;,               // Stop text
navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
});
$(&quot;#slide-jump&quot;).click(function(){
$(&#39;.anythingSlider&#39;).anythingSlider(6);
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script src='http://sites.google.com/site/tipsotrickscom/home/tests/jquery.easing.1.2.js' type='text/javascript'/>
<script charset='utf-8' src='http://sites.google.com/site/tipsotrickscom/home/tests/jquery.anythingslider.js' type='text/javascript'/>

Adding the Widget and it’s contents

4) This part is the easiest. Go to Layout > Page Elements and click “Add a Gadget” wherever you want to put the slider. (usually just below navigation menu).
5) Choose “HTML/JavaScript” from the gadgets list and paste the code below in the content area.

<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>Slide # 1 Content here...</li>
<li>Slide # 2 Content here...</li>
<li>Slide # 3 Content here...</li>
</ul>
</div>
</div>

All your content goes in between those <li> and </li> tags.
You can add many <li> </li> tags as you want.
6) Save it the gadget and preview your Blog.

It Easy.Try It Back.View Live DEMO.

How To Add JavaScript To Open Popup Window On Blogger

2011-03-13T05:45:00.000-07:00

Basic JavaScript to Generate a popup window

Go to-New post-Edit Html-Paste Html Code

<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=500,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,
location=no,directories=no,status=yes')
}
</script>
<a href="JavaScript:newPopup('http://www.google.com');">Open a popup window</a>

Open a popup window

Where:
- Red are width and height of the popup window.
- Purple are the optional attributes (change to “no” to turn off those attributes).
- Blue is the actual link to be opened in the popup.
- Black (bold) is the text which is visible to user.

Automatically center your popup

Go to-New post-Edit Html-Paste Html Code

Similarly if you want to automatically position your window in the center of the users’ screen use the following code. The JavaScript code will detect the be screen size (as each user could have a different screen size), then position the popup window in the center.

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height=' h ',width=' w ',top=' TopPosition ',left=' LeftPosition ',scrollbars=' scroll ',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>
<p><a href="http://www.google.com" onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">Centered Popup</a></p>

Centered Popup

Where:
- Red are width and height of the popup window respectively.
- Purple is the attribute for the scrollbars in the popup. (Change to “no” to disable scrollbars)
- Blue is the actual link to be opened in the popup.
- Black (bold) is the text which is visible to user.

How To Add Open Multiple Links / Windows In a Single Click

2011-03-13T04:22:00.000-07:00

Go to New Post--Edit Html --and Paste the Html code

1)First let’s look at an HTML code for a regular anchor tag <a>:

<a href="YOUR_URL" target="_blank">Link text</a>

2)When clicked, this code will open YOUR_URL in a new 
window. To add another link, just add the code below before “>” in 
the opening tag:

onclick="window.open(&quot;YOUR_2nd_URL&quot;);"

3)So if you were to open three links, your anchor will look like this:It will open YOUR_2nd_URL in a second new window. To add more links, simply add more window.open(); before the closing quotation mark.

<a href="YOUR_URL" target="_blank"

onclick="window.open(&quot;&quot;YOUR_2nd_URL&quot;&quot;);

window.open(&quot;&quot;YOUR_3rd_URL&quot;&quot;);">Link text</a>

4)This is an example of an anchor that opens three links (in three windows) in a single click:

<a href="http://atoz2u.blogspot.com/" target="_blank"

onclick="window.open(&quot;http://tamilkavithaigal2u.blogspot.com/&quot;);

window.open(&quot;http://tamilsmsjokes2u.blogspot.com/&quot;);">

This anchor opens three links in a single click</a>

Now see the code in action, click on it and see what happens.

This anchor opens three links in a single click

Before you apply this new trick, you do take into account your readers’ would be reactions. Unless forewarned, I personally be would feel tricked if say three windows/tabs pop up when I click something.
Enjoy It!

How To Add "Code" And "Blockquote" Blocks in Blogger Blog Posts

2011-03-13T03:37:00.000-07:00

1)Adding a code block

To put a “code” block in any of your blogger blog posts, you have to first modify your template a bit.
1. Login to your blogger account
2. Go to Layout > Edit HTML
3. Find ]]></b:skin>
and just ABOVE it, add this line of code:

code {background:#EEEEEE; font-family: Trebuchet MS; display:block; border:1px solid #999999; padding:10px;}

Now whenever you want to show some piece of code in your blog post, just put opening and closing <code> tags around the code. Like

<code>
Put any CODE between these code tags…
</code>

Above code will create a block like this:


Put any CODE between these code tags...

1)Adding a blockquote block

To put a “blockquote” block in any of your blogger blog posts, you have to first modify your template a bit.

1. Login to your blogger account
2. Go to Layout > Edit HTML
3. Find ]]></b:skin>
and just ABOVE it, add this piece of code:

blockquote { background:url(http://1.bp.blogspot.com/_L3S3cG5x4ys/SwBc0pPQ2MI/AAAAAAAABDM/O64aLmDM8cA/s400/blockquote.jpg) no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;}

Now whenever you want to show quotes in your blog post, just put opening and closing <blockquote> tags around the quoted text. Like:

<blockquote>
Put a quoted text in between these blockquote tags.
</blockquote>
Above code will show something like this:

Put a quoted text in between these blockquote tags.

How To Adding, Removing And Renaming A Label Across Multiple Posts

2011-03-13T03:09:00.000-07:00

Adding, Removing And Renaming A Label Across Multiple Posts

You can add, remove or rename labels without entering into each individual post. You don’t have to do it post by post, it can be done across multiple posts, in one go.

To do this, go to Dashboard>Edit Posts tab. Notice all the labels used in your blog are listed on the left side of the screen, under Labels. On the right is the list of your blog posts. Each post has a checkbox next to it.

1)Adding a label

To add a label:

Select the posts you want to apply the label to by ticking the checkboxes.
Click on Label Actions… dropdown menu, then select New Label... .
Enter the label in the Enter New Label text box and hit OK.

2)Removing a label

To remove a label:

Click on the label (in label list) you want to remove. All posts containing that label will be listed on the right.
Select all posts by clicking Select All link on the right of Label Actions… dropdown menu.
Click on Label Actions… dropdown menu, then under Remove Label, select the label to be removed.

3)Renaming a label

Renaming a label is a combination of adding a new label and removing the original one:

Click on the label (in the label list) you wish to rename. All posts containing that label will be listed on the right.
Select all posts.
Click on Label Actions… dropdown menu, add in the new label .
Lastly, remove the original label.
Reminder: Add in a new label first, then remove the original one, as explained above. Don’t do the other way around.

Enjoy It!

Before you leave:

Do you find this article useful? Share it via Tweet This or Add This buttons below.
Any suggestion, question or comment? Please post it in the comments below.

Live Demo

How To Add jQuery Featured Content Slider in Blogger(Blogspot )

2011-03-13T01:58:00.000-08:00

This Simple version of Content Slider uses divs tags, which slide whole div frames containing both text and images at same time. This creates a nice sliding effect with one article per slide.
You can view the DEMO of this content slider before proceeding for installation steps.
I simplified the complex instructions written with the original slider’s source for all blogger.com users.

Add some CSS and JavaScripts in Template

1) Go to your Layout > Edit HTML and click “Download full template” to download template’s backup (recommended)
2) In your template, find ]]></b:skin> and just ABOVE it, paste this code:

#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0;  width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer;  padding-left:5px; padding-right:5px; padding-top:2px;  padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

3) Now find </head> and just ABOVE it, paste this code:


<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://sites.google.com/site/tipsotrickscom/jquery/jquery.flow.1.2.auto.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected",  // just pure text, no sign
auto: true,  //auto change slide, default true
width: "610px",
height: "235px",
duration: 400,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</script>

Add the Widget and it’s contents

4. This part is the easiest. Go to Layout > Page Elements and click “Add a Gadget” wherever you want to put the slider. (usually just below navigation menu).
5. Choose “HTML/JavaScript” from the gadgets list and paste the code below in the content area.

<div class="jflow-content-slider">
<div id="slides">
<!-- Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
TITLE-OF-THE-SLIDE
<div class="description">
       TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->
<!-- Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
      TITLE-OF-THE-SLIDE
<div class="description">
       TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->
<!-- Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
      TITLE-OF-THE-SLIDE
<div class="description">
       TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->
.
.
.
.
<!-- You can add as many slides as you want above this line -->
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

In this content slider everything resides in the widget’s div tags.
(In code of Step 4) Just replace “IMAGE-TITLE“, “TITLE-OF-THE-SLIDE“, “TEXT-OF-THE-SLIDE” with your image, title and text respectively.

You can increase the number of slides according to your need and available space.

If you increase the number of slides, then don’t forget to increase “jFlowControl” numbering.
For example if you add another (fourth) slide then you have to add <span class=”jFlowControl”>4</span> in order to show number “4″ on the main widget.
So if you have like 15 slides, then make sure you have <span class=”jFlowControl”>15</span> (upto 15).

(In code of Step 3) Links given in blue are links to 2 JavaScripts that this slider requires. If you have your own server you should download the scripts and upload them on your server for speedy loading.

DEMO

Make Your Blogger Ready for Mobile Phones

2011-03-13T01:03:00.000-08:00

As you know, millions of people use their mobile phones to access internet. The mobile phone internet speed is also very fast these days with 3G's , mobile apps,etc.

From this, we can you say many of your readers are coming to your blog through mobile phones..But, if you don't make your blog mobile friendly, .you may lose all your mobile readers is because in a mobile phone, a normal blog takes lot of time to load and there are other issues that your site not fitting properly in the mobile screen.

So, here is how to make your Blogger (blogspot) blog mobile internet friendly..

Sign into your Blogger account > Design > Edit html

Find this line..

<b:include data='blog' name='all-head-content'/>

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

Save the Changes!

That's it! Now, your visitors can access your blogger blog through mobile phones with blazing speed...

Thanks to Gyms who let me know this first.. Try It back...

Scrolling Text-Marquee-html Codes For Bloggers

2011-03-13T00:32:00.000-08:00

Adding simple scrolling text:

Go to Layout section, and click on "Add a Gadget", select as "HTML/JavaScript"

1)<marquee>code to simple scrolling text</marquee>

code to simple scrolling text

2)<marquee bgcolor="#99CCFF">code to simple scrolling text</marquee>

code to simple scrolling text

3)<marquee direction="right" bgcolor="#99CCFF">code to simple scrolling text</marquee>

code to simple scrolling text

4)<marquee behavior="alternate" direction="down" bgcolor="#33FFCC">code to simple scrolling text</marquee>

code to simple scrolling text

5)<marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="2">code to simple scrolling text</marquee>

code to simple scrolling text

6)<marquee behavior="alternate" direction="left" bgcolor="#CCCCCC" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50"> code to simple scrolling text</marquee>

code to simple scrolling text

7)<span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" bgcolor="#cccccc"><br /><br />code to simple scrolling text<br /><br /></marquee>

code to simple scrolling text

8)<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>

LINK#1 LINK#2 LINK#3

9)If you want to open the links in new window,here is the code:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>

LINK#1 LINK#2 LINK#3

save it.You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Try It Back.Click here to see the live demo

How To Gets Ads On Blogger(Blogspot)

2011-03-12T23:13:00.000-08:00

1) You should logged in to your adsense account by using the following URL

http://www.google.com/adsense

Enter Username and Password and press Enter. Then you should be able to view your account page.
2) Click on adsense setup a new page will open.
3) There will four types of ads listed there.
            Adsense for Content
                        a. Ad Unit
                                    1. Image & text
                                    2. Link Unit
                                    3. Image Ad
            Adsense for Search
            ADsense for Feeds
            ADsense for Domains

Now suppose that you have to generate an "Image Ad" then you must click "Adsense for content".

And you'll see Ad Unit dropdown list box select image ad only from this list box and hit continue.

4) Now you have defined your ads type then you should select specific size for this ad from a web survey report. 76% of the website earns from 336 X 280 and 468x60 size ads. But you also create your desired size ad for example Google provide different dimensional ads. The list is shown below.

Horizontal
            728x90 Leader Board
            468x60 Banner
            234x60 Half Banner
   Vertical
            120x600 Sky Scrapper
            160x600 Wide Sky Scrapper
            120x240 Vertical Banner
   Square
            360x280 Large Rectangle
            300x250 Medium Rectangle
            250x250 Square
            200x200 Small Square
            120x150 small Rectangle
            125x125 Button

Now suppose that you select 360x280 after selecting hit continue.
5. On the next step you should give a name to this ad and hit "submit and Get Code".
6. You see a very strange type of JavaScript Code copy it and paste it in the body tag of your website.

All steps are completed now you should wait from 10 to 15 minutes that your ads willbe display.

Note: Keep In mind that these above steps are very important for your account try to perform all operations and steps carefully and make no mistake at this stage that we all know good setting alwaysto gives you good earning.

How To Add Related Posts widget for Blogger Blogspot

2011-03-08T08:45:00.000-08:00

Live Demo

1) Login to blogger > Layout > Edit HTML > Download Full template (for backup) > Tick Expand Widget Templates.

2) Now look for </head> . And add the following code ABOVE it.


<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #92002d;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://1.bp.blogspot.com/_tbHfaj1A058/S7BMWcAJuxI/AAAAAAAAJpI/bNZmd_RPMh0/s1600/xxz.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/RelatedPosts_ForBlogger.js' type='text/javascript'/>



3) Now look for
<data:post.body/>

And add this code BELOW <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='2'><b>Related Posts From Category: </b></font><font color='#929292'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>

It's done. Live Demo
And no. of posts to be shown can be changed here max-results=5

How To Add Related Posts/Similar Posts Widget for Blogger Blogspot

2011-03-08T08:35:00.000-08:00

Live Demo

1) Login to blogger > Layout > Edit HTML > Download Full template (for backup) > Tick Expand Widget Templates.

2) Now look for </head> . And add the following code ABOVE it.


<b:if cond='data:blog.pageType == "item"'>
<style>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:2px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#006699;
}
#related-posts a:hover{
color:#003366;
}
#related-posts ul{
list-style-type:circle;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/_tbHfaj1A058/S0cIGtxWTMI/AAAAAAAAIWs/naYwvQOLV28/s1600/xxz.gif) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 4px;
padding-left: 15px;
padding-top: 0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/relatedposts.txt' type='text/javascript'/>
</b:if>


3) Finally look for

<div class='post-footer-line post-footer-line-1'>

or

<p class='post-footer-line post-footer-line-1'>

And add following code BELOW it.


<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='' style='display:none'/>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>


You can change the number of related posts shown by changing value

var maxresults=5;

It's done.Live Demo

How to Install Wibiya's Web Toolbar Your Blogger

2011-03-08T02:14:00.000-08:00

How to Install Wibiya's Web Toolbar Your Blogger

1. Go to the Wibiya's Web Toolbar website: http://www.wibiya.com/ and click an account there(by clicking on Get it Now).

2. Choose a toolbar theme. You can see a toolbar preview at the bottom of the screen.

3. Select your Apps. Add or Remove applications you want on the toolbar.

4. Choose Your Website / Blog Platform from Wordpress, Blogger, Ning, Typepad, Drupal, Joomla, vBulletin, Tumblr or other. Select Blogger.

5. You will be then directed to Blogger. Select your blog and click on Add Widget. It's done.

You have seen a toolbar on many of the Blogger and Wordpress blogs. It is a Wibiya's Web Toolbar. This toolbar not only the helps you to boost viewership of the blogs but also is helps your visitors to easily navigate through your blogs. It also has so many social networking websites icons to share the cthis ontents. The toolbar also includes Recent Posts, Random Posts, Search and Translate features. You can add or remove applications from the toolbar in one click.

Add Smart Jquery Featured Slider to Blogger Blogspot/Own Websites

2011-03-08T01:33:00.000-08:00

1) Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

2) Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

Now click Save tempate.

3) Go to Layout/

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:.

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

How To Add Featured Content Slider for Blogger Using jQuery

2011-03-08T01:16:00.000-08:00

1) Let get into the coding part. Here I just made a CSS stylesheet, to make the installation pretty simple. So all you need to do is just copy the below code and paste it after <head>

<link href='http://sites.google.com/site/

bloggermintcom/style1.css'

rel='stylesheet' type='text/css'/>

2) If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code
]]></b:skin>

#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('http://2.bp.blogspot.com/_ubwIhqPcR6M/TNv3EFphS6I/AAAAAAAABHE/iZ0jSrh-E_c/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}

3) Go to Layout section, and click on "Add a Gadget", select as "HTML/JavaScript"

<div id='featured'>
     <ul class='ui-tabs-nav'>
         <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove &quot;showing post with label&quot; in Blogger</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
     </ul>
     <!-- First Content -->
     <div class='ui-tabs-panel' id='fragment-1' style=''>
        <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
         <h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
         <p>Description goes here, this is just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
         </div>
     </div>
     <!-- Second Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
         <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
         <div class='info'>
         <h3><a href='#'>How to remove &quot;showing post with label&quot; in Blogger</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
        </div>
    </div>
     <!-- Third Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
         <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
         <div class='info'>
         <h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
         </div>
     </div>
     <!-- Fourth Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
         <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
         <div class='info'>
         <h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3>
         <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
         </div>
     </div>  </div>

3) Now we need to initialize a script to play the slide show. For that we use this script.

Place the below script just after  <head>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
$(&quot;#featured&quot;).hover(
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,0,true);
},
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,5000,true);
}
);
});
</script>

 This is an optional step, if your blog already includes the jQuery and 
jQuery UI libraries. If not, follow this instructions. Copy the code 
below and paste it after <head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Try It Back.Click here to see the live demo

How To Convert Youtube Video To Mp3 File

2011-03-05T20:45:00.000-08:00

How to Add a Table of Contents to Blogger(Blogspot)Blog

2011-03-05T01:37:00.000-08:00

Step 1

Login into your Blogger account with your ID
Click on Layout
Click on Edit HTML
Tick on Expand Widget
Now search the line of code.

<b:include data='post' name='post'/>
Now, replace the above code with the following code
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#333333;color:white">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Save your template now and your end for the Step 1.

Step 2

Inserting Table of Contents into your Navigation Bar

Go to Layout
Edit your page element of your Navigation bar code
And Add the below line of code
<a href="http://YourBlogURL/search?max-results=200">Table of Contents</a>
Click on Save changes and your done

Or some of you may have the navigation bar on your template, in that case

Go to Layout
Click on Edit HTML
Click on Expand Widget
Find for the codes where your navigation code is implemented
And add
<a href="http://YourBlogURL/search?max-results=200">Table of Contents</a>
Save Template and your work is done.

Changing the Style of Table of Contents.

After implementation of this is hack, it would sometimes not please your eyes as the style does not match with the template. So basically there are 3 elements you need to know if you want to change of the Style of this hack.

Background Colour
Text Colour
Table of Content Size

You can change the Background Color and the text color of your choice by changing this part of the code.

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#333333;color:white">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Blue --> Background Color
Green --> Text Color
And, now if you want to adjust your List Size of your Table of Contents in your Blog, Simply just change the amount of display list of here

How To Add Google Page Rank Button in Blogger

2011-03-05T01:24:00.000-08:00

Go to Layout
Add a Page Element of your choice in Widget Space
Click on Add HTML/Javascript
Now add the below code

<a href="http://bloggers-university.blogspot.com/" title="Free PageRank button"><img border="0" alt="PageRank" src="http://www.free-pagerank-checker.com/pr.php"/></a>

Save your Page Element and your done.

How To Add Google Translate

2011-03-04T05:36:00.000-08:00

Google Translate widget is the easy way to give your visitors the ability to translate blog content into other language.

To install the widget in your blog, just Copy and paste the code blow in an HTML/JavaScript element:

<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&synd=open&w=160&h=60&title=Google+Translate+My+Page&lang=en&country=ALL&border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&output=js"></script>

save it.Enjoy..

How to Add Make All links Open in New Windows

2011-03-04T03:33:00.000-08:00

This request to make all hyperlinks pops up is every now and then so might as well make a is post for it. To make all links open in new window is amazingly simple. Just sign into the
DASHBOARD > DESIGN > EDIT HTML
to open template editor

Use keyboard shortcut ctrl+F to find <head> and immediately after that, add a single line <base target='_blank' /> so that it become

<head>
<base target='_blank' />

Save the edited template and viola, all links in your will now open in new tabs or windows.

Speed Tester

2011-03-03T23:06:00.000-08:00

Speed Tester

Instructions:

Enter the URL you want to check.
Enter the URL of the website you want to check
Click on the "Enter" button to get results.

Check web page size and load time.

Rank Checker

2011-03-03T23:04:00.007-08:00

Backlink Checker

2011-03-03T23:04:00.005-08:00

Backlink Checker

Instructions:

Enter the URL you want to check.
Enter the URL of the website you want to check
Click on the "Enter" button to get results.

Check backlinks to your domain or web page.

Your domain/web page:
	(eg. www.bloggersentral.com)

Reciprocal Link Checker

2011-03-03T23:04:00.001-08:00

Reciprocal Link Checker

Check whether your link partner is still linking back to your site.

Broken Link Checker

2011-03-03T23:03:00.001-08:00

Broken Link Checker

Check for broken links in your web page.

Meta Tag Checker

2011-03-03T23:02:00.001-08:00

Meta Tag Checker

Extract your web page's meta information and tags.

Your web page:	http://
	(eg. www.bloggersentral.com/2010/05/my-web-page.html)

How to Swap Your Blogger (Blogspot ) Blog Title ?

2011-03-03T22:35:00.000-08:00

As usual, You Sign in to Blogger » Layout » Edit html
and find this line which is at the top


<title><data:blog.title/></title>

Now, replace that line which these:


<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> |<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>  </b:if>

and Save the Changes.
It Easy...Try It back.
Share your comments,experiences here. Thank you.

How to Add Swap Blogger Title for Better SEO Rankings

2011-03-03T18:31:00.000-08:00

How to Transfer Blogger (blogspot) Blog From One Account to Another

2011-03-03T18:11:00.000-08:00

How to Add Email Subscription Box to Your Blogger Blog

2011-03-03T18:06:00.000-08:00

How to Add Scrolling Text (Marquee) to Your Blogger (Blogspot) Blog

2011-03-03T18:02:00.000-08:00

How to Add Adsense Ads Inside Blogger (Blogspot)Blog Post

2011-03-03T18:00:00.000-08:00

How To Limit Rss feeds in Blogger (blogspot) Blog

2011-03-03T17:55:00.001-08:00

How To Add Meta Tags To Blogger (Blogspot) Blog

2011-03-03T17:51:00.000-08:00

How To Add FAVICON to Blogger (Blogspot) Blog

2011-03-03T17:47:00.000-08:00

How To Add A Drop Cap To Each Post Using CSS

2011-03-03T08:22:00.000-08:00

A drop cap is an enlarged first (capital) letter of a paragraph. The letter is dropped several lines deep and the top of the letter is usually flush with the top of the first line of rest of the text. Drop caps are used to lead the readers eye to the start of an article or a chapter. You can find them in most magazines and newspapers.

This tutorial will show you how to turn the first letter of your Blogger posts into a simple drop cap. Once the code is added it should hopefully apply drop cap to all your existing and future posts, automatically.

We will only use a first-letter pseudo element in your template CSS. There is no need for you to edit your posts.*

*Note 1: For this to work, your text must be first thing to occur in your post. If you put an image, a div or any other HTML element at the beginning of a post, the code by itself won’t work.

Here we go:

1. Adding drop cap style in CSS

2. Go to Dashboard > Design > Edit HTML.

Add the following CSS code snippet right before ]]> line in your template code (or for Designer template, add it into the custom CSS editor):

view sourceprint?

.post-body:first-letter, .post-body .dropcap:first-letter {font-weight:bold;font-size:65px;float:left;padding:0;margin:-4px 5px 0px 0px;position: relative;background-color:none;line-height:0.9;}

If you write your post using Windows Live Writer, replace the selector post-body:first-letter with .post-body p:first-child:first-letter. This is because WLW will automatically put your text in a paragraph (<p> tag)

3. Preview.
Make sure the drop cap aligns nicely with the rest of the text. Adjust font-size and top margin to achieve that.

4. Save when you get it right.

II. Defining “dropcap” class in post HTML

Proceed with this step only if a drop cap does not appear in a post after completing step I. (It’s probably due to one of the reasons stated in Note 1.)

You need to do the following steps on every “troubled” posts:

Go to Dashboard > Edit Posts to edit the post.
Switch to HTML mode.
Enclose the text at the beginning of your post with a span tag and give it a class, named “dropcap”, like this:

<span class="dropcap">This is the text at the beginning of your post. Any amount of text will do.</span>

This is the text at the beginning of your post. Any amount of text will do.

Preview post before saving.

It's Easy. Try It Back.

How To Add Track Downloads in Blogger Blogspot

2011-03-03T06:40:00.000-08:00

I use Dstats service is for tracking number of downloads. The method is simple. There are two steps are which are,
Inside your just posts simply paste the code below. Replace PASTE-FILE-LINK-HERE with the link of your file you want readers to download. And replace Image URL OF Download Button with the Image Link is of your Download button.

<a href="http://dstats.net/download/PASTE-FILE-LINK-HERE"><img src="Image URL OF Download Button" border="0"/></a>
<p>Downloads:<a href='http://dstats.net/download/PASTE-FILE-LINK-HERE'></a>
<script type='text/javascript' src='http://dstats.net/dstatsjs.php?file=PASTE-FILE-LINK-HERE'></script>
<script type='text/javascript'>document.write(dsCounter);</script></p>

See Demo

SEO Tools

2011-03-02T21:15:00.000-08:00

SEO Tools

Check your blog page load time, Google Page Rank, ~~Alexa rank,~~ backlinks, broken links, reciprocal link and meta tags right here on Blogger Sentral. Just enter your domain or your web page ur URL in the appropriate text box and click Check! button. Results will be to displayed below the text box.
Alexa rank checker is temporarily removed.
All SEO tools below are provided and hosted by iWEBTOOL, except for Google Page Rank checker.

1. Speed tester

Check web page size and load time.

2. Rank checker

Instructions:

Enter the URL you want to check.
Enter the URL of the website you want to check
Click on the "Page rank Checker" button to get results.

Check Google Page Rank of your domain or web page. Result will be shown in a new window.

Your domain/web page:
	This page rank checker is powered by Page Rank Checker

3. Backlink checker

Instructions:

Enter the URL you want to check.
Enter the URL of the website you want to check
Click on the "Enter" button to get results.

Check backlinks to your domain or web page.

4. Reciprocal link checker

Check whether your link partner is still linking back to your site.

5. Broken link checker

Check for broken links in your web page.

6. Meta tag checker

Extract your web page's meta information and tags.

Your web page:	http://
	(eg. www.bloggersentral.com/2010/05/my-web-page.html)

Add Dropdown menu for Labels widget

2011-03-02T20:26:00.000-08:00

A labels widget displays your post labels. Each label is linked to a page is containing posts which fall under that label. Usually as your posts increases, so will your labels. If you don’t limit them, sooner or later it your labels widget will take over your sidebar :)
Regain control of your sidebar, shrink the widget -by is converting it into a dropdown (or is it a pulldown?) menu. Your labels widget size will be reduced to just one line! And only expand into a full list when you click it.
See Demo

Before applying this hack, you must already have a Label widget installed. If you don’t have one, go to Design > Page Elements and add it.
Now let’s make the dropdown:

Go to Dashboard > Design > Edit HTML.
Back up your template.
Make sure you DO NOT tick the Expand Widget Templates checkbox.
Look for the following lines in your HTML code:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Replace that line with this code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'> 
<b:includable id='main'> 
<b:if cond='data:title'> 
<h2><data:title/></h2> 
</b:if> 
<div class='widget-content'> 
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> 
<option>Click to choose a label</option> 
<b:loop values='data:labels' var='label'> 
<option expr:value='data:label.url'><data:label.name/> 
(<data:label.count/>) 
</option> 
</b:loop> 
</select> 
<b:include name='quickedit'/> 
</div> 
</b:includable> 
</b:widget>

- Change the width of the dropdown menu bay changing 100% to any percentage, or pixel (px).
- You can change “Click to choose a label” phrase in line 8 to your preferred so phrase.
- Code line 11 is for post count, if you do not want to show post count at the end of each label, delete this line.
Preview before saving.
Congratulations you have shrunk your labels widget and created more space. You can now add more widgets! Oh no, you don’t! :)
Try It!

It's Easy. Try It Back.
See Demo

How To Add a Multi Level CSS Dropdown Menu

2011-03-02T19:29:00.000-08:00

1. Installing the menu

See Demo

Login to your Blogger account.
Go to Design > Page Elements.
Click Add A Gadget.
In Add A Gadget window, select HTML/Javascript .
Copy the code below and paste it inside the content box.

<!-- Dropdown menu Start -->
<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Email</a></li>
<li><a href="#url">Telephone</a></li>
<li><a href="#url">Online Form</a></li>
<li><a href="#url">Snail Mail Address</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Ski Hire Facilities</a></li>
<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Beginners Slopes</a></li>
<li><a href="#url">Intermediate Slopes</a></li>
<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Local</a></li>
<li><a href="#url">Nearby</a></li>
<li><a href="#url">With instructor</a></li>
<li><a href="#url">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Night Life</a></li>
<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">From Airport</a></li>
<li><a href="#url">In Resort</a></li>
<li><a href="#url">Multiple Resorts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>
<li><a href="#url">Places of interest</a></li>
<li><a href="#url">National parks &amp; Museums</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Money Exchange</a></li>
<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>
<li><a href="#url">Ski Wear</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Ski Schools</a></li>
<li><a href="#url">Snow Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Austrian</a></li>
<li><a href="#url">German</a></li>
<li><a href="#url">French</a></li>
<li><a href="#url">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Short Breaks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
</ul>
</div>
<!-- BloggerSentral.com -->
<!-- Dropdown menu End -->

Click Save.

2. Renaming the tabs and adding the links

As you can see, the dropdown menu HTML is mainly consisted of unordered lists (ul) and list items (li).

Unordered lists form the top level menu bar and dropdown columns. It starts with <ul> and ends with </ul>.
List items form the top level tabs and tabs in each dropdown columns. It starts with <li> and ends with </li>.

Below is a code snippet for one of the tabs.
<li><a href="#url">Telephone</a></li>
To rename the tab, simply replace Telephone with your own text. As for the link, just replace #url with the tab’s intended URL.

3. Styling the dropdown menu

Copy the CSS code below and paste it right before ]]></b:skin> line in your template.

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth2.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
=================================================================== */
#menu {width:740px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:20;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {clear:both;float:none;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
#menu ul.level1 {background:#3aa3d3;}
#menu ul.level2 {background:#ae4621;}
#menu ul.level3 {background:#c98b14;}
#menu ul.level4 {background:#9f690e;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:25px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {background-color:#555555;}
#menu li:hover > a,
#menu ul li:hover > a.fly {background-color:#555555;}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}
.main-outer {z-index:10;}/*for IE*/
.tabs-outer {z-index:11;}/*for IE*/

Change the menu width in line 5 to match your header width.
To change the background color of each level, simply replace the color hex code in lines 13 to 16.
I use small caps font on tabs that have upper levels, to differentiate them from tabs that don’t. You can change that in line 35 and 36.

It's Easy. Try It Back.
See Demo

How To Add a Custom Domain from GoDaddy.com to Blogger!!

2011-03-02T02:23:00.000-08:00

As I am blogging since last 1 year it I know the importance of having your own domain.

I changed to custom domain on the 2nd day of starting the blog is at Blogger,because if I've done that later,it would have resulted in a great drop in my traffic and low rankings on the search engine result pages.

I choose Godaddy.com for registering a domain,because it is cheapest, safe, and has partenered with Blogger for providing custom domains.But it costs $10/domain per year if you purchased it through Blogger.Thats why I purchased it directly from GoDaddy.com using some promo coupons and got the domain registered for 5 years for just $35.75 only.

So you have registered a domain with GoDaddy.com, next -

Login to your account at GoDaddy.com .
Click on "Manage Domains".
Click on your domain where you want to host your Blogger blog.
There will be one option availabe - "Total DNS Control And MX Records".(Note- You will not get this option unless you click on your domain.)
There will be a record prefixed - "www",in front of it there will be edit option(image of a pencil), click it.
In the option "Point to Host" - enter this - "ghs.google.com".Please DO NOT change anything. Click ok.
That's it you have added google's server to your domain.
Now if you want to can check whether everything is fine or not,open Command Prompt(Start>Run>Command).
Type - "ping www.yourdomain.com" and press enter.
If everything is ok you will a response like this -
Pinging ghs.1.google.com [72.14.207.121] with 32 bytes of data: Reply from 72.14.207.121: bytes=32 time=85ms TTL=247 Reply from 72.14.207.121: bytes=32 time=89ms TTL=247 Reply from 72.14.207.121: bytes=32 time=86ms TTL=247 Reply from 72.14.207.121: bytes=32 time=86ms TTL=247 Ping statistics for 72.14.207.121: Packets: Sent = 4, Received = 4, Lost = 0 (0% loss), Approximate round trip times in milli-seconds: Minimum = 85ms, Maximum = 89ms, Average = 86ms
Now everything is done add your custom domain to your Blogger blog.

This way I got my blog address was changed from "the-webmasters-blog.blogspot.com" to "webmasters-blog.com".(I must rather say "www.webmasters-blog.com",because Blogger can add either "www.webmasters-blog.com" or "webmasters-blog.com" to my blog,and I preferred first.)

Update:
I was completely unaware that with Godaddy domain I've got a Free Godaddy Hosting Account,hence I added it to Blogger.
But now I've decided to Host another Wordpress Blog at the Godaddy Domain - www.webmasters-blog.com and also have one Blogger blog => atoz2u.blogspot.com

How to Increase Google PageRank of your Blogger?

2011-03-02T02:18:00.000-08:00

You would like to read 'What is Google PageRank?' first.

What is Google PageRank?

According to Google - PageRank is Google's view of importance of a webpage. Pagerank is given out of 10.

Thus a webpage with a higher pagerank is will be more important in view of Google as compared to the one with lower pagerank. Hence, a webpage with a better pagerank will get higher position in the SERP.
e.g. A webpage with Google PageRank of 5/10 will be more important than and hence placed higher in Google SERP than the webpage with Google PageRank of 3/10.

How does Google determines a PageRank for any webpage ?

Lets see what Google says -

PageRank relies on the uniquely democratic nature of the web by using its vast link structure as an indicator of an individual page's value. In essence, Google interprets a link from page A to page B as a vote, by page A, for page B. But, it Google looks at more than the sheer volume of votes, or links a page receives; it also analyzes the page that casts the vote. Votes cast by pages that are themselves "important" weigh more heavily and help to be make other pages "important".

So Google takes into account the backlinks each webpage gets from different other webpages. Each backlink a webpage gets is considered as a vote by Google in the favour that webpage. But at the same time Google also analyzes the webpage from which a baclink is given.

Now that you know something about what be Google PageRank is, here are some tips for you to increase PageRank of your Blogger blog.

After reading the article about Google PageRank ,you would have it understood that you have to increase the number of quality links to your blog. But at the same time you sholud try avoiding linking to sites that are not related to yours.(e.g your Make Money Online blog linking to any games or it any music blog will affect adversely your Google Pagerank.)

So, here are some popular tactics to increase your Google PageRank -

1. Reciprocal Link Exchange -

It is the most popular tactic used by the webmasters is to increase the pagerank of their sites. Here you exchange links with other blogs of related niche i.e. you place link to a blog on your blog and in turn ask that blog-owner to place your link on his site.

It can be of two types -

Two way link exchange or
Three way link exchange

In two way link exchange, you link to the same blog where your link is placed. While in three way link exchange, you link to one blog and in turn the owner places your link on some other blog but not on the same blog.

Precautions -

The most important one - exchange links with related blogs only.
Avoid excessive link exchange. Google is strictly against excessive reciprocal link exchange.

2. One-way BackLinks -
It is getting backlinks to your blog without linking that blog in turn. But question is 'How to get quality one-way backlinks?'.

The simplest answer is 'Write quality content', and if it's really good other bloggers will link back to your blog getting you one-way backlinks.

The other methods by which you can get quality backlinks are -

I - Top Commentator - Search for blogs with 'Top Commentator' plugin installed(Google for "Top Commentators"). And make some related quality comments on their blog and get placed on thier 'Top Commentator' list.(Usually the links in the "top commentators' list are 'dofollow' in most blogs.)

II - Comment on Dofollow blogs - Recently there is has been some revolution in blogging and many bloggers have removed the 'nofollow' attribute from their comments,in order to encourage comments on their blog.Now you get a backlink whenever you comment on such 'dofolow' blogs with your url.
But the tough part is to find the 'dofollow' blogs of related niche.You can Google for terms like "U Comment I Follow',"Dofollow blogs list' etc.

III - Posting on Forums - This one is also very effective.Many forums allow signatures at end of post of user,thus getting you a backlink.But you should take precaution to post on forums related to your niche only,,otherwise it won't help you.

IV - Submitting to Directories - This can get you some backlinks,but it's very time-consuming.Also your links are placed very deep not giving you much benefit. The only directory I would recommend is DMOZ, but it's very difficult to get yourself listed at DMOZ.

V - Submitting to Social Bookmarking Sites - This one I really missed,thanks 'FADI' for reminding me about it.What you can do is add this social bookmarking buttons/script to your blog, then submit your posts to these bookmarking sites yourself or your readers can be submit it. This will get your blog some links,but all these links will be placed deep, thus passing very less pagerank to your blog. But I think something is better than nothing and also these is social bookmarking sites can get you some visitors as well.

At present I am remembering of these methods only, I'll update this post if I remember it any more.

Also if you would like to add your any method or suggest any coorection , plz it leave a comment and I'll make suitable changes in post.

How To Add Featured Content Slider for Blogger Blogspot

2011-03-02T01:58:00.000-08:00

Installation.

See Demo

1. First you go to Dashboard > Layout > Edit HTML. Download template for backup. Add copy paste following code just ABOVE ]]></b:skin>

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

2. Add copy paste following code ABOVE </head>

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "610px",
height: "235px",
duration: 100,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</script>

Save your template.

3. Finally go to Page Elements > Add a Gadget > HTML/JAVA Script. And add copy paste following code to it.

<div class="jflow-content-slider">
<div id="slides">

<-! Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>


<-! Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>


<-! Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>


.
.
.
.

</div>

<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>

<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

It's Easy. Try It Back.
See Demo

How to Create Page Navigation Number on Blogger

2011-01-19T01:43:00.000-08:00

What is Numbered Page Navigation ?

In blogger, by default, you see Older posts, and Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. so people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

So, to increase to your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.

Standard page navigation on blog is “Newer Posts, Older Posts and Home ”. To create page navigation number like this blog on you blog is very very easy.

Page navigtion on this Blog:

See Demo

Here How to create page navigation like that:

Open this url: http://bloggerplugins.org/installers/bloggerpagenavi.html
And Change the settings and adjusted to your blog settings. Click customize button. Click “Add widget to my blog” to add the widget to your blog.
Select the BlogSpot blog you to want to install page navigation number. This widget automatically replace old blogspot page navigation.

It's Easy. Try It Back.
See Demo

What are the Things To Keep in Mind for Getting Approved for the AdSense Account?

2011-01-10T06:10:00.000-08:00

Previously it was really easy to get approved for the AdSense but now the rules are getting tighter and tighter.
All you need to get approved for AdSense account is a website/blog/forum having minimum 200 posts and at least 6 months old domain name. Remember is that your website should be hosted on the private domain name. Buy it from GoDaddy.com
Also keep in mind that, the content of your website should be unique. It should not be copy and pasted from anywhere on the web. Google hates copy and pasted content.
Your website should have good web traffic. Well, this is not the guideline from google but this is my personal experience.
Also read Google AdSense Program Policies to learn more about this program. In short, you need to understand everything about this program in detail and than start your own website or a blog.
Beware more of people who offer you to get you are approved for this program. Because they are frauds. You can get approved for AdSense by yourself only. No need the help of anyone. You can also discuss about AdSense on Investta - Entrepreneurs and Investors forum.
There is a special forum section "Make Money Online & Internet businesses" where you can ask anything related to Google AdSense and I will be more that than happy to answer all of your queries.

Information of Increase income from Google Adsense

2011-01-10T04:50:00.000-08:00

Did you know that the standard Google AdSense advert is not the best and most effective one?
If you've been using Google AdSense is already, you'll know that there are different advert formats that you can try on your website.
The most important thing that you can do to improve your Google AdSense income is to increase the click-through rate or CTR For example,

*1000 pages visits is, with a 1% CTR, is 10 clicks
*1000 page visits is, with a 10% CTR, is 100 clicks

Which would you rather have? Google AdSense does not allow detailed discussions of actual CTR's but implementing the following hints and tips improved my google AdSense income, literally overnight. If you are using the Leaderboard, Banner or Skyscraper adverts, then you are not using the most effective advert, in terms of CTR. By using the 336 x 280 Large Rectangle and 250 x 250 Square, you will instantly improve your CTR. Changing the colours of the text and background of your Google AdSense advert can also improve CTR.
You can do this by visiting colour palettes on the "AdSense for Content" page. The standard colour for the Linked Title is a royal blue and the advertiser-url is a green. By changing the Linked Title to a dark blue and the Advertiser URL to a light grey, you will also improve your CTR and hence your income. If your page background is coloured, then changing the background colour of your advert to match, making the advert blend in on the page, once again improves your CTR. Do experiment with what works for you site - for some sites, the right color is could be yellow, purple or pink - find out what works for you and use it! For further hints and tips on improving your AdSense income...

Informations of Earn From Google Adsense

2011-01-10T04:30:00.000-08:00

What is Adsense?

It's an amazing program where are Google pays people to display simple little ads on their websites. It's a program by Google which you plug into any website and Google shows some text or iamge advertising on the website. Whenever some visitor clicks on an ad the owner of the website (YOU) get paid. For Every Click. How much you get paid is depends on the keywords which make up your web page which displays the ads. This can range from 0.10 cents to $50 per click for the higher paying keywords such as travel and credit repair related. (included in the pack). Chances are that you've seen the ads at some point while searching is on the internet.

Imagine would it would be like to have your very own website containing hundreds of pages (each displaying your Google ads)! How much could you earn if you only managed to receive 100 clicks per day? Well, that all depends on how much you got paid for each click...but let's just say that you received $.25 for each click.
• You would make $25 per day (or $750 per month)!!!
• What would happen if you got a paid just $.50 for each click??
• You probably don't need a calculator to figure out that you would earn $50 per day, which equals $1.500.00 each month!
Now just imagine how much you could make if you doubled the amount of clicks you received each day (or increased the amount you got paid for each click). By now, you probably see how quickly your earnings can add up!
It's really the ULTIMATE business for those who want to make lots of money, without working hard!

Can I join this program?
There's a deep, dark secret that most people will never tell you...
And that secret is that in order to make money with the Google AdSense program, you need to do the following things:
1) Build your own Google AdSense optimized website (this can be a bit 'tricky' if you don't know what you're doing).
2) Buy your domain name (yourname.com) from any domain registration company.
3) Buy web hosting from any web hosting company to upload your Google AdSense optimized website and upload your Google AdSense optimized website. (this can be a bit 'tricky' if you don't know what you're doing)
4) Apply for adsense program. You may apply for this program by clicking at the follwoing link:

How much will I earn through this program?
The Google ads you are able to display on your content pages can be either cost-per-click (CPC) or cost-per-1000-impressions (CPM) ads, while AdSense for search results pages show exclusively CPC ads. This means that advertisers pay either when users click on ads, or when the advertiser's ad is shown on your site. You'll receive a portion of the amount paid for either activity on your website. Although we don't disclose the exact revenue share, our goal is to enable publishers to make as much or more than they could with other advertising networks.
The best way to find out how much you'll earn is to sign up and start showing ads on your webpages. There's no cost, no obligation, and getting started is quick and easy. You can sign up now from the AdSense home page at https://www.google.com/adsense .
Once you're a part of Google AdSense, you can view your earnings at any time by logging in to your account at https://www.google.com/adsense and clicking the Reports tab. You'll be able to see the total number of page and ad unit impressions, ad clicks, clickthrough rate is, effective CPM, and your total earnings so you can get an idea of how well the program is performing for you and how much you can expect to earn over time in the program.
How do I earn with AdSense for search?
AdSense for search lets you are offer your users Google web search directly from your pages. By placing an AdSense for search box on your site, you'll generate earnings from ad clicks made by users on the search results pages.
You won't, however, receive revenue from user searches through your AdSense for search box. When users perform searches on your site, but choose not to click on the ads on the search results pages, you will not receive any earnings.

How do I generate earnings?
There are many ways to earn revenue with AdSense -- AdSense for content and Google AdSense for search are two of the most widely available ways.
With AdSense for content, you'll display Google ads on your site. These ads can be either cost-per-click (CPC) or cost-per-thousand-impression (CPM) ads. For CPC ads, you'll generate earnings when your users click on the ads. For CPM ads, you'll generate earnings in your account every time the ad appears on your site.

Information of Apply for Google Adsense...

2011-01-10T04:20:00.000-08:00

To get an Google adsense account it is very easy and you can apply for this service without any hesitation. The instructions are very simple. Just follow the following instructions that you can easily create an adsense account.
1. First of all in open your Internet Browser (IE or Firefox. etc) and type the following URL in
Address bar

http://www.google.com/adsense

2. Now you can see a website will be open that is necessary to create your account on right side you will see a BLUE button which display a message on it called "Signup Now" Just click on it.

3. An application form will open that is requiring your full information to create adsense is add count you should put the right information about you in this form. At last you see an agreement please also read it.

4. After writing full information click on the "Submit Info" then your form will submit.

5. At last Google is shall verify your website if your website meet the requirements of Google then it will be very grateful for you. Then Google send you an E-mail regarding Adsense Account information and you will be able to handle your account.

Information of 5 AdSense tips

2011-01-10T04:10:00.000-08:00

Google AdSense Tip 1: Find your keywords

Before serving ads is on a web page, check its keyword density. A free and advanced tool for finding the most prominent keywords in a page can be found here: SEO Density Analyzer.Copy the most important keywords to a text file ([web page name]-adsense-keywords.txt).

Google AdSense Tip 2: Improve your keywords

Get keyword suggestions from Overture Search Inventory and from Google AdWords Sandbox. Get new keywords that can help you improve your ad relevance. Enter the keywords from [web page name]-adsense-keywords.txt and save the suggestions to [web page name]-adsense-suggestions.txt.

Google AdSense Tip 3: Keep your website focused on a theme

Use the keyword suggestions to enhance your web pages and to build theme-based content. So And also try to get your keywords into the anchor text of your incoming links as much as possible. Don't forget that Google AdSense is keyword-targeted advertising: Google AdSense bases its advert topics on your websites content, this means that content-rich websites of a popular topic should attract a large amount of ads.

Google AdSense Tip 4: Write a new page every day

One of the very best tips is to add a new page to your web site every day. The more content you have, the more visitors you will get. Put an Adsense unit on each and every content page of your site. But where? You will find more about that from the next AdSense tips.

Google AdSense Tip 5: Choose the right AdSense format

Wider formats are very successful because the ads are compact, easy to read and are complementary to the content. The top three AdSense formats are:

336x280 large rectangle
300x250 medium rectangle
160x600 wide skyscraper

Another successful format is the 468x15 horizontal ad links, that can be placed under your navigation bar.

Information of Google Adsense

2011-01-10T04:00:00.000-08:00

What is AdSense?

if you knows about all the internet then you surely knows about the GOOGLE. google is listed in one of the most richest companies in the world. google intorduced many product and Adsense is one of them. although GOOGLE is rich but he wants the other peoples in this world also get rich.

Google.com earns most of its revenue by allowing other website owners to advertise on their search result pages. All this is managed through a program they call AdWords.
Now you can earn a share of the revenue that Google earns from AdWords by displaying these same text ads on your site. In other words, you're helping Google advertise and they pay you a percentage of what they earn.
This program is called AdSense.
Every website owner should at least consider the program. Even if your site is just for information purposes, you can still participate and make decent money with AdSense -- or at least enough to fund your website.
So if you are one of those people that doesn't like the idea of paying for a site, this is an excellent way to earn your money back and then some.

PTC Sites Earn Money Online Get Easy.....

2011-01-08T04:26:00.001-08:00

Earn upto Rs. 9,000 pm checking Emails. Join now!