Tuesday, September 22, 2015

How to add Recent Posts Widget on Blogger Blogs

Recently one of our blog readers requested for a way to add a recent post widget on his blog. Today, I want to explain a simple way to add recent post widget on blogger blogs easily without much ado.
Recent-Posts-Widget-for-Blogger
In this tutorial, am presenting you with two methods that you can use to add a recent post widget on your blogger blogs. The first method is adding manually while the second one is adding using generator. Both methods works very ok, you just have to go with the one that you prefer. Before You Proceed, read:

Steps a Simple Recent Post Widget on Blogger

1. Log in to your Blogger Dashboard >> Layout >> Add a Gadget >> choose HTML/JavaScript
2. Choose & Copy the code below into the new HTML/JavaScript and then name it Recent Posts or any name that you like:

<div id="hlrpsb">
<script style="text/javascript" src="http://olusegun-fapohunda-calculator.googlecode.com/svn/justnaira/recent-post.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://Your-Blog_Address-HERE/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://www.justnaira.com/2012/01/recent-post-widget-for-blogger.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://www.justnaira.com" title="Recent Posts Widget">JustNaira</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUvs6y02Nb846ecx5JdOQ0Th0wMRb0KWRztDt6OZ7rwCLLYJUsmiVbLCViFHlNW1Q4DKTo6w64c4jx0VWFH8riS8VA2fTBRVhSRvD6wmJ8bxWFCElcqus9CS6qmeYUyqU3wT1KoSjj5Z1/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

3. Click on Save Arrangement.
4. Don’t forget to change the Your-Blog_Address-HERE to your blog address e.g www.justnaira.com. You can also change the value of var numposts = 10 to any number of post you want to appear on the recent posts list and finally,you can change false in var showpostdate = false to true if you want the post date to appear on the recent posts list.

Add Recent Posts Widget to Blogger Using the Generator Below

A generator has been made so that recent post widget can be easily installed on blogger blogs without copying and pasting of code, but it will be easily installed directly on it.

You can customize how you want the recent posts widget to appear on your blogger blog by checking and uncheck what you want and what you don’t want to add to the widget on the generator above. Use the comment box below if you encounter any problem in the course of adding the widget.

Source: http://www.justnaira.com/2012/01/recent-post-widget-for-blogger.html

How To Add Facebook Share Button With Counter to Blogger Blog

Adding a Facebook Share Count Button to Blogger make it easy for your blog readers to share your blog content on their Facebook wall and this is a good means to increase your blog traffic.
Facebook-Share-Counter-Button
This tutorial will show you how to add a Facebook Share counter Button to every post on your blogger blog. This counter will show the number of times a post is shared on a blog and it is a good way to know how popular a post is.

Instructions on How To Add Facebook Share Count Button to Blogger Blog

Below is a code generator form you need to generate the share count button you love to have on your blog. This code can be added to your blogger blog by following 4 simple steps:
1.    Choose the share pattern you love and customize it using the Generator form below.
2.    Go to Blogger Dashboard  >>> Template >>> Edit HTML
3.    Click on the Expand Widgets Templates to tick it and search for <data:post.body/> (use CTRL+F to locate it fast)
4.    Paste the copied code from the Generator form Before or after <data:post.body/> tag

Note that if the code is added before <data:post.body/> tag, it will appear at the top of the post and if it add after <data:post.body/> tag, it will appear at the bottom of the post

How To Add Reactions widget in your blogger blog

To configure the reactions widget follow these steps.
1.Sign in to blogger account.
2.Go to layout Page.
3.Click on the "edit" link under the blog posts
4.On the pop up window check the "Reactions" widget.Click save.
If you are using the default blogspot template, the widget would appear in your blog.If not you have to add some code to your blog's template To do that follow these steps.
1. Go to edit Html page of your blog.
2.Check the "Expand widget templates"
3.Find the following code in your template:
<data:post.body/>
4.Then immediately after this line add the following code.
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
Save and Preview your blog.

How to Add Adsense ads inside Blogger blog posts or between blog posts

How to place adsense ads inside Blogger blog Posts:

1.Sign in to your blogger dashboard>layout>Edit html
Check the box next to 'Expand Widget Templates'
2.Scroll down the window till you see this code
<b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>
3.Replace that code in the template with the below code
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
4.Again,scroll down the template and find out data-post body tag and paste the below code just above that code{this will show ads above the post body.If you want ads to show below the post,paste the code below that tag.
Here is the code to paste:-
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
That's it!

How to place adsense ads between Blog posts:

1.    Sign in to your blogger dashboard>click on the layout link
2.    Click on the Edit link in the "Blog Posts' column
        ..............a pop up window opens..........
3.    Check the box next to 'Show ads between Posts'
next,configure the ads,choose the format,colours,etc and SAVE THE CHANGES.
That's it! Now your adsense ads will show between blog posts.

How to Embed Adsense add unit in Left or Right corner of post content

This will explain How to Embed Adsense add unit in Left or Right corner of post content
Generate Parsed code for adsense code because we cannot put adsense code directly in the xml.So parse it using AdParser.
After parsing,your ad code Should look like this.

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:-
<div class='post-header-line-1'/>
4.To place ad Top left corner of your post ,Paste the below code, below of above line.
<div style=”display:block;float:left;margin: 0px 10px 0px 0px;”>
Your Adsense Parsed code
</div>
Attention :  We can't put "<div style=”display:block;float:left;margin: 0px 10px 0px 0px;”>" and "</div>" directly in the xml.So we must generate Parsed code for these code using AdParser. 
So Final Code you have to copy below the line "<div class='post-header-line-1'/>" ,look like this.
 

If you Want To place ad Top Right corner of your post,Replace "left" with "right".

5.Click on "Save Templates" and Refresh your site.

How to put AdSense in the Middle or Anywhere of Blogger posts

If you want to put Adsense ads in the middle of Blogger posts follow the steps below.
1.Generate Parsed code for your adsense code because we cannot put adsense code directly in the xml.So parse it using AdParser.
After parsing,your ad code Should look like this.
2.Log in to your dashboard--> layout- -> Edit HTML
3.Click on "Expand Widget Templates"
4.Scroll down to where you see this:    <data:post.body/>


5.Now replace above code with below code.

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<!-- Your AdSense code here -->
</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Note : You must you must replace <!-- Your AdSense code here --> with Your Adsense Parsed code.
6.Now save your template.
7.In every blog post ,Put this special code : <!--Your Adsense code--> in the exact point you want to appear AdSense advertising.Now you are done.

Most Wanted Best Adsense Tips And Secrets

AdSense Tip 1: Find Best keywords for your content

Before serving ads on a web page, check its keyword density. You can find many free keyword analyzer tools in internet searching the word "free keyword analyzer".

AdSense Tip 2: Improve your keywords

Get keyword suggestions from Google AdWords Sandbox. Get new keywords that can help you improve your ad relevance.

AdSense Tip 3: Make content rich websites

This means that content-rich websites of a popular topic should attract a large amount of ads.

AdSense Tip 4: Write a new page/blog post every day

This is very important. The more content you have, the more visitors you will get. Put an Adsense unit on each and every content page of your site.

AdSense Tip 5: Choose the right AdSense format

The top three AdSense formats are for many webmasters:
336x280 large rectangle
300x250 medium rectangle
160x600 wide skyscraper
Another successful format is the 728x15 horizontal ad links, that can be placed under your navigation bar.
Use "Allowed site" feature of adsense to protect yourselves.If anyone put adsense codes in their websites you must not worried about it.

AdSense Tip 6: Adsense Color tips

When creating your Google AdSense ads it is recommended to use the color scheme and style of your website so that the ads blend in well.Google Ads with no background color and no borders will always perform better. Make the border color and background color same as your page background color.

AdSense Tip 7: Position tips

Place the AdSense ads in a prominent place around the top/left part of your page or under your headlines.
For short articles, CTR is best when ads are placed just above the content.
For long articles, CTR will improve if you place ads somewhere in middle of the content or just where the article ends.
Use Text Ads instead of Image Ads as users get more options and the payout is often higher.
Important:Don't places images next to Google ads as that will invite a permanent ban to your AdSense account.

AdSense Tip 8: Increase the number of ads, but not too much

If you have a lot of text on a page, use multiple AdSense units. You can use up to three AdSense units on a page, two AdSense search boxes and one unit of ad links.

AdSense Tip 9: Preview Google ads

You can find out what ads will be served by Google AdSense if you install Google AdSense Preview Tool, a very simple tool available only for Internet Explorer 6.0. Click to advertiser sites without generating invalid clicks, and easily add their URLs to your URL filter list. Because AdSense uses geo-targeting, Google serves different ads for other countries.

AdSense Tip 10: What not to do with adsense

Don't click on your own ads
Don't ask others to click on your Google ads
Don't manually change AdSense code
Don't place Google ads on sites that include prohibited content (e.g.: adult sites)
Don't employ cloaking, hidden text or farm links
Don't use AdSense ads on the same page with similar ads (e.g.: Yahoo Publisher Network)
And also don't refresh your site excessively.

AdSense Tip 11: Use section targeting

Use section targeting to emphasize some content in your page.To know more about section targeting read this article.

AdSense Tip 12: Your Google ads should be visible

Make sure your text ads are visible well to the surfers in all screen formats.

AdSense Tip 13: Use AdSense channels

You can categorize the content of your website into channels and then track your performance. This way you can experiment with different types of ads and see which is performing the best.

AdSense Tip 14: Follow Adsense Programme Polices

Strictly follow the rules mentioned in Adsense policies. You will always earn more monet from Adsense if you do it.

AdSense Tip 15:Never modify the Google Adsense HTML code

If have trouble embedding AdSense code in your Blogger template, read these articles.

AdSense Tip 16: Don't place ads in pop-up windows,error pages,empty pages

You must always remember to not to do it.

AdSense Tip 17: Don't start a "MFA"(made for adsense) web site

You will never make money out these Made for Adsense websites. Instead, write on topics what you are passionate about. Don't waste your money and time searching on high-paying adsense keywords lists.

AdSense Tip 18: Block Low Paying Adsense Ads

Block low paying advertisers with Filters.For more info read this article.

AdSense Tip 19: Adsense For Search

Always select the setting to open Google Adsense search box results in a new browser window, so you won't lose your visitors.