Friday, 31 August 2012

Inserting Adsense ads inside Blogger Blog Posts

Posted by Crypto Magic World on 09:20 with No comments
Placing adsense inside the blog posts increases adsense ads CTR (click through rate).
Using simple layout page, you can place these ads anywhere in your blogger blog, like in the sidebar, before posts, below posts even between the posts, but by using any gadget, you can’t place them INSIDE any post.

WHY TO PLACE ADS INSIDE POSTS?

There’s no gadget available to place adsense ads inside the posts. So, to Place adsense ads inside a blogger post, you have to modify the template a little bit to place the adsense code in there.
And if you dont know, then let me tell you that CTR of the ads inside the blog posts is much more higher than the ads outside posts.
There are dozens of articles explaining this method of placing ads, but most of them are either poorly explained or without any screenshot. But here I’ll try to keep the procedure as simple as possible.

So, here it is:

INSTALLATION

1. Get your adsense code, and Encode it before placing.
To do the encoding, you can use “Postable” or use other sites.
2. Now, go to Layout section and “Edit HTML” tab.
3. Its always recommended to download a backup of your template before making some changes. So download the template!
4. Click “Expand Widget Template” checkbox.
5. Press “Ctrl+F” and find:

<data:post.body/>

If you are using “Expandable Post Summaries” in your template, then you’ll find <p><data:post.body/></p> and infact two of them.
In that case, you are supposed to place the adsense code above the first

<p><data:post.body/></p>
6. Now Copy the code below and paste it just ABOVE the tag you searched in step 5.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:center;padding:5px;'>
--- PLACE YOUR ENCODED ADSENSE CODE HERE ---
</div>
</b:if>
…Don’t forget to replace the text in red with your encoded adsense ad code, that you have done in step 1.
These <b:if> and <div>tags will decide the alignment of your ad. So dont leave these while pasting the adsense code.
DONE! After doing this step, An adsense ad will be placed just below the title and above the text of EACH and EVERY post of your Blogger blog automatically.

PLACING ANOTHER AD INSIDE POSTS

Now if you want to place another ad inside posts, but below the text of the post..You can search fo the same tag of step 5.
But this time place the code (of step 6) BELOW it.
This will place another adsense ad below the text of all the posts of your blog automatically.
Now you have 2 adsense units INSIDE your blog posts. One Just below the titles/above the text and second at the end of the posts’ text. :)
Your code should look like this after placing the ads code.
placing-adsense-ads-code-inside-blogger-blog-posts
The highlighted gray area is the tag that you have to search.
Highlighted green area is the (encoded) adsense code.
Highlighted red are the <b:if> and <div> tags that assign the alignment of the ads. I highlighted them, just to make the picture clear and easy to understand.
(Don’t leave these tags while copying from step 6!!)

CUSTOMIZATIONS:

You can change the placement and alignments of these ads within the post.

ALIGNMENT

Just change the “center” (in blue) in step 6, to “right” or “left”, to change the ad’s alignments respectively.
See these screenshots, to understand the alignments.
“float: right”
adsense-placed-on-right-side
“float: center”
adsense-placed-above-center

PLACEMENT

You can also place the ads side by side inside the post.
To do this, you have to place both the ads, either ABOVE or BELOW

<p><data:post.body/></p>
And after that, make one ad to float “left” and the other one to float “right”. :)

Remember:

You can place maximum 3 adsense units on a page as per Google’s Terms. If you are placing 2 inside the post, then you can place only one outside the post.
Like I placed, 1 in side bar, 1 inside the posts (just below titles) and remaining 1 below posts and just above “Related post”. ;)
Hope you have got the simple procedure.

Tip:

Instead of viewing your blog after saving changes in the template after each step. Use “Preview” feature for quick views.
Although clicking is not enabled in preview window, but there’s a little trick, to enable clicking in preview…
While the preview window is loading, quickly click any post title as soon as you see any. This will open that post in the preview window, and clicking will also be enabled. You can then see the changes you’ve made! ;-)

This widgets really helps you in keeping the visitor’s interest in your blog. A reader finds this widgets when he reaches the end of an article.
Related posts widgets shows all the posts related to the article currently being read. It actually fetches and shows all other posts with the same label with which current post is labeled.
< imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
To see a demo, scroll down below this post, to view “Related Articles”.
To install this in your blogger blog, follow the steps:
1. Goto Layout > EDIT HTML
2. Find </head> and just ABOVE that paste the code:
<!--Related Posts Scripts and Styles Start-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI1UJXLxCtUz2L5UlzlE_rJy6vw6AKoQxk-jMQISEWdTD5e1ts2Ghw7cdWwDcpvywuXkGAtubZ67dasa9JC_Qz40ruxjwSB4_2mgcZ7qaT6CobxiCYJ1T284aJcLEYhZT9oYqaxD0nD6w/s200/greentickbullet.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://sites.google.com/site/allfreecoursesblog.blogspot.com/uploads/Related_Posts.js' type='text/javascript'/>

<!-- Related Post script END -->

3. Now, search for
<data:post.body/>
And just AFTER this, paste this code:
<!--Related posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Articles: </b></font><font color='#ffffff'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; data:label.name &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related posts ends-->
If you want to change the title then change the text in red.
Number in green is the number of posts this hack can show. You can increase/decrease the number of posts according to your need.
4. Save the template and view any post.

SEO: Best Meta Tags to Optimize your Blogger Blog

Posted by Crypto Magic World on 08:14 with No comments

To get a higher rank in search engines, adding meta tags to your blog is the MOST essential thing to do just after you create your blog. Most of the bloggers face low traffic problem with their blogs just because of the missing meta tags in their blog’s template.
Meta tags are a great way to provide search engines with information about your site. It’s an essential part of your SEO(Search Engine Optimization) which tells search engine about a blog and it’s author and helps you get a high ranking which in turns gives you more traffic.
To add meta tags to your blogger blog, do following steps:
1. Login to your Blogger account.
2 Click Layout > Edit HTML
3. Find <b:include data=’blog’ name=’all-head-content’/> and just BELOW it copy following code:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='PUT-YOUR-BLOG-DESCRIPTION-HERE' name='description'/>
</b:if>
<meta content='ADD-KEYWORDS-HERE' name='keywords'/>
<meta content='WRITE-YOUR-NAME-HERE' name='author'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='Description'/>
</b:if>
4. Click Save.
After adding this you’ll see a dramatic improvement in your search engine rankings and incoming traffic.

Install/Add Recent Comments Widget in Blogger Blog

Posted by Crypto Magic World on 07:59 with No comments

“Recent Comments” Widget shows your Blogger/Blogspot Blog’s recent comments. This widget is one of the important widgets for blogger blog which helps you in viewing recent comments in your blog.
Follow the simple steps to install a “Recent Comments” Widget in your blogger blog.
1. Click the button to Add the widget.



Sign in to your blogger account (if you’re not already)
2. Choose your blog from the drop down list (if you have multiple blogs) and Click “Configure Gadget”.
3. Make changes according to your needs.
You can choose how many numbers of comments to display, with length of their summaries. By default 10 recent comments and 200 summary length is selected.
4. Click Save.
You’ll be taken to your blog’s layout page, where you can drag and drop the widget where you want to show it.
If you see a video that you want to insert in your blog post then you just copy the HTML code given with the video to embed in a web page. But what to do when we want to embed a flash video(.swf)?

No HTML code is given with a flash video to embed in your web page. However you can obtain the link of the flash video, but still cannot embed in your web page or blog post. To embed a flash video in your blogger blog post, you need to place a small piece of code.
1. Create New Post, and switch to Edit HTML mode of post editor.
2. and paste this code wherever you want to show the flash video:

<p><embed align="middle" allowscriptaccess="always" height="400" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://www.YOUR-SITE-ADDRESS.com/VIDEO-NAME.swf" type="application/x-shockwave-flash" width="550"></embed></p>
3. Publish the post and see the result. 
Blue is the actual video’s link.
Green is the alignment – you may change it to right or left.
Red is height and width of the video.