Blogger How To | Blogspot How To | How to Add Widgets-Gadgets in Blogger

Another Best Social Bookmarking Widget To Add in Blogger

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Mon, 25 Oct 2010 18:19:00 +0000

Today i am going to add on more social bookmarking widget in our blogger widgets tally. In the series of Best Social Bookmarking Widget for Blogger, lets add one more fascinating social bookmarking widget which will change look and feel of your blog.

To Add this widget in your blog you need to add only 3 things and that are HTML, CSS and jQuery. You need to simply hover over the social media icons too see the beautiful effect of the widget which uses jQuery for the animation.

Steps to Add Social Bookmarking Widget in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.

#Step 2. Copy below code and paste it just before the ]]></b:skin> code.

/* SOCIAL ICONS - GENERAL */

.social { list-style:none; margin:30px auto; width:464px; }

.social li { display:inline; float:left; background-repeat:no-repeat; }

.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }

.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;

text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);

-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

}

li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidUw3wosGSmfEkCOgQDXT3EXTO_BOgdnbozK1LlamZ5s4ia1jytAZ6_bTGfRBG0tywabJoyzlLZVSb2guQR7AgWsnFySAfeP-oVuPjdoh58244d7r8sQIMYDKDkBNYinEJZjSlMnZ8Sn4y/s1600/delicious.png")

; }

li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibk43EX48YIDQC9ozKlSFKTKqNx7laMzqD7ra7MQQQ97aZ4b7xcEEYFAKu4h29bxTjplcflrCy7ZHxIkr19A8OXFa_F94loUg0mDsMhMi7oUtxQU4zv8nem53X6-u1rfFhAXL1M_Oz5xvd/s1600/digg.png"); }

li.facebook {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdUL5wpv4qKFpWErvvBFAKdPJmeQdUTBJOXsfx3wqCuyEnVEfFyHTliihLOWVIzfF-TYysrBWHP-uaGo0pUx5eDfFFdRSJZdZF-TK7xvlRe_ncNV8NJbLegmas5qjb4si6Hbv-keaphdw/s1600/facebook.png"); }

li.flickr {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKotaqmpKhOCO94mCgE_HlTdVVT6pb5TtNmSIKHrVQO5ex2i2SVSFUVRsV3w7n7uO3pW3cKsBJuiAhJXmWeCeICoPsAZQUoDaenWI3FG_2GDakzQotT4BurdSHZCeIqkBxDviVLUp0H1e3/s1600/flickr.png"); }

li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ex6s2a9UKD9CbpIaV8slurkLWq_42j0z0ogu1OnCz-cBoAmwlaNUqwE_cNuDoNW7pMEqwyX3i2a53qlQstpvE6Aai7JGz5HwlTYyMEFpAf9BynyePcz-kvDySonH0t_bt4artjG2UsAx/s1600/linkedin.png"); }

li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqeAn3tAU_iE2pfOivd2kk-lHQAgUBG9_JYMS_rO27J9Byywzo2nEe2iVl9yTBWbbnxJQAP0eqcTGDVQMUutLyBGB7Xsl52RBLKUOQUfTpmiQcxlCsFGFm7o1MpRiA0m8H1wJoVUmmRmJs/s1600/reddit.png"); }

li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTT9kv8Fv8mkBcNNDOspDX-Dkysa8kb9ji2bPy5mQXQQxM76cJ2MOxdZ1uA5zY2wJDSW44SSnIYgCZgCvKLolyFu9CXfIrNXDYWNsUj9dJJaVecDjdmhuAbfJqu4tkZajXadE2a2pAri8F/s1600/rss.png"); }

li.twitter {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWB1PUSdf-u1e9Y9nmntRcpXRqrdFLyZFHHVQGSbKk3oI-THDsUMTnYf_z2DS078v3h_DeP3_cnHMfIsyuLGejYaBxXDRcIC7Y_J363Z2w1YOmCnJd2g2nbuL0cp2KdT1hBvRJgRzTlqYT/s1600/twitter.png");}

#Step 3. Copy below code and paste it just before the </head> tag. ( No need to add

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

&lt;script type='text/JavaScript'&gt;

$(document).ready(function()

{

// Hide all the tooltips

$(&amp;quot;#jquery li&amp;quot;).each(function() {

$(&amp;quot;a strong&amp;quot;, this).css(&amp;quot;opacity&amp;quot;, &amp;quot;0&amp;quot;);

});



$(&amp;quot;#jquery li&amp;quot;).hover(function() { // Mouse over

$(this)

.stop().fadeTo(500, 1)

.siblings().stop().fadeTo(500, 0.2);



$(&amp;quot;a strong&amp;quot;, this)

.stop()

.animate({

opacity: 1,

top: &amp;quot;-10px&amp;quot;

}, 300);



}, function() { // Mouse out

$(this)

.stop().fadeTo(500, 1)

.siblings().stop().fadeTo(500, 1);



$(&amp;quot;a strong&amp;quot;, this)

.stop()

.animate({

opacity: 0,

top: &amp;quot;-1px&amp;quot;

}, 300);

});

});

&lt;/script&gt;

- No Need to add jQuery in above code (first line in above code) if you are already using it.

#Step 4. Now Save the template and navigate to Design > Page Element.

- Click on Add a Gadget where ever you want to put your social bookmark icons and choose HTML/JavaScript.

- Paste the below code in the HTML/JavaScript Gadget and save the template.

<ul class='social' id='jquery'>

<li class='delicious' style='opacity: 1;'><a href='http://www.delicious.com/'>

<strong style='opacity:0; top: -1px;'>Delicious</strong></a></li>

<li class='digg' style='opacity: 1;'><a href='http://digg.com/'><strong style='opacity:0;'>Digg</strong></a></li>

<li class='facebook' style='opacity: 1;'><a href='http://www.facebook.com/'><strong style='opacity:0;'>Facebook</strong></a></li>

<li class='flickr' style='opacity: 1;'><a href='http://www.flickr.com/'><strong style='opacity:0;'>Flickr</strong></a></li>

<li class='linkedin' style='opacity: 1;'><a href='http://www.linkedin.com/'><strong style='opacity:0;'>LinkedIn</strong></a> </li>

<li class='reddit' style='opacity: 1;'><a href='http://www.reddit.com/'><strong style='opacity:0;'>Reddit</strong></a></li>

<li class='rss' style='opacity: 1;'><a href='http://feeds.feedburner.com/BestHowToBlogger'><strong style='opacity:0;'>RSS</strong></a></li>

<li class='twitter' style='opacity: 1;'><a href='http://twitter.com/'><strong style='opacity:0;'>Twitter</strong></a></li>

</ul>

#Step 5. Finally Save template and done!.

If you need any help please Leave a response.

Use Free Online Mobile Emulator to Preview your Blog

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Fri, 22 Oct 2010 18:56:00 +0000

Here is a list of free Online Mobile Emulators you can use to Preview your website or blogger blogs online. After getting the comment from vorobushek on How to Make Blogger Blogs Mobile Phone Compatible asking about "Is there any way to preview how the blog will look
in a mobile device?".

I thought yes i know the answer and i have started writing this post which will guide you how you can preview your blog posts online by using some online mobile emulators. Using Free Mobile Emulator you can use to view mobile websites, An Online Mobile Phone Emulators like Opera Mini mobile phone emulator, dlade emulator and mtld emulators will work for us. Lets see the list of the online mobile phone emulators and test the blog, whether its working or not.
- You can use any one of the online mobile browser emulator from below given list.

How to use Opera Mini Online browser to preview your blog.

Step 1. Just Open above first link and Enter the URL of your blog and click Go button.

Step 2. Zoom the page content and see how your blog will look like in the mobile browsers.

Step 3. you can search things from the blog also, find below image which is a demo from my other blog Geek Blogger

- So i think now you have understood how to preview your blog in mobile browsers. Don't let down your mobile readers too and optimize your blog for mobile users also. I am searching for the best tips to display blog post in mobile browsers. keep connected to learn more....

If you need any help please Leave a response.

Add Slider Notification Widget in Blogger - SlideNote

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Thu, 21 Oct 2010 19:36:00 +0000

SlideNote is a jQuery Plugin to Display Sliding Notifications in your blogger blogs and websites etc. Displaying sliding notification Notes as a Widget on your blog is a great way to showcase the stuff which you think your readers should notice. You might have noticed that many popular blogs are having that kind of sliding notifications area visible as you scroll the page towards the bottom of the page, and it goes invisible when you are at the top of the page.

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. SlideNote is compatible with jQuery 1.4.3 and current versions of major browsers. IE8 is the only version of Internet Explorer that is officially supported. I have tried to make it available for blogger users as a gadget, lets move ahead and see how we can add this wonderful widget in your blog.

Steps to Add Slider Notification Widget in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.

#Step 2. Include SlideNote in the header of your page. Make sure it is included after jQuery.

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

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

<script src="https://sites.google.com/site/bloggerhowto/blogger-how-to/jquery.slidenote.min.js" type="text/javascript"></script>

#Step 3. Copy below code and paste it just
before the ]]></b:skin>.

/* ----- BloggerHowToTips.Blogspot.com CSS START------ */

.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em; 

-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}

.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }

.slidenote img:hover { margin-top: -1.95em; }

/* ----- BloggerHowToTips.Blogspot.com CSS END------ */

#Step 4. Now Copy below code and paste it just before the </body> tag.

<!-- Notification Slider Start -->

<div class='slidenote' id='note'>

<div id='container'>

<h2>Blogger How to Tips</h2>

<span><em>Get All Blogger and Blogspot Related Tips !!! :) </em></span>

<p>Visit now : <a href='http://bloggerhowtotips.blogspot.com/'>http://bloggerhowtotips.blogspot.com/</a> and learn ... <br/><a href='http://bloggerhowtotips.blogspot.com/'>Blogger How To</a> | <a 

href='http://bloggerhowtotips.blogspot.com/'>Blogspot How To</a></p>

</div>

</div>

<script type='text/javascript'>

$(&#39;#note&#39;).slideNote({ 

closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVb5hYWH9SunhtIYHWWIaT7rEG3yBVyhaCVfJWqPvWwy3TWUKhfhbCLC__2QQe3nb56ne3cj5femWXH4U5SKFdZHhETEX4zotOmfwlXMRDLcEbdF15e5QlMO6yMzCRxh0VnRyhwVxuEsU7/s1600/slidenote.close.png&#39;

});

</script>

<!-- Notification Slider Ends -->

#Step 5. Save Template and done!. You can change the value of CSS classes as per your need. Scroll down the page to the bottom of the page and you will see the notification.

Download the full plugin including the un-minified source code, demo page, README, and sample stylesheet : http://slidenote.info/download/jquery.slidenote.zip

SlideNote Options

SlideNote offers a set of five options that allow you to modify the behavior and/or content of the script.

where specifies how far down the user must scroll before the notification slides into view.
corner controls from which side of the screen the notification will slide in.
URL tells SlideNote from where to pull the data to use as the content of the notification. If no container is specified, then the entire page will be used.
container is to be used in conjunction with URL. When specified, it will only pull content from the element having the specified ID from the specified URL.
closeImage displays the image at the specified URL. When clicked, it will slide the note out of view. The note will not display until the next time the user scrolls passed the where value.

If you need any help please Leave a response.

Google Adsense Requirements to Approve an Adsense Account

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Mon, 18 Oct 2010 19:07:00 +0000

To get into Google AdSense is a very tough job for the newbies who desperately want to Approve their Google Adsense account. If you are one of them, you also might be searching for how to approve Google Adsense account. But prior to applying for the Adsense account you should know some Google AdSense Requirements so that you can target those areas and increase the chances of Approving your account.

First of all you must have a full launched website (older then 6 months if you are from India or china), and I recommend you to add as many pages as you can and generate huge traffic to maximize your income. Read following guidelines and make your self aware of Google AdSense Requirements and Policies.

Google Adsense Requirements to Approve your Adsense Account

Payee/Contact Name :- You must be able to receive checks made payable to the name on your AdSense application, AdSense applications with incomplete names won't be approved.

Address :- Only AdSense applications with valid mailing addresses will be approved. Please provide your complete address including as much of the information listed below as is available for your location.

Street Address (including house number, street name/number, flat/apartment number)
City / Town
State / Area
Zip Code
Country / Territory

Email Address :- The email address you enter will be the login you use to sign in to AdSense.

Under Construction/Difficult Site Navigation :- In order to be approved, your website must be launched and contain enough textual content for google specialists to evaluate. Websites that are under construction, don't load, or have non-functioning links, will not be approved. Please ensure that the URL on your application is entered correctly.

Site Ownership :- You must have access to edit the HTML source code of the website you submit for AdSense. If you submit a site you don't own (for example, www.google.com), you won't be able to place the AdSense code on the site and your application will not be approved.

In some locations, including China and India, Google also require publishers to have owned their sites for 6 months.

Unsupported Language :- Unfortunately, AdSense is not yet available for all languages. If the primary language of your website doesn't match with the Googles list of supported languages, They will be unable to approve your application.

Other Disapproval Reasons :- For a complete list of requirements for a successful AdSense application, please read our program policies in detail.

Key areas which you should concentrate on while applying for an Adsense account.

Don't click on your own ads.
Don't ask others to click on your ads.
Don't include any prohibited site content, including adult content, violence or excessive profanity, drugs (including alcohol and tobacco), or copyrighted material.
Don't modify the AdSense code.
Do follow Webmaster Quality Guidelines.
Do provide a good user experience.
Don't place more than 3 ad units, 3 link units, and 2 search boxes on any page.
Don't place images near ads in a way that may mislead users into thinking that the images are associated with the ads.

- To know more read Google AdSense Program Policies

If you need any help please Leave a response.

How to Add Page Peel / Flip Effect in Blogger using JavaScript and CSS

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Mon, 20 Sep 2010 08:38:00 +0000

You might have seen the page flip effect on many professional websites and blogs. Today we will see how you can add page peel / flip effect in blogger using little bit of JavaScript and CSS.

This post will help you to get the same effect on your Blog which cane be used to display any advertisements, RSS feeds or whatever you want and link it too.

Steps to Add Page Peel/Flip Effect in Blogger using JavaScript

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.

#Step 2. Copy below code and paste it just before the </head> tag.

<style type="text/css">

img { behavior: url(iepngfix.htc) }

#pageflip {

position: relative;

right: 0; top: 0;

float: right;

}

#pageflip img {

width: 50px; height: 52px;

z-index: 99;

position: absolute;

right: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

#pageflip .msg_block {

width: 50px; height: 50px;

overflow: hidden;

position: absolute;

right: 0; top: 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFmdEMPvNFaE9wfhyiABqXMvFj6EixGE2e4ysaohIVlGy4X_e7U5CxgHMYzlARkXbbHxeHHgKiWNx4vd8p6BW6SKGXlPJBvUO7T5w3dXWnpb9rkNe9vrfZvd4f4-Gwa-XERymxdGiNEm7/s1600-r/Bogger+How+To+Tips.png) no-repeat right top;

}

</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>

<script type='text/javascript'>

$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {

$(&quot;#pageflip img , .msg_block&quot;).stop()

.animate({

width: &#39;307px&#39;,

height: &#39;319px&#39;

}, 500);

} , function() {

$(&quot;#pageflip img&quot;).stop()

.animate({

width: &#39;50px&#39;,

height: &#39;52px&#39;

}, 220);

$(&quot;.msg_block&quot;).stop()

.animate({

width: &#39;50px&#39;,

height: &#39;50px&#39;

}, 200);

});

});

</script>

- Note: You can change the image url as per your need.

#Step 3. Copy below code and paste it just after the <body> tag.

<div id='pageflip'>

<a href='http://feeds2.feedburner.com/widgetblogger'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlwqQ6yUs0jMaJPZZGcjQtWbCvj7AoNaHJGfRTLltEIcKaDKD1ygxPflsgAifpGZ8PePzxu2z2TgRSeWGsi3ODvA7zY8vyBqTEy3IttqXKnqkySx9-wPeGgUkE_NJaTNFKhAm4sjschJk9/s1600/page_flip.png'/></a>

<div class='msg_block'></div>

</div>

#Step 4. Save template and done!.

If you need any help please Leave a response.

Best RSS Feed Subscription Widget to Add in Blogger

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sun, 19 Sep 2010 15:45:00 +0000

Here is a Best RSS Feed Subscription Widget for you to Add in your Blogspot blogs. Almost every blogger is using RSS feed Subscription widget in their blogs, to create a powerful way of communicate with the blog readers. Feed burner is already providing inbuilt RSS Feed Subscription widget called "Subscribe to our RSS Feed ". But our RSS widget is something different then other ordinary widgets, because it is made of jQuery and using animated Popup Bubble effect.

With this widget you can ceate a jQuery Popup Bubble rss subscription icon which will help you to increase your blogs look and feel. If you are eager to add this widget in your blog then don't think about how to add this cool popup bubble RSS feed Subscription widget in our blog. you can add it with little bit of JavaScript, HTML and CSS code.

OR
Steps to Add Bubble RSS Feed Subscription Widget in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML and Check the Expand Widget Templates Check box.

#Step 2. Find this code : <title><data:blog.pageTitle/></title>
and Replace it with this code

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

<script src='http://www.ibizeye.com/demo/RSSbubble/jquery.js' type='text/javascript'/>

<script src='http://www.ibizeye.com/demo/RSSbubble/tooltip.js ' type='text/javascript'/>

#Step 3. Find this code: ]]></b:skin> and replace it with this code:

.rss-popup {

margin: 100px auto;

padding: 0;

width: 100px;

position: relative;

}

div.rss-popup em {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6IYG7CfL-S7CWVZBRdWX0BgW_EJayqAUBavR02Fv9zQrPxWsVzj6TY2eKtB9LpcnghEHwTl3E4rCB0RvnZeDPfhojquK39QvYH1EJKw7QQpt-Y0I69-J8N-uVZ15KGVoi5_oQjrfa6Lc/s400/bubble.png) no-repeat;

width: 100px;

height: 49px;

position: absolute;

top: -70px;

left: -0px;

text-align: center;

text-indent: -9999px;

z-index: 2;

display: none;

}

#rss-icon {

width: 42px;

height: 42px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi71lwT33soJ2mZppQl-OqiSjbbt4XqV8Ag0AqA76TBISZB5HaR4Ehi9Gy7-vEF8KdrNJokCftE8LiIlScW7YpWKKZdQsdLyWTM-sl5LqjEr2giBcufy8ba5XZ72-sl61HKJQKXH7rhp70/s400/icon.png) no-repeat 0 0;

text-indent: -9999px;

margin: 0 auto;

display: block;

}

]]></b:skin>

#Step 4. Now navigate to Design > Page Element.

- Now click on Add a Gadget and choose HTML/JavaScript. Paste the code given below and save it.(Change the feed-link with your RSS feed URL).

<div class="rss-popup">

<a href="feed-link" id="rss-icon">RSS Feed</a>

<em>Subscribe to our RSS Feed</em>

</div>

#Step 5. Click on Save button and done!.

If you need any help please Leave a response.

Thanks to Digital Vision Team for making this RSS Subscription widget.

How to Add Vertical HTML+CSS Menu Widget in Blogger

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sun, 19 Sep 2010 14:16:00 +0000

After giving tutorial on "How to Add Menu Widget in Blogger - Horizontal menus", today we will see how you can add Vertical CSS Menus in your Blogger or Blogspot Blogs. we have a different 17 types of vertical CSS Menus which you can integrate in your blog.

This tutorial is also very easy to understand and after reading this post you will be able to integrate Vertical CSS Menus in your Blog. All Menus given here are customizable and free to use and Download. Vertical CSS menus work perfectly as a sidebar navigation solution for your blog.

Vertical Menus are specially for the bloggers who have the kind of Blog design where they can easily set the Vertical menus in their Sidebar as a Widget and hence can improve the look and feel of the blog as well. Here is a list of 17 Vertical menus and i will give you the demo and download link for all of them. Now what you need to do is just picked up the one you liked most and download it first. Below is a Complete list of Vertical menus.

Below Menus are from the Above image and menu numbers are 1 to 17 respectively.

1. Orange Pumpkin: Demo | Download Source
2. Olive Arrow: Demo | Download Source
3. Sky Arrow: Demo | Download Source
4. Dark Bubble: Demo | Download Source
5. Aqua Bubble: Demo | Download Source
6. Bittbox Black: Demo | Download Source
7. Massive Blue: Demo | Download Source
8. White Ghost: Demo | Download Source
9. Grey Hat: Demo | Download Source
10. Aqua Bubble Wrap: Demo | Download Source
11. Red Bubble Wrap: Demo | Download Source
12. Blue Bubble Wrap: Demo | Download Source
13. Grey Bubble Wrap: Demo | Download Source
14. Orange Bubble Wrap: Demo | Download Source
15. Lime Bubble Wrap: Demo | Download Source
16. Pink Bubble Wrap: Demo | Download Source
17. Purple Bubble Wrap: Demo | Download Source

- Select Any one menu from the above given list and download the .zip file which should contain HTML file, Images and CSS files for the menu.

- To Proceed further in the demo i have choosen 1. Orange Pumpkin menu and will guide you how to set the menu in your blog.

3 Mandatory things you must have before going ahead.

HTML File - Contains the code of the menu
Images folder - Contains Images used in menu
CSS file - Contains Style used in menu

Steps to Add Drop Down Menu Widget in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Page Element.

#Step 2. Click on Add a Gadget > HTML/JavaScript link and insert the following type of code (You will get it from Downloaded HTML file) and click Save button.

<div class="menu bubplastic vertical purple">

<ul>

<li><span class="menu_r"><a href="http://bloggerhowtotips.blogspot.com/"><span class="menu_ar">Blogger Tips</span></a></span></li>

<li class="highlight"><span class="menu_r"><a href="http://bloggerhowtotips.blogspot.com/"><span class="menu_ar">Blogger Widgets</span></a></span></li>

<li><span class="menu_r"><a href="http://bloggerhowtotips.blogspot.com/"><span class="menu_ar">Blogger How TO</span></a></span></li>

<li><span class="menu_r"><a href="http://bloggerhowtotips.blogspot.com/"><span class="menu_ar">Blogspot How TO</span></a></span></li>

</ul>

<br class="clearit" />

</div>

#Step 3. Now Drag & Drop that Widget to the left side of the Blog Posts Section.

How to Add CSS for Menu:

#Step 4. Now Navigate to Design > Edit HTML Section.

- Find this type of code ]]></b:skin> and replace it with this type of CSS Code (You will get the .css file in your downloaded folder) :

.clearit {

margin: 0;

padding: 0;

height: 0;

clear: both;

}

/* BUBBLE PLASTIC HORIZONTAL MENU */

.bubplastic.horizontal {

width: 100%;

height: 27px;

margin: 0;

padding: 0;

background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;

}

.bubplastic.horizontal ul {

list-style: none;

margin: 0;

padding: 0;

}

.bubplastic.horizontal ul li {

float: left;

margin: 0;

padding: 0;

background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;

}

.bubplastic.horizontal ul li a {

display: block;

height: 27px;

padding-left: 35px;

float: left;

text-transform: uppercase;

font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;

font-size: 70%;

color: #FFFFFF;

text-decoration: none;

}

.bubplastic.horizontal ul li a span.menu_ar {

display: block;

float: left;

height: 22px;

padding-top: 5px;

padding-right: 35px;

background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;

cursor: pointer;

}

/* END BUBBLE PLASTIC HORIZONTAL MENU */

/* BUBBLE PLASTIC VERTICAL MENU */

.bubplastic.vertical {

width: 125px;

margin: 0px;

padding: 0px;

display: block;

}

.bubplastic.vertical ul {

display: block;

list-style: none;

margin: 0;

padding: 0;

}

.bubplastic.vertical ul li {

display: block;

float: left;

width: 100%;

margin: 0;

padding: 0;

background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;

}

.bubplastic.vertical ul li a {

display: block;

margin: 0;

width: 100%;

padding-left: 35px;

text-transform: uppercase;

font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;

font-size: 70%;

color: #FFFFFF;

text-decoration: none;

background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;

}

.bubplastic.vertical ul li a span.menu_ar {

display: block;

margin: 0;

width: 100%;

height: 22px;

padding-top: 5px;

padding-right: 35px;

background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;

cursor: pointer;

}

/* END BUBBLE PLASTIC VERTICAL MENU */

/* AQUA HOVER */

.bubplastic.aqua ul li a:hover,

.bubplastic.aqua ul li.highlight a {

background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat;

}

.bubplastic.aqua ul li a:hover span.menu_ar,

.bubplastic.aqua ul li.highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat;

}

/* BLUE HOVER */

.bubplastic.blue ul li a:hover,

.bubplastic.blue ul li.highlight a {

background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;

}

.bubplastic.blue ul li a:hover span.menu_ar,

.bubplastic.blue ul li.highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;

}

/* GRAY HOVER */

.bubplastic.gray ul li a:hover,

.bubplastic.gray ul li.highlight a {

background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;

}

.bubplastic.gray ul li a:hover span.menu_ar,

.bubplastic.gray ul li.highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;

}

/* LIME HOVER */

.bubplastic.lime ul li a:hover,

.bubplastic.lime ul li.highlight a {

background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat;

}

.bubplastic.lime ul li a:hover span.menu_ar,

.bubplastic.lime ul li.highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat;

}

/* ORANGE HOVER */

.bubplastic.orange ul li a:hover,

.bubplastic.orange ul li.highlight a {

background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat;

}

.bubplastic.orange ul li a:hover span.menu_ar,

.bubplastic.orange ul li.highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat;

}

/* PINK HOVER */

.bubplastic.pink ul li a:hover,

.bubplastic.pink ul li.highlight a {

background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat;

}

.bubplastic.pink ul li a:hover span.menu_ar,

.bubplastic.pink ul li.highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat;

}

/* PURPLE HOVER */

.bubplastic.purple ul li a:hover,

.bubplastic.purple ul li.highlight a {

background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat;

}

.bubplastic.purple ul li a:hover span.menu_ar,

.bubplastic.purple ul li.highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat;

}

/* RED HOVER */

.bubplastic.red ul li a:hover,

.bubplastic.red ul li.highlight a {

background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat;

}

.bubplastic.red ul li a:hover span.menu_ar,

.bubplastic.red ul li.highlight a span.menu_ar {

background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat;

}

]]></b:skin>

- From above CSS code you can remove the styles which you are not going to use in your blog.

How to Add Images of Menu in Blogger:

- Before Saving the above CSS code you have to change image path URL given in red text above. you need to just need to upload it to the Picasa or in blogger and copy the generated HTML image Code and paste that code in Menu Code or CSS Code wherever applicable. (Upload images which you will get from \images folder) You can use either blogger, picasa, photobucket or any other image hosting services to host your menu images.

#Step 5. Save template and done!.

Note: If you want me to add any CSS menu to your blog or want Tutorial for adding any menu please comment Below the URL of that menu and your Blog Name + Link. I will Surely try to help you.

If you need any help please Leave a response.

How to Add Drop Down Menu Widget in Blogger - Horizontal Menus (HTML+CSS)

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sat, 18 Sep 2010 20:27:00 +0000

Here is a list of 18 horizontal CSS drop down menus, adding drop down menus in blogger can benefit your readers to find out the intended posts of the blog with ease. There is nothing like widget for blogger menus, you suppose to add the menu with your own. To add drop down menu in blogger you need is just a little bit of CSS and HTML code and put that code at the right place in your blog and done.

We have a list of Horizontal CSS Drop down Menus for Blogspot Blogs, you need to choose the menu and add the code to your blog. you might have seen the article about How to Add Navigation menu in blogger on geek blogger.

Below is a Memorandum of Drop down Menus, you can add any menu from the list given in below image.

so lets start now introducing the menus one bye one, whichever you like just copy code and paste the code, you can also customize the menus online and then copy the code. Below Menus are from the Above image and menu numbers are 1 to 18 respectively.

1. Massive Blue Drop Down menu: Demo | Download Source
2. Sunrise Gloss: Demo | Download Source
3. Blue Dawn Drop Down: Demo | Download Source
4. Blue Center Drop Bar: Demo | Download Source
5. Black Center Drop Bar: Demo | Download Source
6. Blue Impression Drop Down Menu: Demo | Download Source
7. Green Impression Drop Down Menu: Demo | Download Source
8. Sunrise Gloss: Demo | Download Source
9. Blue Tabbed Drop Down: Demo | Download Source
10. Yellow Tabbed Drop Down Menu: Demo | Download Source
11. Tabbed Grey Drop Down: Demo | Download Source
12. Red Tabbed Drop Down: Demo | Download Source
13. Black Tabbed Drop Down: Demo | Download Source
14. Orange Tabbed Drop Down: Demo | Download Source
15. Simple Red: Demo | Download Source
16. Simple Black: Demo | Download Source
17. Simple Blue: Demo | Download Source
18. Simple Green: Demo | Download Source

- Select Any one menu from the above given list and download the .zip file which should contain HTML file, Images and CSS files for the menu.

3 Mandatory things you must have before going ahead.

HTML File - Contains the code of the menu
Images folder - Contains Images used in menu
CSS file - Contains Style used in menu

Steps to Add Drop Down Menu Widget in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Page Element.

#Step 2. Click on Add a Gadget > HTML/JavaScript link and insert the following type of code (You will get it from Downloaded HTML file) and click Save button.

<div class="menu">

<ul>

<li><a href="#">Home</a></li>

<li><a id="current" href="#">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

#Step 3. Now Drag & Drop that Widget to the top of the Blog Posts Section.

How to Add CSS for Menu:

#Step 4. Now Navigate to Design > Edit HTML Section.

- Find this type of code ]]></b:skin> and replace it with this type of CSS Code (You will get the .css file in your downloaded folder) :

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(images/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #0079b2;

border-right:2px solid #0079b2;

border-bottom:2px solid #0079b2;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}    

.menu #current{

background:url(images/current-bg.gif) top left repeat-x;

color:#ffffff;

}

]]></b:skin>

How to Add Images of Menu in Blogger:

- Before Saving the above CSS code you have to change image path URL given in red text above. you need to just need to upload it to the Picasa or in blogger and copy the generated HTML image Code and paste that code in Menu Code or CSS Code wherever applicable. (Upload images which you will get from \images folder) You can use either blogger, picasa, photobucket or any other image hosting services to host your menu images.

#Step 5. Save template and done!.

That's Done! Hope this Post will be helpful for Blogspot Users.

Note: If you want me to add any CSS menu to your blog or want Tutorial for adding any menu please comment Below the URL of that menu and your Blog Name + Link. I will Surely try to help you.

Best Luck Guys, If you have any difficulty while implementing this code don't hesitate to comment below. If you need any help please Leave a response.

Add Smooth Multilevel Drop-Down Navigation Menu in Blogger

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sat, 18 Sep 2010 19:26:00 +0000

Now you can easily Add Navigation Menu in Blogger with ease. Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth and that's a good thing given the important role of this element in any site.

The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

Note that the sub menus reposition themselves if too close to the window's right edges. The depth of the accompanying shadow can be customized, or removed altogether. Smooth we say!

Steps to Add Smooth Multilevel Drop-Down Navigation Menu in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML.

#Step 2. Find this code:</head> and replace it wit this code:

<link href='https://sites.google.com/site/addinblogger/how-to-add-in-blogger/ddsmoothmenu.css' rel='stylesheet' type='text/css'/>

<link href='https://sites.google.com/site/addinblogger/how-to-add-in-blogger/ddsmoothmenu-v.css' rel='stylesheet' type='text/css'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/addinblogger/how-to-add-in-blogger/ddsmoothmenu.js' type='text/javascript'>

/***********************************************

* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

</script>

<script type='text/javascript'>

ddsmoothmenu.init({

mainmenuid: "smoothmenu1", //menu DIV id

orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"

classname: 'ddsmoothmenu', //class added to menu's outer DIV

//customtheme: ["#1c5a80", "#18374a"],

contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

})

ddsmoothmenu.init({

mainmenuid: "smoothmenu2", //Menu DIV id

orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"

classname: 'ddsmoothmenu-v', //class added to menu's outer DIV

//customtheme: ["#804000", "#482400"],

contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

})

</script>

</head>

#Step 3. Now navigate to Design > Page Element and click on Add a Gadget > HTML/Javascript and insert the following code and click Save button.

<h2>Example 1</h2>

<div id="smoothmenu1" class="ddsmoothmenu">

<ul>

<li><a href="http://bloggerhowtotips.blogspot.com/">Blogger How To Tips</a></li>

<li><a href="#">Folder 0</a>

<ul>

<li><a href="#">Sub Item 1.1</a></li>

<li><a href="#">Sub Item 1.2</a></li>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</a></li>

<li><a href="#">Sub Item 1.2</a></li>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</a></li>

</ul>

</li>

<li><a href="#">Folder 1</a>

<ul>

<li><a href="#">Sub Item 1.1</a></li>

<li><a href="#">Sub Item 1.2</a></li>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</a></li>

<li><a href="#">Sub Item 1.2</a></li>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</a></li>

</ul>

</li>

<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>

<ul>

<li><a href="#">Sub Item 2.1</a></li>

<li><a href="#">Folder 2.1</a>

<ul>

<li><a href="#">Sub Item 2.1.1</a></li>

<li><a href="#">Sub Item 2.1.2</a></li>

<li><a href="#">Folder 3.1.1</a>

<ul>

<li><a href="#">Sub Item 3.1.1.1</a></li>

<li><a href="#">Sub Item 3.1.1.2</a></li>

<li><a href="#">Sub Item 3.1.1.3</a></li>

<li><a href="#">Sub Item 3.1.1.4</a></li>

<li><a href="#">Sub Item 3.1.1.5</a></li>

</ul>

</li>

<li><a href="#">Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="http://bloggerhowtotips.blogspot.com/">Blogspot How To</a></li>

</ul>

<br style="clear: left" />

</div>

<h2 style="margin-top:200px">Example 2</h2>

<div id="smoothmenu2" class="ddsmoothmenu-v">

<ul>

<li><a href="http://bloggerhowtotips.blogspot.com/">Blogger Tips and  Tricks</a></li>

<li><a href="#">Folder 0</a>

<ul>

<li><a href="#">Sub Item 1.1</a></li>

<li><a href="#">Sub Item 1.2</a></li>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</a></li>

<li><a href="#">Sub Item 1.2</a></li>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</a></li>

</ul>

</li>

<li><a href="#">Folder 1</a>

<ul>

<li><a href="#">Sub Item 1.1</a></li>

<li><a href="#">Sub Item 1.2</a></li>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</a></li>

<li><a href="#">Sub Item 1.2</a></li>

<li><a href="#">Sub Item 1.3</a></li>

<li><a href="#">Sub Item 1.4</a></li>

</ul>

</li>

<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>

<ul>

<li><a href="#">Sub Item 2.1</a></li>

<li><a href="#">Folder 2.1</a>

<ul>

<li><a href="#">Sub Item 2.1.1</a></li>

<li><a href="#">Sub Item 2.1.2</a></li>

<li><a href="#">Folder 3.1.1</a>

<ul>

<li><a href="#">Sub Item 3.1.1.1</a></li>

<li><a href="#">Sub Item 3.1.1.2</a></li>

<li><a href="#">Sub Item 3.1.1.3</a></li>

<li><a href="#">Sub Item 3.1.1.4</a></li>

<li><a href="#">Sub Item 3.1.1.5</a></li>

</ul>

</li>

<li><a href="#">Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="http://bloggerhowtotips.blogspot.com/">Blogspot Tips</a></li>

</ul>

<br style="clear: left" />

</div>

#Step 4. Save template and done!.

After adding the menu your blog layout will be look like in image above, as usual if you have any doubt please comment.

see this link for more customization: http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

If you need any help please Leave a response.

Beware - 9 Things Which can Drive Your Traffic Away

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sat, 18 Sep 2010 10:02:00 +0000

If you are a blogger or a webmaster then visitors and traffic is the scoop of the internet. Do you want your visitors to stay on your website for a while and read your posts thoroughly? I bet you do.

That is why you should know these 10 mistakes that drives your visitors away in less than two minutes. Avoid them and your visitors will enjoy their stay and come back again in future. Making your visitors annoyed quickly is never a good idea for a blog / website, you know. Especially when it's growing.

1. Using large or too many graphics: loads slow

Large and lots of graphics cost bandwidth and and make your site slow to load. If the load time is beyond your visitors' limit of acceptance, they will get impatience obviously. Thus resulting in their leaving at once, and that is not something you want. If a larger image is needed to describe your content, provide a link like "click here to view in larger size" or something. Therefore, the slow loading only occur when your visitor wish to see the larger image. Bigger size is not always better, dude.

2. Playing music automatically: irritating

Have you ever visited a website or blog that plays music automatically without your agreement? What do you feel? 9 of 10 people will get annoyed and quickly close the tab or window to silence it. If you have a plan to add sound effect or music to your site, don't do it, just don't. That's why they created Winamp, so that people can listen to music WHEN they want it. Don't force them to hear it from your site, that's bad.

3. Using bad formatting styles / template

Very simple: if your site is not friendly on the eyes, visitors will feel uncomfortable. It will drive them away fast, especially when the formats break into each other like crazy. Therefore, decide your format / template early and stick with it. There are a lot of free web templates out there that look tidy and good, don't say you can't afford them.

4. Using poor background color or image: text hard to read

Poor background color or image will make your text hard to read, and it is certainly annoying for your visitors. They will leave in half a minute. Improve your site's readability to make your visitors comfortable to stay. Light background is good with dark texts, and vice verse. Your target visitors are not super-men with their super vision, are they?

5. Writing too long posts: boring

No one likes someone who talks too much, and it also applies in blogging. Most internet surfers are modern type of people, and in this modern day, people have lots of things to do. Therefore, if you think people will have the time to read long babbling posts, you are wrong. Always make your articles comprehensive and don't extend them over and over. Yes, cut the crap. Super-duper long post is only good if titled "How to Sleep Quickly: Read This Post".

6. Using elements that blink, bounce, or scroll: distracting

Unless your website or blog is for kids, it is a bad idea to have these elements. They will distract your visitors from your message, reducing your communication effectiveness. Whatever you do, always limit or remove distracting elements from your site. Less is more my friend, less is more.

7. Using poor opening on the posts: negative first impression

Some people tend to open their post lamely, and that is totally bad for visitors. For example, if you are going to write a post about computer technology, don't open it by telling what activity you did yesterday, which has nothing to do with the topic. Some bloggers really do this in their extra long posts, and their annoyed visitors will just say "What the f*&% ?!" and leave at once. Don't do it, unless you are someone really-really famous.

8. Putting excessive advertising

Few ads will make your website looks more professional, but putting too many of them will distract your visitors from your content. It also has a big chance to irritate your visitors and drive them away quickly. You won't get more money from ads if they are annoying for your visitors. Don't look like you desperately wanting money, it's not too good for your brand.

9. Putting a registration page

Trust me folks, it will not make the visitors register. Instead, it will drive them away instantly. Time on site and bounce rate will show it, if you use some traffic analytic. If you really really want to ask people to register to your website, you better offer them something worthy registering. Otherwise, those who have registered may curse you because they feel deceived.

What kind of annoyance do you hate the most from a website (based on your experience)? Let's share on the comment box. Thanks to my friend isaacyassar for this wonderful post.

How to Run Blog Successfully and Earn Money from Blog

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Fri, 17 Sep 2010 18:18:00 +0000

There are countless bloggers and blogs are there in the web today. Some of these blogs are personal, some are professional, some of them try to sell their products, and most of them are blogs that are created to earn some money.

Everyday huge amount of bloggers are creating new blogs in blogger to start up their online fortune. They all start their blogs with good spirit and ambition to earn some money from the Internet.

However, most of the new blogs are abandoned with failure as people can't see the return of visitors, they expected or spammed by the people and search engine robots. So why do these blogs fail, while others can get lots of visitors and earn lots of money :)

I can tell you why these people stop writing to their blogs. I also have started many blogs. Each blog that created is about different subjects, but after creating many number of blogs i have gave up. Then i have figured out what my mistakes were, and what i need to do to become a successfully blogger.

Patience:
If you are new to blogging era then you must sustain the growth of your blog. key to a blogs success is patience. That is the only thing you have to have from the start. Experts will tell you lots of things about good blogging, but if you don't have the patience, all those good advices will going from one ear and go out from the other. Those experts will tell you that you need to create good content. You need to write about something that you enjoy, something that you know. All of these are right. But without patience you can't do any of these advices. Because it takes time for a blog to become successful and start making money.
- You should have the patience to write regularly.
- You should have patience to create back links.
- You should have patience to do SEO for your blog.

So Patience is the very important key to run any blog successfully.

If you need any help please Leave a response.

How to Remove Snippet and Thumbnail from Popular Posts Gadget in Blogger

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Thu, 16 Sep 2010 16:06:00 +0000

Recently blogger team has launched Popular Posts Widget for all blogspot users. I have noticed a strange behavior of the Popular Posts Gadget when i got comment from on of my reader MXL. He want to remove snippet and thumbnail section from his Top Post widget.

After getting admin rights from him when i have tried to turn off the snippet and image thumbnail (from gadget unchecked the snippet and thumbnail option) , but i was not able to make it up to the mark because whenever i tried to change the snippet and thumbnail settings it is going back to its original configuration.

One thing which i have noticed is, he was using Blogger Template Designer, so his template was created using the template designer. So i have made changes in his template code, and fix the things manually.

If you also has the same issue then see the below steps and learn How to Remove Snippet and Thumbnail from Popular Posts Gadget Manually in Blogger

Steps to remove snippet and image thumbnail from popular posts gadget in blogger

Prerequisite Steps: You must have popular posts gadget added in your template already. You can check it in the Design > Page Element section.

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML and Check the Expand Widget Templates Check box.

#Step 2. Find this type of code in your template:

<ul>

<b:loop values='data:posts' var='post'>

<li>

<b:if cond='data:showThumbnails == &quot;false&quot;'>

<b:if cond='data:showSnippets == &quot;false&quot;'>

<!-- (1) No snippet/thumbnail -->

<a expr:href='data:post.href'><data:post.title/></a>

<b:else/>

<!-- (2) Show only snippets -->

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

<div class='item-snippet'><data:post.snippet/></div>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == &quot;false&quot;'>

<!-- (3) Show only thumbnails -->

<div class='item-thumbnail-only'>

<b:if cond='data:post.thumbnail'>

<div class='item-thumbnail-center'>

<a expr:href='data:post.href' target='_blank'>

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

</a>

</div>

</b:if>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

</div>

<b:else/>

<!-- (4) Show snippets and thumbnails -->

<div class='item-content'>

<b:if cond='data:post.thumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.href' target='_blank'>

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

</a>

</div>

</b:if>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

<div class='item-snippet'><data:post.snippet/></div>

</div>

<div style='clear: both;'/>

</b:if>

</b:if>

</li>

</b:loop>

</ul>

#Step 3. Follow this step, if you just want to remove image thumbnail from the gadget.

- Find this line and remove it (you will find it two times).
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

#Step 4. Follow this step, if you just want to remove Snippet from the gadget.

- Find this line and remove it (you will find it two times).
<data:post.snippet/>
#Step 5. Follow #Step 3 and #Step 4, if you want to hide both image thumbnail and Snippet from the gadget.

#Step 6. Save template and done!.
If you need any help please Leave a response.

How to Make Blogger Blogs Mobile Phone Compatible

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Wed, 15 Sep 2010 17:44:00 +0000

How to Make Blogger Blogs Mobile Phone Compatible? .If you are running a blogspot blog then you should think about making your blogger blogs mobile friendly. Actually today i was seeing my Google Analytic account and i was surprised when i saw in the browser details that 15% of the users are using mobile browsers.

I also noticed that my blog is getting more visitors from the US region, where majority of users using mobile phones, tablets and iPhones. So i have decided to make my blog(http://bloggerhowtotips.blogspot.com) mobile compatible. Below here you will find how to make blogger blog mobile phone compatible.

Steps to Make Blogger Blog Mobile Phone Compatible

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML and Check the Expand Widget Templates Check box.

#Step 2. Find this code:
<b:include data='blog' name='all-head-content'/>
and replace it with this code.

<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>

#Step 3. Save template and done!.

If you need any help please Leave a response.

How to Add Favicon to Blogger - Set Favicon in your Blogspot Blogs

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Mon, 13 Sep 2010 18:20:00 +0000

How to Add Favicon to Blogger?, When you create a blog in Blogger, the default favicon you will notice in your browser navigation bar is Bloggers default icon as favicon. If you want to add custom favicon to blogger and set an enrich favicon in your blogspot blogs then this is the final place for you.

Now you can set Favicon (Favorite Icon) as you need and which suits to your blog logo and design. Follow the below given steps to add favicon in your blogspot blog with ease.

A "favorite icon" or favicon (pronounced fav-eye-con) is a 16x16 pixels icon that appears next to a website's URL in the address bar of a web browser. To see the demo just see this image here and see my blogs favicon.

Before going ahead you must have your image(16x16 or 32x32) be either a .gif or a .png, get your image code ready to use ahead in the post as given below.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMC5QOmCzu2fIdtQveoWO-fGKUT_LOHuAFIqZM4dY9Tgd6xTlL50memi_aw_Tj0wuI7DvwH86-UFriaM8rIKTXjbtBI9BlA5qLJLgYiy5yPRDHRoHbU_GB_BsolIzi_YoeNBjTn6Eb0PD/s1600/Favicon.png" border="0" />

Steps to Add Favicon to Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.

#Step 2. Find </head> tag and just before the </head> tag add One of the following HTML image code. (Add.gif or .png code for firefox and .ico code for IE)

<link rel="icon"  href="static_favicon.ico"/>

<link rel="icon" href="animated_favicon.gif"/>

<link rel="icon" href="static_favicon.png"/>

After Adding one of the above favicon image type, your code should be something like this:

<link href='http://www.siddharthr.in/favicon%20%281%29.ico' rel='icon'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTQrovkDwTLU31wvDh7RaDsaSovFdE1bKXZVl7n8CdsgNhVoki58W5FMNELJbBGjgALvKjoJADAda2nEwSoLnk5WbfHv_gdDFPRYcpYmzXdUb7Nyupce0cgI7KfPGVqLbg8Yd41BUPu1lp/s1600/favicon.png' rel='icon'/>

</head>

For those of you wanting desperately to have your favicon to work in Internet Explorer you have to use a .ico file, since it appears that Internet Explorer simply does not want to support the .png or other formats for the favicon.

You can’t upload a .ico file to Blogger.com, that means you will need to host your favicon somewhere other that on Blogger.com. An option could be Google Page Creator.

Some more help (resources) for adding a favicon in blogger.

HTML-Kit favicon generator (download as favicon package) – Enables you to create a static or animated favicon; you can even create a favicon quickly using your Twitter username!
Use Favicon Validator for making sure that the favicon works.
Use image converterlink to convert your .jpg, .gif or .png image into .ico image

Video to know & set Favicon in your Blogspot Blogs

#Step 3. Save template and done!.
If it does not work for you leave a comment and we will see if it can be sorted out. Leave a response.

How to Add Popular Posts Widget With Thumbnail in Blogger

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sun, 12 Sep 2010 18:33:00 +0000

Blogger has just launched Popular Posts Widget in Blogger for all blogspot user, and i would like to guide you on how to add this popular posts widget in blogger. You can show this widget with thumbnail and without thumbnail. You will also be able to show text snippet of your post.

The Popular Posts gadget will help your readers quickly find out which of your posts have been viewed the most by your readers. The gadget also comes with several different styles and configurations. To add one of the best gadget you have to follow some simple steps given below.

Steps to Add Popular Posts Widget With Thumbnail in Blogger

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Page Element.

#Step 2. Now Find Popular Posts Gadget and (Click on Plus sign) Add it, before adding gadget you can configure the settings as per your need given in #step 3.

#Step 3. You can choose most viewed, snippet, thumbnail and title of the widget. (Recommended settings from me are as given below.

Enter Title of the widget as "Popular Posts".
In Most Viewed Choose All time.
If you want your popular posts with thumbnail and snippet then check bot check boxes else choose as per your need. ( I suggest you not to use any of these both)

#Step 4. Click on Save button and done!.

Update: Currently you will find this Gadget only in Blogger in Draft. Login with your blogger credential and add this wonderful widget.

If you need any help please Leave a response.

How to Change Background Image of Your Blog in Blogger

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sun, 12 Sep 2010 07:23:00 +0000

Now you can use your own image as your blogger blogs background. If you want the answer of the question "How to Change Background Image in Blogger" and use your own custom image for your blogs background, keep reading this post.

After blogger has launched the Blogger Template Designer, one of the most requested features was the ability to upload your own background image. Though blogger provides hundreds of professional stock photos from iStockPhoto, they know how many of you are serious photo buffs and would like to use your own beautiful photo as your blog's background image.

Steps to Change Background Image of Your Blog in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Go to Blogger in Draft. Log in to your Blogger Dashboard and Navigate to Design > Template Designer > Background.

#Step 2. click on Background Image, and you’ll notice a new “Upload image” option, which will allow you to select and upload your image. Upload your custom image and save the template.

For images that fill the entire background, we recommend using a resolution of 1800 pixels wide and 1600 pixels high, and file size less than 200KB to minimize the loading time of your blog pages. We support JPEG, GIF, and PNG format images.

After uploading a photo, you will see additional options that are not available for the built-in images: Alignment, Repeat, and Scroll options.

Alignment: You can adjust horizontal (left, center, right) and vertical (top and bottom) alignment of your background image.
Repeat (Tile): If you have a small image, you can have it repeat horizontally and/or vertically to fill the page. Otherwise, we recommend that you choose a page background color that blends in with your background image.
Scroll: By default, your image stays in place while readers scroll the page contents. By selecting the “Scroll with page” option, both the background image and page contents scroll together. We recommend that you use an image that blends into your background color or set your image to tile vertically if you choose this option.

This feature is available on Blogger in Draft right now, so please go ahead and check it out!

#Step 3. Save template and done!.
If you need any help please Leave a response.

Add Google Talk Chatback Badges in Blogger and Stay Connected with Readers

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Tue, 24 Aug 2010 05:55:00 +0000

Add Google Talk Chatback Badges in Blogger and Stay Connected with your Blog Readers. A Google Talk chatback badge will let visitors to your web page chat with you. They'll be able to chat with you whenever you're signed in to Google Talk as yourgmailid@gmail.com.

A Google Talk chatback badge allows others to chat with you even if they haven't signed up for Google Talk on their Google Account or if they don't have a Google Account. You can put the badge in your blog or website, and people who visit those pages can chat with you. The badge will display your online status (whether you're available to chat or not) and, optionally, your status message.

To use this badge, copy and paste the HTML code below into your web page. If the site that hosts your web page does not support direct HTML editing or embedded frames then click 'Edit' to select a style of badge that does not use frames. If you want to include your badge in an email message, you should use the 'Hyperlink only' or 'Url only' styles.

Note: You need to be a Google Talk user to create a badge, and you'll need to be online and available (with a green ball next to your name) in Google Talk to enable people to chat with you.

Steps to Add Google Talk Chatback Badges in Blogger

#Step 1. Go to http://www.google.com/talk/service/badge/New and fill the necessary detail as described above, like Nick name, Badge style and Title of the badge.

Now look for JavaScript code generated at the end of the page. Copy the JavScript code.

#Step 2. Log in to your Blogger Dashboard and Navigate to Design> Page Element.

#Step 3. Add a Gadget as HTML/JavaScript and Paste the Code we have copied in #step 2.

#Step 4. Save your Template and Done!. Now Whenever your blog reader will open chat session you will have the chat box pop up visible in your Gmail in-box page (refer below sample screen shot).

Enjoy! and chat with your blog readers. If you need any help please Leave a response.

How to Add Advertise Here Banners in Blogger and Attract Advertisers

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Mon, 23 Aug 2010 02:51:00 +0000

Advertise here banners is a great way to make money from your blog. There are millions of Advertisers (Sponsors) in the internet market who want to put their ads on the High traffic blogs & Websites. If your blog is getting handsome amount of traffic then you should try to add some Ad slot for the advertisers and you can earn a good amount of money by just selling some ad space. Just Copy HTML Code for Ad banners and put on your blog.

Today i was creating the custom Advertise Here banners for my blog. I thought to share it with all my readers so you can easily embed Sponsors Ad Slot in your Blogger Account. Let see how to "Add Advertise Here Banners" in Blogger and Attract Advertisers.

Steps to Add Advertise Here Banners in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.

#Step 2. Copy below code and paste it just before the ]]></b:skin> code.

.adslot {

border:2px solid aliceBlue;

margin:2px;

}

#Step 3. Now Go to Design > Page Elements and Add a HTML/JavaScript Gadget.

- Give Title Name as "Sponsors" or Whatever else you want to put.
- Paste below image code in the content area and save your widget.

<img border="0" class="adslot" alt="Advertise wit us banner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUA6SwUZB0YQKyLxA4gFp1qCxWKbzMTo5_Y9fRY86Z9KOMMQJZfyxQCMZG-PFtn9Y27dyTSF2aB_Jeg1i0bP8vCOhLCPCpo9XIOUkjLDSvQVMzB8v6uK5cPNBXIvNus18weAXxS5igF98/s400/AdSpace+120-125.png">

Note: Repeat above given image code 3 times and you will be able to see 4 Advertise here banners on your blog.

- You can put Hyperlink on click of image if you want, which redirects users to your contact me or about me pages.

Update: Added some more background images to use as an advertising banner.

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvXWT17OFEy_8XfuICqsINhQGduAQEP6qlV1VvnAB60QLjyBkp_6sm9hvTjBsAE9DPXRNYD11YTTYQneAOS3IC4uBWrC8EpvzAACgr8oP9pE_q05hw0YyTkBMVkH5RBY8OY87XunNRm8Rh/s800/Advertise+Here+Money.png" alt='Advertise Here Banner' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfl6Up4RifYOHSTVESf9xPtMlJfzCUkryhylVWaq0xZJPdJOkjtkwmGq12uOI6MUrTlcV76moSQq_1aRvV3oxSIuLiTQoSEn9kPRVkySOMx7zXRQzQgLN1SfZj3t6BOL6DFtFqbJHyV_w1/s800/Advertise+Here.png" alt='Advertise Here' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHDwnFc06P-RG1uUDJRjFy8PIA4NxBgnKoredK1Ews13QL5gW0YBRgJosOl9FN7t2pZm4cmO-bgm1G1ZJGDLrqmh9xuKey6KKYPdwBY1fdV_6DLODNQa-xn6E5ckPXvN5yLxMFjUtgN9HD/s800/Ad+Banner.png" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_DtSl0wbkxAU-aAlh3GgE_tBqqXKPGnGPRLCoVsBYXidK_7lofUf_3jS4DTFFrsyoQE7iDnsDLiBSklzQPKpCJhNzIBJifj83-B6-ADtMrt37Ytx8KW3mTxQ6FUXGa0FnGe9aQS0IHxK/s1600/Ad+Spot.jpg" alt='Advertise Here' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVR9QDpD7Qh9AXAyHJI72d1xscclHzrmi1PXwYhE8FfH_lAkzZ3xDqBklOFT0UmC4BuTLbL0_3m3fQS1hN4Mz_5wk9mFPkSuF5Fp3z8yJXhwMAE9LRbZyNPUPvg002TrMtWUPidSfA4h9f/s1600/125x125ad.png" alt='125*125 Ad spot banner' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ8JdpIVol6r78h8ancqTRN-CL0RHx-NrrYQTuHLZu8-duUtJXnpEMTVdv0yhilvybDFPRumVqgWhpJ4rF5aYyOc8Q1Qzo_VcoUSqbncmYcfp6e8W0gD3e_AvREDao3wJ3kebFKVT8_4gC/s1600/Your+Ad+Here.jpg" alt='Your Ad Here' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS9mkGBqXB1t5sMUNem68paCdRkR2PX1HSgAAWa5ZGuFLORF3QwDN_0OjfuP__2sty28tOIQztlZxpsZPamijRzrUBZ8qu_c7NAyWQzBT36MPsZmnr0z78X71uCHehRE0uGnwzgW9R7a94/s1600/banner_125x125.png" alt='Banner 125*125' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpzJUy85SdQHJ7YuoapSm50-RYaXFSm0Krb8ui4iIXZEplC9Ma0lLVTUYSiXzaJsLrP8FmM396bv_bFSnq8R7RBIEiiRcUiFYdhjp90LnRhq0g-mXxO6dBbY3T-Skk8Jf2T9HLYDZe11Qq/s1600/125-advertise-banner.gif" alt='HTML Code for Ad Banner' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfhmU1vr70j9d23U6feALTvykpxUiotfDxSbpa9Fo8X64kci26my5Fi3LpRCSwy5rBs1UvzGimEefbY6sGXgw6Bf-DdjVsgQmfrgsQXgWUUVqfXZx4RVpUDWzwHVeE0c4-MGO89D9_MoOy/s1600/Ad-Banner.jpg" alt='Ad Banner HTML Code' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1aQwuOmvew9YqDNXZ6gy-1vLJbGuE7QXEgqWT4afMonmLb88qkTkS3VAUyISJcPgeYqoYiKp_ONkNL3iKUps3VqOzQXrzipT4w1iHIWmFUxu5AYn2_DQ8FdmdJw86HeDG4wN0CXUkCE_L/s1600/125_ad.png" alt='125x125 Ads' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwdbo4FT8U28jC2DoSrtaojzZL-xVOByZ0c5OZwIbWpfTuQrqGhVNy4iRKv-sZUb0GlqtOIA4uf1tWnAiDKSyyZoGVyO4imza1jCLSP_FUMlThuaiiwSLLWWHnFumaBSVnkpdC_KK3SlgM/s1600/125_ad_1.gif" alt='125 Banner Ad' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhePHgZSnZugz80sgw7t7VNgq_hVklQFSf7IO-D7rRQdPo_MXnaY0liwD3DZKnH_ul_YeXqRe5Erbxiq8Tf487BcJbAEhohK-rdp7eUgoJr39vZgNr8oAT3HboDoW0zt_KapKxWyzHtQs15/s1600/ad.gif" alt='Sample Ad Banner' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1DtrRYmzLxQa8qdRnfgLQYwl1RJzSSD7LuvZMNEbluIKak9LxVxLZ6j2ABwZc7R0nMBz4flh1ZSN-ft1oK9-L5-kA64Dgiv23ZquhU9XbOyUn116_W1eZ-QmOgRFMUUHqT9lKJ8U8kUG/s1600/advertise.jpg" alt='Advertise' />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBpKJiAl-6FuFnpf1fr_ZO2yENkfKzIRsJB9-N8cgBno2ufvNjsuTrGMN_3gCLIGkJyFrJEKD9O4G9qvxpjaU09fAhinaMO_7GB-s_CBdnkpCuIySH3ZP7KvvXGVMrdUq4TOgfsZX3FrI/s1600/youradhere.png" alt='Your Ad Here' />

If you need any help please Leave a response.

Add Best Numbered Page Navigation Widget in Blogger with Scroll Effect

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sat, 21 Aug 2010 19:20:00 +0000

Now Add Best Numbered Page Navigation Widget in Blogger with Scroll Effect using little bit of jQuery and CSS code. To have a Pagination Functionality in blogger can increase your website or blog's page visit counter/user traffic tremendously. Paginator 3000 is a New Page Navigation with Scroll for Blogger.

While working with this Paginator 3000 widget your can set how many post every Page for your blog you want to display in this pagination. You also can set how Many number will show in Your page Navigation. Below is a guide on how you can add this widget in your blogger blog.

Steps to Add Numbered Page Navigation Widget with Scroll Effect in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML. Don’t click the "Expand Widget Templates" check box.

#Step 2. Find this code:
]]></b:skin>
and replace it with this code:

.paginator {

margin-top:60px;

font-size:1em;

}

.paginator table {

border-collapse:collapse;

table-layout:fixed;

width:100%;

}

.paginator table td {

padding:0;

white-space:nowrap;

text-align:center;

}

.paginator span {

display:block;

padding:3px 0;

color:#fff;

}

.paginator span strong,

.paginator span a {

padding:2px 6px;

}

.paginator span strong {

background:#ff6c24;

font-style:normal;

font-weight:normal;

}

.paginator .scroll_bar {

width:100%; height:20px;

position:relative;

margin-top:10px;

}

.paginator .scroll_trough {

width:100%; height:3px;

background:#ccc;

overflow:hidden;

}

.paginator .scroll_thumb {

position:absolute;

z-index:2;

width:0; height:3px;

top:0; left:0;

font-size:1px;

background:#363636;

}

.paginator .scroll_knob {

position:absolute;

top:-5px; left:50%;

margin-left:-10px;

width:20px; height:20px;

overflow:hidden;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiN7E8V0HtVgvy_U2zjpLsKyhpb84Z4ROhyphenhyphenUzQgSXhfZ_4HlXtJrDCxfcKnXAonswHPmdtJbcwyB5Zl5ZCvFckrq_3bEb7PyXfl1FcnYyzsBioVJjySAcqUAh1sEiRX7ve0W_r9Ll2Hig/s1600/slider_knob.gif) no-repeat 50% 50%;

cursor:pointer; cursor:hand;

}

.paginator .current_page_mark {

position:absolute;

z-index:1;

top:0; left:0;

width:0; height:3px;

overflow:hidden;

background:#ff6c24;

}

.fullsize .scroll_thumb {

display:none;

}

.paginator_pages {

width:600px;

text-align:right;

font-size:0.8em;

color:#808080;

margin-top:-10px;

}

]]></b:skin>

#Step 3. Now find this code:
</body>
and replace it with this code:

<script src='https://sites.google.com/site/besthowtoblogger/blogspot/paginator3000.js' type='text/javascript'></script>

<script type='text/javascript'>

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=6;

</script>

<script src='https://sites.google.com/site/besthowtoblogger/blogspot/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

</body>

Further more if you want to customize number of posts per page and number to display on the blog you can change it based on your blog settings.

var postperpage=7;
var numshowpage=6;

postperpage: How many post every page for your blog.
numshowpage: How many number will show in your page navigation.

- Note: If you have less number of posts then to see the scroll knob use less postperpage number.

I hope it will work on your blogspot blog and make your blog easy to navigate for all the users. If you need any help please Leave a response.

See Working Demo here:

Update: If you are using inbuilt Labels Widget and Template Designer then you must have to use the below given label hack to see the pagination on labeled pages.

- Try to find the below given kind of code in your template (check Expand widget Template checked) and replace the highlighted part given below with the existing code. (Don't search for whole code just find any one line from below given code, and see if that is the code which we want)

<b:if cond='data:display == &quot;list&quot;'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=5&quot;'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span dir='ltr'>(<data:label.count/>)</span>

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values='data:labels' var='label'>

<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=5&quot;'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span class='label-count' dir='ltr'>(<data:label.count/>)</span>

</b:if>

</span>

</b:loop>

</b:if>

- You can change max-result=5 to your suitable number and done!.

Credit:
This beautiful widget is designed like Plug-in from WP Paginator.
- idea by ecto (ecto.ru)
- coded by karaboz (karaboz.ru)
- converted by (abu-farhan.com)

Add official Twitter Button in Blogger With Counter and Without Counter

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sat, 14 Aug 2010 18:39:00 +0000

Twitter has just launched an official retweet counter button in collaboration with tweetmeme. This is a very good news for all bloggers who uses twitter to tweet their thoughts on twitter, and if you are running a blog then this new twitter button will allow you to easily share your blog posts and website pages with your followers. The Tweet count button shows how many times the URL has been Tweeted.

Now You can choose to display or hide the count box, or place it above or next to the Tweet Button with ease. You already have tweetmeme and the tweet counter green buttons as a small widget. I have already posted about Best Social Bookmarking Widget for Blogger which includes slick counter buttons, in that widget one is retweet button with counter. In this post we will learn how to add horizontal, vertical and simple retweet buttons in your blogspot blog.

Steps to Add Official Twitter Button in Blogger With Counter and Without Counter

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML and checked the Expand Widget Templates Check box.

#Step 2.Now choose your Twitter button type from - http://twitter.com/goodies/tweetbutton page. Customize following options which are available currently.

Button : Customize your button settings.
Tweet text : This is the text that people will include in their Tweet when they share from your website:
URL : Suggest a default Tweet for users.
Language : This is the language that the button will render in on your website. People will see the Tweet dialog in their selected language for Twitter.com.

Choose Vertical count, horizontal or No count option, whichever suite best for your blog.

#Step 3. You can Recommend People to follow.

Recommend up to two Twitter accounts for users to follow after they share content from your website. These accounts could include your own, or that of a contributor or a partner.

#Step 4. Preview your button and Copy the code.

Demo code:

<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="vertical" data-via="YOUR-TWEETER-USER_NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Your code should be look like the one i have given above.

#Step 5. Now in Blogger navigate to Design > Edit HTML Section and find this code in your template: <data:post.body/> and After getting it just place the below codes after it, if you want button to have at beginning of post else place it after the code to display button at the end of the post.

Twitter code for Vertical Counter Button:

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

<div style='float:right; margin-left:10px;'>

<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="vertical" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>

Twitter code for Horizontal & Sleek Counter Button:

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

<div style='float:right; margin-left:10px;'>

<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="horizontal" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>

Add below twitter code for Simple Button:

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

<div style='float:right; margin-left:10px;'>

<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="none" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>

#Step 5. Don't Forget to change YOUR_TWITTER_USER-NAME with your twitter username TWEET-TEXT with the text which you think should automatically add before each tweet made by users. and Save template and done!.

Official video from Twitter team for this Twitter share buttons:

What do you think about this new twitter buttons?, do you like it or not. Share your thoughts.

Customize Next-Home-Previous Post Links in Blogger Footer Using Images

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Thu, 12 Aug 2010 02:48:00 +0000

Blogger is providing link to home page, previous page and next page from any given specific post page. There are number of bloggers who want to use custom images these home, previous and next post instead of using links.Many bloggers needs a hack on how to remove or change “Newer Post and “Older post” Link from blogspot post footer. Some want to add images instead of “new post” and “old post” Link.

In this post i will guide you on How to Use Custom Images for Home, Previous and Next Post Links while using blogger and customize your template and design.

Steps to Add Custom Images for Home, Previous and Next Post Links in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.

#Step 2. Find below highlighted code in your template:

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

</span>

</b:if>



<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

</span>

</b:if>



<b:if cond='data:blog.homepageUrl != data:blog.url'>

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

<b:else/>

<b:if cond='data:newerPageUrl'>

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

</b:if>

</b:if>



</div>

After finding above code replace it with this code:

Replace <data:newerPageTitle/> for Next Post with <img src='YOUR-IMAGE-LINK alt='Next Post' />
Replace <data:olderPageTitle/> for Older Post with <img src='YOUR-IMAGE-LINK alt='Previous Post'/>
Replace <data:homeMsg/> for Homepage with <img src='YOUR-IMAGE-LINK' alt='Home' />

#Step 3.Click On Preview to preview changes or click on Save to save yours Work, if everything works fine then Save template and done!.

Note: For demo purpose you can use below given images, just right click on it and copy image address and paste it at YOUR-IMAGE-LINK.

Hope this post will be helpful for all blogger newbies. If you need any other customization then feel free to ask in comment form below.

Blogger Introduced Automatic Spam Comment Detection in Blogspot

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Wed, 11 Aug 2010 02:27:00 +0000

Blogger has Introduced Automatic Spam Comment Detection in Blogspot blogs to make it easier for you to manage your comments. This is really a fantastic news for all blogspot users, because spam comments are headache for all blog authors. Blogger Auto spam detection feature will detect spam comments and restrict them from publishing.

Blogger has created a new Comments tab for us to access them. where we can manage published comments, comments that have been flagged as spam and comments awaiting moderation if you have turned on Comment Moderation.

Users with Comment Moderation turned on will continue to see comments that need moderation and have not been flagged as spam in Comments | Awaiting Moderation. Users without Comment Moderation will not see any comments in Comments | Awaiting Moderation.

Spam Inbox

Blogger now filters comments that are likely spam comments to a Spam Inbox, much like the spam folder in your email. When someone leaves a comment on your blog, it will be reviewed against our spam detector, and comments that are identified as possible spam will be sent to your blog’s Spam Inbox, found at Comments | Spam.

You can help improve blogger ability to automatically detect spam comments by checking your Spam Inbox and deleting spam comments and marking real comments that may have been flagged as spam as Not Spam.

Note: It might be available or not available in your blogger account, because blogger has given rights to limited users who can view this feature. You can try http://draft.blogger.com/

How to Redeem Google Adwords Promotional Coupon Code

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Tue, 03 Aug 2010 17:06:00 +0000

Google Adwords is giving away free promotional coupon codes to so many webmasters and bloggers since a long time, but so many users are struggling to use and Redeem Google Adwords Coupon code and are not able to use Google adwords promotional coupon code. I have also received one $100 Promotional code which was valid for only 15 days only. Now the question is how to use the coupon code, where to put the Google Adwords Promotional code and redeem the money. Go through the article and you will have a solution to your problem surely.

Before going ahead, as a prerequisite steps you must have following two things:

1) Your Google Adwords promotional code (must not be older than 15 days, Promotional offers are usually limited to one per customer).
2) An Active Google Adwords Account (you first have to enter your billing information. Valid payment information is required to activate your AdWords account).

How to redeem Google Adwords Coupon code in 5 easy steps:

Open http://www.adwords.google.com.
Navigate to the Billing and Billing preferences.

At the end of the page you will find text box of Promotional Codes. In the Promotional Code field, enter your unique coupon code exactly given to you. (example: Your personal coupon code: XXXX-XXXX-XXXX-XXXX-XXX)
Click Save and Activate.

Note: After redeem don't get panic if your bespoken credit is not credited in your account, wait for 15-20 Minutes after redeem, because some time it can take some time to credit the money in your Google adwords account.

More Information on Google Adwords:

Promotional offers are usually limited to one per customer.
An expiration date often applies, so keep in mind that you may only have a certain amount of time to use your credit. Often, the code is only valid for 14 days from the date your new account is created.
If you are about to sign up with a service offering you an AdWords promotional credit, be sure to confirm that the service has a relationship with Google. If you have any questions about an offer, please contact us before committing.
If you receive a promotional code from a service that you have no business relationship with, please be aware that the code may be invalid.

Have a happy campaigning with Adwords, if you have any query related to the redeem process comment below :)

How to Share Google Adsense Revenue in Blogger with Co-Authors

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Tue, 27 Jul 2010 02:35:00 +0000

Today we will see How to Share Adsense Revenue for Multiple Authors in Blogger. To have multiple authors in a single blogger blog is very common now a days, and if your blog is having more than one author's then it is quite possible that the co-author wants to put his/her Google Ads code on their own posts.

If you are using wordpress then this is thing can be achieved with Plug-in itself, but in case of blogger you need to do it manually. So below here is a hack for how you can share Google Adsense revenue with multiple authors while using blogger.

If you are thinking about how to distribute or share the revenue with other authors of your blog to give there share, then the simple solution is is to show the adds of that author. Google Adsense will give him the exact revenue he deserves for doing that post. This way you can share the blog revenue with them more precisely because every author gets his own ad displayed in all the posts he/she does.

Steps on How to Share Google Adsense Revenue in Blogger with Co-Authors

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML and checked the Expand Widget Templates Check box.

#Step 2. Find this code:
<p><data:post.body/></p>
and replace it wit this code:

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

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

<b:if cond='data:post.authorUrl == &quot;http://www.blogger.com/profile/12753704574838247184&quot;'>

PASTE THE AD CODE OF Author 1 HERE

</b:if>

<b:if cond='data:post.authorUrl == &quot;http://www.blogger.com/profile/12753704574838247184&quot;'>

PASTE THE AD CODE OF Author 2 HERE

</b:if>

<b:if cond='data:post.authorUrl == &quot;http://www.blogger.com/profile/12753704574838247184&quot;'>

PASTE THE AD CODE OF Author 3 HERE

</b:if>

</b:if>

<br/>

Note: To know your profile id, Go to your Dashboard and click on your View Profile Hyperlink and watch out in address bar for your profile id. See below images to know more.

* Go to Dashboard > Click on View Profile.

* See your address bar and you will find your blogger profile ID.

#Step 3. Replace blogger profile id with author's profile ID and save your template. Now when ever co-author will publish post blogger will check that from which blogger profile it has been posted and will show relevant author's Adsense code.

Note: There is already a for the blogger on How to Share Google Adsense Revenue in Blogger with multiple authors, but the limitation of that hack is they are using name as a reference and if author is changing the name of his/her then you need to change the code each time.

The above hack will work in every scenario, because i have put blogger profile id into use, which will never going to be change until user deletes their account :)

Hope you have liked this post, keep sharing this article with your friends if you like it. Let me know if you want to know something more or comment below your views about this post.

Summary of Recent Features Provided by Blogger

noreply@blogger.com (Piyush - Admin @ Blogger How To Tips) — Sat, 24 Jul 2010 17:12:00 +0000

If you are a blogspot user then i should let you make aware of Blogger's Recently Released Features, This post will be helpful to summarize some of the latest Blogger news and developments that Blogger team has done and is doing.

Blogger has introduced some very cool features like Template Designer, Blogger Stats, Accurate Post Preview, New Sharing Buttons, Zemanta Post Gadget and Google Affiliate Network.

Template Designer :

If you haven’t had a chance to check out our brand-new Template Designer, you’re really missing out. Blogger laid out the full laundry list of new design features in a recent Buzz post, but i think the best way to find out what’s possible is to get your hands dirty and play around right now.

Blogger Stats :

Blogger is currently working on very excited feature in Blogger in Draft, called Blogger Stats. Blogger stats makes it easier than ever to get all sorts of real-time traffic data for your blog, right from the comfort of your Blogger dashboard. Currently this feature is included in blogger in draft, i am waiting for the official declaration of this feature for all blogspot lovers.

Accurate Post Preview :

Because of some preview problem, blogger has rectify their post preview feature and now they understand how important it is for your blog posts to display exactly as you expect when published, so they have put a lot of time into improving our current preview page. The end result is an entirely revamped post preview, which now displays your drafts exactly as they will appear when published live on your blog.

New Sharing Buttons :

In this Social Media era, why blogger users stay behind?. Blogger team is always thinking about ways to help users and to give better promote and share opportunities for all blogspot users. Blogger has introduced the new sharing buttons to help us get the word out. The buttons—which support sharing via email, Blogger, Google Buzz, Twitter, and Facebook—can be placed under each blog post where your readers will easily see them.

You can turn on the new sharing buttons right now by editing the Blog Posts widget and enabling Show Share Buttons in the Design | Page Elements tab.

Zemanta Post Gadget :

Zemanta has been a partner with Blogger for over a year now, providing a browser plugin service that helps you easily add related content to your blog posts. We’ve seen so much positive feedback about the service that we recently released a gadget version of the service that easily integrates directly in your post editor.

Want more info? Check out Zemanta’s own video overview and tutorials!

Google Affiliate Network :

With Google Affiliate Network you can access affiliate ads for top retailers. If the ad or text link you post on your blog results in a sale, you earn a commission.

Google Affiliate Network is featured in the Monetization tab in your Blogger account. You’ll need an AdSense ID to join, and once you have access to Google Affiliate Network you can apply to advertiser programs, promote ads, search for links to specific products, sign up to access product feeds, and utilize Link Subscriptions that deliver the latest links and promotions directly to you each day.

So this is all the flash back of the blogger features from the past quater, hopefully blogger team will add some more useful and user friendly features in near future. Kudos! :)