Friday 9 September 2022

Wednesday 12 June 2019

Where To Place Ads In Blogger To Increase Revenue

Article will discuss about the more common 10 places on our blog where we can place ads and about how to implement them and also which are the most suitable formats based on those available in our AdSense account.

In the Sidebar

How to implement?


This is one of the easiest places to place AdSense. Just go to the page elements (layout), click on the "Add a Gadget" link and add an HTML/Javascript widget with your ad code inside it or add directly an AdSense widget.

Recommended formats: 125 × 125, 120 × 600 and 160 × 600 

Between posts



Implementation. You can implement AdSense ads between your posts: go to Layout, click on the "Edit" link below the Blog Posts section, then check the "Show Ads Between Posts" option.

Recommended formats: 468 × 60, 300 × 250 and 336 × 280 

Under the header


Implementation:

Firstly, convert your AdSense ad code. type adsense code converter in google and
convert your code

Then, go to your Blogger Template (from your Dashboard, click on Template and press the Edit HTML button) and search for:

<div id='header-wrapper'>
Then paste the converted code right after it.
Recommended formats: 728 × 90 and 728 × 15

Above the blog posts



Implementation:

Once again Convert your ad code and search for
 <div id='main-wrapper'>
 in your template. Paste the converted code right after it.

Recommended formats: 460 × 68, 468 × 15 and 336 × 280

Under the title of the post (this will be visible on all the pages)





Implementation:

Convert your AdSense ad code and then go to your Template, Expand Widget Templates and look for:
<div class='post-header-line-1'/>
Note: if you can't find it, search it without the ending slash /

Paste the converted code right after it.

Recommended formats: 468 × 68 and 468 × 15 

Under the post title (visible only on the posts pages)

Implementation:

Convert your ad code and then go to your Template, Expand Widget Templates and look for:

<div class='post-header-line-1'/>
Note: if you can't find it, search it without the trailing slash /

Paste the converted code, following this example:

<b:if cond='data:blog.pageType == "item"'>
<!-- Here your ad code -->
</b:if>
Recommended formats: 468x68 and 468x15 

In the posts' footer




Implementation:

Convert your ad code and then go to your Template, 
Expand Widget Templates and look for:
<p class='post-footer-line post-footer-line-3'/>
Note: if you can't find it, search it without the trailing slash /

Paste the converted code right after this line. 

Recommended formats: 468x68 and 468x15

In the post's body (it will be visible on all pages)




Implementation: 

Convert your ad code and then go to your Template, Expand Widget Templates and look for:
<div class='post-body entry-content'>
Note: in case you don't fint this code, search only for <div class='post-body'>

And paste the converted code, following this example:
<div style='float:right'>
<!-- Here ad code -->
</div>
Recommended formats: 125x125, 180x150, 120x240 and 200x200

In the post's body (visible only in post pages)

Convert your ad code and then go to your Template, Expand Widget Templates and look for:
<div class='post-body entry-content'>
Note: in case you don't fint this code, search only for <div class='post-body'>

And paste the converted code, following this example:
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right'>
<!-- Here your ad code -->
</div>
</b:if>
Recommended formats: 125x125, 180x150, 120x240 and 200x200 

Between post and comments (visible only on posts pages)


Implementation: 

Convert your ad code and then go to your Template, Expand Widget Templates and look for:
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
Paste the converted code just above it, following this example:
<b:if cond='data:blog.pageType == "item"'>
<!-- Here comes your ad code -->
</b:if>
Recommended formats: 468x60, 300x250 and 336x280 

In the blog's footer


Implementation:

Convert your ad code and then go to your Template, Expand Widget Templates and look for:
<div id='footer-wrapper'>
Paste the converted code right after it.

Recommended formats: 728x90 and 728x15





Need Help?

If you need any help feel free to ask in comments section, i would be glad to answer your query.

You may like to check:
KEEP READING

Setting Up 404 Error Page, Redirects and Meta Tags


Its big, its exciting and its worth an applause! Blogger finally introduced the most awaited SEO features for Google hosted Blog Spot blogs. Blogger Team is trying every possible effort to get closer to its biggest competitor Word press in terms of development. Its believed that Blog Spot blogs are not well optimized due to limited Search Engine optimization features but with the introduction of Meta Description for individual posts, custom redirection for broken links, no-follow attribute, 404 error pages, custom robots.txt and robot header tags features, blogger surprised almost everyone today. The problem of wrong post description appearing in social networks like Facebook and Google+ will all be solved thanks to Meta Tags for posts and pages. We will look into each feature one by one so that you may understand clearly the importance of these technical SEO terms.
                                      

What are the new Search Features?

Six important SEO options have been added to Blogger in draft which are: 

  1. Meta Tags for Homepage and Sub-pages 
  2. 404 Error Page 
  3. Custom Redirects for broken links 
  4. Custom Robots.txt For Advanced users 
  5. Custom robots header tags For Advanced users 
  6. Nofollow attribute for post Editor links 
Caution: Out of six new features only two which relate to crawling and indexing of search robots are restricted for Advanced users. I would therefore recommend not to play with them because wrong settings can terribly effect search credibility of your blog therefore keep them as default.

To set the new SEO settings do this:

  1. Go To draft.blogger.com
  2. Then Go to Settings > Search preferences
                                               

Now here you will see three important sub-sections which we will discuss one by one.

Meta Tags

The word meta here refers to Meta Description. It tells visitors what your blog is all about. In search engine results page it looks like this         


Previously we would manually set meta description for blog homepage but now you can set it using this page. So what's new? The new addition is that by enabling this feature, meta description for Posts will activate and you can then configure Description for posts using the blog post editor. To activate this option do this: 

  1. Click the Edit link 
  2. Choose "Enable Search Description?" 
  3. In box define your blog in no more than 150 characters. 

Note: You must write the same description here that you have written manually inside your templates.
                        


4. Click Save changes

5. Since the above description wont work correctly in custom templates therefore we need to insert some code inside the template. Please go to Design > Edit HTML and just below <head> paste the following code for meta description:


<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

 6. Save your template and all done!

Meta Description For Posts

Now open Blogger post editor and you will see a new option for post description:
                             

Now make it your hobby to write a one line description for every post that you publish. Write no more than 150 characters or 15 keyword phrases. By doing this every new post that you publish will have a separate clean description that will attract more visitors by providing precise description of what you post is all about instead of a chopped random snippet of text chosen by search robot. This will help both robots in better indexing your posts and also Facebook and Google+ to display correct description for your posts.

Errors and re-directions

Most of you know that Google webmasters give you several links which are either broken or no more exits. Broken links refer to Pages that no more exits on your blog because for some reason you may have deleted them. Now if some website is linking one of your posts that you deleted then you wont get the reward of the Page Rank juice from that website to yours instead if people click that link they will land no where in your blog and will see a 404 Page not found error. There was no concept of a 404 error page before instead this page would appear:

              

But now you can create your own custom 404 error page. Check ours by writing anything illogical at the end of our blog URL in your address bar or simply click here

                              

Therefore in order to redirect deleted post links to new links and create a custom 404 Error page do this:



404 Error Page 

  1. Click the Edit link next to Custom Page Not Found 
  2. Inside the box write a message that you want to display when readers land on a missing page (404 page)


You can write any message inside this box using simple HTML but once you click save changes and see how your error page looks, you will see that it looks dull and grey and appear inside an ugly box. In order to give it a good designed look with custom CSS styles just like ours then kindly wait for my next post.



Broken Link Redirection
                    

  1. Click the edit link next to Custom Redirects 
  2. Click the check box to simplify the options 
  3. Now you get a From and To input options 
  4. Insert the link of your deleted Post inside From box and insert the link of your new post inside To box. 
  5. Click Save changes 
You can create several redirects by clicking the New redirect button. If you are confused where to redirect a deleted page or post then you can simply redirect all broken links to your Homepage in order to flow all Page Rank juice there.

Crawlers and indexing


Do not worry, its not that advanced and horrifying! :)


This section includes two options which are robots.txt and robot header tags. You may not touch the robots.txt option however you can manage settings for robot header tags severed to search engines. All our long techy SEO tutorials that provided solution for optimizing Blogger pages, posts, homepage, archive and search pages can now be implemented with a simple click of a mouse.

The robots meta tag lets you control how an individual page should be indexed and served to users in search results. In order to keep things simple use the following settings as shown in the screenshot below:

                         

The above recommended settings will tell search engines to index your homepage and all its content, to index your posts and pages but must not index archives and should also not take description suggestions from Open Directory Project (noopd).


Normally, search engines use resources like the Open Directory Project (noopd) and the Yahoo! Directory (noydir) to find titles and descriptions for your content. Generally, you will not want them to do this. The noodp tag prevents them from doing so.

What does unavailable_after Meta tag does?


Though you wont need them but for understanding we would explain it. Most blogs promote seasonal products by writing posts. If you are promoting a new product offer on monthly basis which would expire the next month then you must tell search spiders to stop indexing the old product posts and index the latest one. This will help spiders to give more importance to your latest posts than old repeated posts.

rel nofollow

To understand what is a nofollow link attribute and when should you use it, then kindly read this tutorial:

Internal links should never be tagged as nofollow.


           

Now whenever you need to create a link in post editor you will see two options 

  1. Open this link in new window 
  2. Add rel="nofollow" attribute
                  

Choose to open the link in new tab only if the link is pointing to an external site and choose the nofollow option only for links that point to low quality sites or login pages. To understand what links should be attributed as nofollow, I would highly recommend that you read our article on nofollow as shared above.

Liked This latest Change

I am sure this would greatly improve the way your posts and blog is indexed and crawled by search robots and the way they appear on search results page. It is a great way to improve the quality of your blog and attract a better targeted traffic. Feel free to ask me as many questions as possible in order to throw away all confusions and misconceptions or myths related to SEO that may still be troubling you. I will publish the 404 error page tutorial tomorrow and will share several Designs to give your blogs a new stunning look. 


KEEP READING

How to Add Floating Sharing Bar in Blogger


This is one of the few social sharing widgets that took a lot of my time in designing it.

You have seen the trend of floating sharing count buttons on popular blogs. The traditional icons are now replaced with auto incremented counter buttons that are updated in seconds.

We created different versions of this bar applying both Jquery effects and CSS3 styles but this widget is different because it contains custom twitter, Pinterest and an Email button.

Services like Addthis and Sharethis are both doing a great job but they still need to work on some of their plugin integration conflicts.

Pinterest pin it buttons are causing great trouble and it badly fails in fetching the correct thumbnail image. In most cases it does not even select a image thus making the entire pinning concept tasteless.

We however redesigned the widget provided by shareThis to create a new one by correcting all flaws. This sharing bar would float to the left of your blog posts and would float as the visitor scrolls up or down.

This widget contains counters of important social networking sites that has the potential to bring you traffic by circulating your content to a wider audience.

We have tested the widget on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts. Developers and bloggers are requested to link back to this post if in case they wish to share our code with their readers. Lets get to work now!

Which Social Networking Buttons To Use?

Your first priority should always be Facebook, Google+, Twitter, LinkedIn and Now Pinterest. All these sharing counters play well in circulating your content over a wide range of visitors.

Social Media is a non-stoppable engine, which if driven correctly and carefully can bring tons of valuable traffic each visitor worth a dollar. Since displaying too many count boxes could surely effect your blog load time therefore we have added a AddThis share button which provides visitors with over 330+ social sharing options all at one place. you can also add share button below posts to increase blog trafic See Here Add social media share button below each post in blogger

Why not use JQuery?

Ignore JavaScript and its library which is Jquery as much as possible. Browsers like Internet Explorer still lacks support to all functionalists offered by j query. Moreover JavaScript is responsible for a great percentage of your overall blog load time. 

How it works?

We have integrated both Addthis and ShareThis service in it. In order to customize the twitter button and others we took the Sharethis default code and customize it to change the button image, bubble size and count text. The widget that we initially developed looks extremely attractive compared to this one. You can see the first designed draft version in the screenshot below:

You can observe that both Twitter, Google Plus, Pinterest and Stumbleupon are displayed with custom shapes, same sizes and different count colors. I spent a lot of time trying to make all buttons of the same size by using a common image linked by a sprite but the only problem with this plugin is that the counts wont show the official numbers registered at Twitter, Google and pinterest servers but they will show increments registered at ShareThis. If you add this sharing bar to your blog, you will see zero on all counters unless someone clicks them and circulates your content.


To correct this issue I had to unfortunately dropped the idea of sharing the above designed version and share this tutorial widget instead. However the widget on our blog still contains the twitter button which wont display official count but that of ShareThis. If you would like to replace it with the official big size twitter count box then you can surely do this by customizing the code shared below.

Adding Floating Bar To Blogger

The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code we developed and tested all day. Follow these friendly steps:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Then Click Expand Widget Templates
  6. Search for 
<b:includable id='post' var='post'> 
    7.Just below it paste the following code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left; width:60px;
background-color:#f7f7f7; padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { background:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/ TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) no-repeat !important; height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/ TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{ background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{ color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{ margin-left:5px;}.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{ background-position:0 -19px !important;}.mbt_social_floating .st_pinterest_vcount .stBubble_count{ color:#FF0505; background-color:#fbf8f8 !important;
}.mbt_social_floating .st_pinterest_vcount .stBubble{ background-image:url('http://1.bp.blogspot.com/-meqDjtBStCA/ULFkqTG88qI/AAAAAAAAIGs/hjCRAqGL270 /s400/bubble_arrow_pinterest.png') !important;}.st_pinterest_vcount{ margin-bottom: 0px; display: block;}</style>
<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
<!-- No more works properly so removing it from mbt list --!>
<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
<span class='st_twitter_vcount' displaytext='' st_via='learnblogger'/> <span class='st_pinterest_vcount' displaytext=''/><div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://mybloggertutorials.blogspot.com/2014/05/how-to-add-floating-sharing-bar-in.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Just replace learnblogger with your twitter username. 

  2.  Save your template and you are all done! 

Optional step:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Need Help :

This floating bar would display on post pages only and wont display on homepage. 

The widget has a white background and floats to the left of blog posts. 

If you want it to float to right then all you need is to edit the part of the code bolded in black. 

You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves and your loved ones. Peace and blessings pals! :)

KEEP READING

Attracting traffic from facebook to your blog



Facebook is the top social media website, moreover it is ranked second after Google according to Alexa. It has around 1 billion active users and receive more then 3 billion likes and comments everyday. So you can imagine the amount of traffic you can generate to your blog from Facebook by taking some effective steps. In this article i will share with you few tips to increase traffic to your blog. If you are following this methods then its really good, but if you are not then you must start following as it will really help you to reach more audience and eventually result in greater traffic.

1. Making Facebook Fan Page

You can increase traffic to your blog by making a fan page or brand page of your blog. Now a days majority of bloggers have a fan page. If a person likes your page he receives daily update of your blog directly on his profile or news feed. The more Facebook likes you have, greater is the traffic from Facebook. If you don't have a fan page then go to Facebook page and create one. Just creating Facebook page is not enough, you will need a Facebook Like Box widget for your blog which will allow your blog visitors to like you Facebook page from within your blog. In order to get this widget for your blog check tutorial given below.

3. Adding Good Friends

Add some good Facebook friends that are from your niche, who's blog posts you enjoy reading. By liking and commenting on their post, their followers will see your action on their page and might check your blog. If you blog content is good and impressive you might turn this visitors to your follower. This seem to look long process but it really effective and works very well.

2. Interacting Or Commenting

Interacting with people, helping them with their problems, appreciating fellow bloggers work can help you to stand out among other users and get you respect of other bloggers and even their followers. Commenting on their fan page, liking their post will make you visible or active in social media and help you to achieve more fans and the result you know, more traffic. But some bloggers try to spam by commenting on their profile or on every status they update with link to their page. Try to write few good thing about his post and sometime add link to your blog at the end of comment. Spamming will decrease your reputation among other fellow bloggers So Beware!


KEEP READING

10 Awesome Tips to Make Your Blog Popular


Making a blog popular is not an easy tasks. It takes lots of efforts and time. A successful blog is not achieved over night it requires patience and hard-work. In this post i will share will you few blogging tips to make your blog popular. This are some of tips that every blogger must know to boost his blog traffic. Especially if you have just started blogging or you are planning to start a brand new blog then don't miss this bloggers tips to have better future of your blog.

Blog Template (Look)

Choosing Blog Template should be your first step in starting a blog. As it says "First Impression is the Last Impression". Before reading your blog content what visitors see is your blog look So if the template is dark and messy you can loose lots of traffic. So always use bright and simple blog template.

Social Media

Social Media plays Important role in boosting your blog traffic. Most of blog receive blog traffic from Facebook, Twitter, Google+ So its very important to increase followers on social media sites.

Attractive Post Image

While writing new blog article always add attractive images to your post. As it will attract more visitors to read your article. But always make sure to choose images that are relevant to content of your article.

Interact with Followers

Always stay connected with your blog visitors. Check your comments frequently and answer their queries. Appreciate them for their comments and reading your article.

Do not copy

Do not copy doesn't mean that you can not post what your fellow blogger had already posted. It mean that you can not copy and paste it on your blog. You can post it in your own style with your flavor and by giving credits to your fellow bloggers who first posted it.

Easy Navigation

You blog should be simple and easy to navigate. You can achieve this by adding a Drop down Menu, Categories List on the sidebar and widgets for Popular and Recent posts.

Post Length

The length of your blog should be about 700 - 1400 words. Your blog post should not be lesser than 700 words as google penalize such blogs. If your blog is on technology your post can be small but you should post more then 2 times a day. In simple words it depends on nature of blog but always try to post your article with more then 700 words.

Contests

Always start interesting contests that benefits your blog visitors to keep your readers active and increase your blog followers.

Post Regularly

Good blogger always posts regularly and keep their readers up to date on new technology. Posting regularly will helps you to increase your alexa rank.

SEO Friendly Content

Lean some basic about SEO and try to write SEO friendly blog post title as well as post content. This can really help you to make your blog popular.

KEEP READING

How to Back uP Blogger Template


Template backup is the most important step in blogger template customization. It should be your first step before customizing your blog such as adding widgets or plugins, changing color or font style and more. It helps you to restore your template if you mess something up while customizing your blogger template. Its very simple and easy to follow sol lets get started.

Step 1:
From your blogger dashboard click on Template as show in the image below.



Step 2:Then click on Backup/Restore which is located in up right corner of your blog as you can see in below picture.


Step 3: Then click on Download full template as shown in below image and you are done. You will now have copy of your blogger template which you can use in case you mess up with your blog



KEEP READING

What is SEO (Search Engine Optimization)


Today i am going to talk about SEO and its important. 

SEO stands for search engine optimization. 

It is method or bunch of techniques performed by web devlopers or bloggers to achieve better ranking for thier websites or blog. 

Its method to increase visibility of your website amongst search engines such as Google, binge, yahoo etc. 

For example: A better search engine optimized site are mostly one which get displayed on first few pages of Google or binge search results when you search for particular keywords. 

SEO also helps to increase traffic to your blog. So lets learn more about search engine optimization.

What Is SEO ?

As in introduction paragraph i have told you a lot about it, SEO stands for search engine optimization. 

This is practice performed by web developers to increase their website rank. By optimizing site it makes easier for search engines like Google and binge to index their site and increase flow of traffic to their blog.

Their are lots of things that come under SEO such as site linking, using rich keywords, post title, post length and more. 

Below i have included importance of SEO.


Let me try to explain with simple example on image optimization. 

Suppose you added an image of tree to your blog, search engine will crawl that image but it will not describe what is that image. 

In order to let search engine know more about that picture we need to add an attribute with appropriate keyword or description of that image. 

This is just one technique of SEO, there are many more such techniques. To know more about image optimization check out article given below.



Importance Of SEO

It helps you in better ranking of your page on search engine.
It increases flow of traffic to your blog.
It helps in better indexing by search engines, hence increase in traffic and result in more revenue.
List


KEEP READING