Sorry For Inconvenience Everybody, but we have mode to new URL Now.


http://bloggerhowtotips.blogspot.com/

Just URL Changed, rest things will remain same :) Hope to see you there : http://bloggerhowtotips.blogspot.com/

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.

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.

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? .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://besthowtoblogger.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?, 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/AVvXsEidCr2LEib-iRLGtDJ38EAQ4eqo1m9QhjkjyEzjjM7Azo2a-PwzUDPVeqKUy4jB2wKfPnnmLuvE2lU185jg6zQ8nCuwaHDMIc4LUXJD_QzwrL2ntixO_fNspsa4YcqRo7MMru5EwHLJ3cNh/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/AVvXsEgsGr5wGYbwUOYw1v7sXw_mvq6qp47W23o4yPBHWOM2N5vRxDImxXhbV6gZ1-3UUE7Q1TU7ZuDk2Vzhz4En_f9CJWDcn4ApVDBldbShn7aT14rttCXDIiZPchAW89nEW_2eLHZGq6iovGWd/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.

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.

1. Enter Title of the widget as "Popular Posts".


2. In Most Viewed Choose All time.


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

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

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/AVvXsEjYa3HwHm1mEO0igaqERwO_efNCuUB1CZ6It90x5tF57SGN2huaU7SNaPT61gU6Fj3VPWFPU6rCVahbwdLgoV07hSsxcXwpZ-QJieFMlVgHmSKBVZzWKvD3MHDsFw2w2By-7kl2-pCjMGY/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/AVvXsEiHDL4UZLD65sMucuiwT6JNItYhgMb9g6TYWxttCnnvAUsa1L2QrD5LiJd_7A3tD3dJHSdqzTZbsV690vsP6yz7eywTm69TCeA8aJYLsy9Zy7Moug3T-57XWymzT7iA2vct-rekjr8Wj3-_/s800/Advertise+Here+Money.png" alt='Advertise Here Banner' />

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

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGnz3jsqZ_XKPC5k0jxO1Meme5vTJFnJbh_3nwZ85dGhGNruuJEVdQjBL7yS9zEjZKBakarimDXg7UmRPkX24mvIoU7_i3L6hUlCd77BxY-M5b97tFPpUwYF0oHWrMFaOh_lGDzOAoqWYQ/s800/Ad+Banner.png" />

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

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

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

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNBcbYkO2yeurSinfVpmCL-Fr3Uyu5x9pu-OhWzopMwKy50WKh9Bo8zMdKJvkpVV6XIHCgnnfwknD3xaaIOa_umUuApNpGIJqO7WkoXcdCXqVhKnyjze60Nu-v0FlOUksX-cUfxNnfolVb/s1600/banner_125x125.png" alt='Banner 125*125' />

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

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



If you need any help please Leave a response.

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/AVvXsEhAYn95U-ljarmX8Rqq_qYy_0SqEiZzGQvKCWO0OChguXTNiAzvVj8Cg9YPISIop1Du9s4umujgJoiptfoT0WFmAKH2AE2NWuizvYLkHvOY7my-pzLy3ZOU892Zth6mgJ0jhER9-ArsNmk/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)

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.

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

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:

1. Open http://www.adwords.google.com.


2. Navigate to the Billing and Billing preferences.



3. 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)


4. 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:

1. Promotional offers are usually limited to one per customer.


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


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


4. 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 :)