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