Search For Adsense Ads by Image using Ad Review Center Tool

Have you ever considered grabbing more control over your AdSense ads through, say the AdSense Ad review center? The Ad review Center is a really powerful tool that lets you tweak the settings, and control ads that appear in your site's ad units. Following a set of changes and improvements from Google earlier this year, that gave this useful tool even more power and reliability, Google has now introduced another remarkable feature - image filtering. This new feature will let you find ads, and review them very easily and effectively, hence saving your time.

Recommended for you: How to Block annoying AdSense Ads using Publisher Toolbar?

What's the use?

This new feature makes use of the same technology as Google Image Search. You can upload an image from your computer. And this tool will then use the technology to search for similar images, and will return ad banners that have a similar image in them. You can then review such banners, and take an appropriate action.

This comes real handy when you want to not display an ad banner that has, let's say, the logo of a competitor of your site. Seems logical? You can simply take a screenshot or image of your competitor's logo, and then upload it to this tool. You will then see all ad banners that have that logo in them. You can then block those banners. Simple!

To use this feature, simply log into your AdSense account. Then go into the 'Allow and Block Ads' tab. There, you will see this feature, with an option to upload an image etc.

Limitations

Currently, you can only upload an image of maximum size 2 MB, and a max dimension of 1024 pixels. Also, this feature for now only returns image ads. More functionality will be added later on, and we'll keep you posted about it :)

We'd recommend you use this tool rarely, and with care. Only block content that you absolutely don't want to appear, because blocking ads is generally not a very good idea. It isn't a good revenue generating practice, and can reduce your revenue. So be careful! Good luck :)

Read More

Show each Author Picture In Post Titles Dynamically

Its a pleasure for me to share one of a Blogger tweak that we managed to implement on BloggingeHow.comrecently that makes sure that every author's image is shown up beside their post titles, both on home and post pages. The dynamic tweak enables every individual authors in Blogger based blogs to get them selves showcased. Also as for readers, its a much satisfying thing to know the actual person behind the article. Its much easier to get your self related with the post. It will display author pics dynamically unlike the static way that Mohammad shared months ago which can be find here: Show Profile Avatars next to post titles.

 

Live Demo

 

PS: At MBT a different approach is utilized and that alternative tweak will be shared by Mohammad himself so stay tuned to that.

What the trick?

The most tricky part in implementing the dynamic feature was to align the image and thepost titles in a single line and not laying down the actual code for displaying individual authors images. As every other Blogger template is different as of its coding structure, so the below tutorial might not exactly match with your template, though you would be given the idea of what sort of code to search for in order to get to that point in the code where you have to implement the Dynamic author's profile images in Blogger.

Step #1 Open Edit HTML section

1. Navigate towards your Blogger Dashboard >> Template >> Edit HTML
2. backup your template. 
3. Hit 'Expand Widget Templates' and find the following code

<h2 class='post-title entry-title'>

 

Though, note that you might not find the exact code in your template, though you can search for something similar that says 'Post Titles'. Once you find the above code, you're now on the right place to implement the dynamic author's profile tweak.

The approach?

Now, there are multiple ways through which we can show up the author's image beside post titles. For this tutorial and what we have implemented on the demo blog, we'll be using HTML Tables to wrap up the post titles in a single <td> tag and the author's image in another <td> section.

The green box indicates first <td> tag while the red box indicates another one. Now that we know what code is responsible for displaying the Post Titles, we can easily place Dynamic author's profile beside it with the help of HTML table.

Step #2 What to do?

Once you have found the above code in Step #1 you now have to mark out the entire code that shows up the post titles as mentioned below.

 

<table>

<tr> <td>

<b:if cond='data:post.author == &quot;Author #1 Exact Name&quot;'> <span style='margin-right:5px;'>

<img src='Author #1 image link' style='border:1px'/>

</span>

</b:if>

<b:if cond='data:post.author == &quot;Author #2 Exact Name&quot;'> <span style='margin-right:5px;'>

<img src='Author #2 image link' style='border:1px'/>

</span>

</b:if>

 </td>

<td style='vertical-align:middle'>    

<b:if cond='data:post.title'>     

 <h2 class='post-title entry-title'>      

<b:if cond='data:post.link'>        

<a expr:href='data:post.link'><data:post.title/></a>      

<b:else/>         <b:if cond='data:post.url'>          

<b:if cond='data:blog.url != data:post.url'>            

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h2>     </b:if>

</td> </tr>

</table>

 

The above code can be divided into 2 parts. The first section is packed into first <td> tag as mentioned before. The other one is shown in <td> color. Wrap your Post Titles code that are in your template with in the <table> <tr> <td> tags as shown above with the author's profile image/conditional tags in the first <td>. You can relate in a much better way by having a look at the image below.

How does it work?

All that table thing was to make sure that the Author's image and the Post Titles are aligned with each other. Though the actual Dynamic Pictures comes in from the below code:

 <b:if cond='data:post.author == &quot;Author #2 Exact Name&quot;'> <span style='margin-right:5px;'> <img src='Author #2 image link' style='border:1px'/> </span> </b:if>

As you would have noticed, Author #2 Exact Name that is with in the conditional tags is responsible for showing the content with in it only when the post is written by 'Author #2 Exact Name' string. So to make that work, you got to make sure that what ever name you enter, that must be the same as the actual author's Blogger's author's account name. Other wise that wont work.

Was that difficult to implement?

I know it can be tricky to find the exact code responsible for showing the Post titles, though the above explanation would have hopefully helped you out in understanding that what needs to be done. In case of any problem, simply leave out your quires below and I would love to get back to you guys as soon as I can. Salam!

Read More

Show each Author Picture In Post Titles Dynamically

---

Its a pleasure for me to share one of a Blogger tweak that we managed to implement on BloggingeHow.comrecently that makes sure that every author's image is shown up beside their post titles, both on home and post pages. The dynamic tweak enables every individual authors in Blogger based blogs to get them selves showcased. Also as for readers, its a much satisfying thing to know the actual person behind the article. Its much easier to get your self related with the post. It will display author pics dynamically unlike the static way that Mohammad shared months ago which can be find here: Show Profile Avatars next to post titles.

 

Live Demo

 

PS: At MBT a different approach is utilized and that alternative tweak will be shared by Mohammad himself so stay tuned to that.

What the trick?

The most tricky part in implementing the dynamic feature was to align the image and thepost titles in a single line and not laying down the actual code for displaying individual authors images. As every other Blogger template is different as of its coding structure, so the below tutorial might not exactly match with your template, though you would be given the idea of what sort of code to search for in order to get to that point in the code where you have to implement the Dynamic author's profile images in Blogger.

Step #1 Open Edit HTML section

1. Navigate towards your Blogger Dashboard >> Template >> Edit HTML
2. backup your template. 
3. Hit 'Expand Widget Templates' and find the following code

<h2 class='post-title entry-title'>

 

Though, note that you might not find the exact code in your template, though you can search for something similar that says 'Post Titles'. Once you find the above code, you're now on the right place to implement the dynamic author's profile tweak.

The approach?

Now, there are multiple ways through which we can show up the author's image beside post titles. For this tutorial and what we have implemented on the demo blog, we'll be using HTML Tables to wrap up the post titles in a single <td> tag and the author's image in another <td> section.

The green box indicates first <td> tag while the red box indicates another one. Now that we know what code is responsible for displaying the Post Titles, we can easily place Dynamic author's profile beside it with the help of HTML table.

Step #2 What to do?

Once you have found the above code in Step #1 you now have to mark out the entire code that shows up the post titles as mentioned below.

 

<table>

<tr> <td>

<b:if cond='data:post.author == &quot;Author #1 Exact Name&quot;'> <span style='margin-right:5px;'>

<img src='Author #1 image link' style='border:1px'/>

</span>

</b:if>

<b:if cond='data:post.author == &quot;Author #2 Exact Name&quot;'> <span style='margin-right:5px;'>

<img src='Author #2 image link' style='border:1px'/>

</span>

</b:if>

 </td>

<td style='vertical-align:middle'>    

<b:if cond='data:post.title'>     

 <h2 class='post-title entry-title'>      

<b:if cond='data:post.link'>        

<a expr:href='data:post.link'><data:post.title/></a>      

<b:else/>         <b:if cond='data:post.url'>          

<b:if cond='data:blog.url != data:post.url'>            

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h2>     </b:if>

</td> </tr>

</table>

 

The above code can be divided into 2 parts. The first section is packed into first <td> tag as mentioned before. The other one is shown in <td> color. Wrap your Post Titles code that are in your template with in the <table> <tr> <td> tags as shown above with the author's profile image/conditional tags in the first <td>. You can relate in a much better way by having a look at the image below.

How does it work?

All that table thing was to make sure that the Author's image and the Post Titles are aligned with each other. Though the actual Dynamic Pictures comes in from the below code:

 <b:if cond='data:post.author == &quot;Author #2 Exact Name&quot;'> <span style='margin-right:5px;'> <img src='Author #2 image link' style='border:1px'/> </span> </b:if>

As you would have noticed, Author #2 Exact Name that is with in the conditional tags is responsible for showing the content with in it only when the post is written by 'Author #2 Exact Name' string. So to make that work, you got to make sure that what ever name you enter, that must be the same as the actual author's Blogger's author's account name. Other wise that wont work.

Was that difficult to implement?

I know it can be tricky to find the exact code responsible for showing the Post titles, though the above explanation would have hopefully helped you out in understanding that what needs to be done. In case of any problem, simply leave out your quires below and I would love to get back to you guys as soon as I can. Salam!

Read More

What has having your own blog taught you about SEO?

If you have any interest in the web-development industry, you will find that there are countless entries on the internet about Search Engine Optimization (SEO) - from so-and-so hot SEO tactics to the best SEO practices, and so on. There are also tonnes of blogs and websites like Search Engine Land, SEOmoz etc that provide SEO tools, guides, tips, and more. But can you learn all about SEO from these sources? For a person working in the SEO industry, or working as a SEO, is it necessary for him to have a blog or a website? Have you learned something about SEO that you wouldn't know if you haven't had your own blog?

Most people create a blog to create an outlet to their thoughts, or to share content with friends, family or the world. But there's a lot more to blogging than meets the eye. When you create a blog or a website, you step into a whole new mind-set of a webmasters, and basically get a new perspective on the whole 'SEO' for websites. If you're only working on reducing spam, then you will always look at the bad things out there, and how to reduce them. To be fair, you have to look at the other perspective as well, i.e. look at the good content out there as well, and work for its enhancement.

It is the natural instinct of people to want to get a higher ranking in search engines, and to make their content available to the whole world. It doesn't mean that they are spammers, and should be cast aside. Instead, they should get an opportunity. It's a natural instinct to want to do better.

If you have a blog or an online presence, you'll definitely learn a few things you can't learn otherwise. For example, if you make a list of 'top 10 such and such things', you'll get more clicks etc. You also learn about keyword selection, how to write a proper title, what things are more popular (such as iPods, Chrome extensions etc). It's always helpful to actually see all stuff in action, and not just learn about it in an academic way.

Such things can only be learned from experience, and not from theory. So everyone interested in the field should have a blog or a web presence, because that's the only way to learn the ins and outs of it. Cheers :)

Read More

Reposition Navigation Buttons in Blogger!

The navigation buttons or links that are displayed at the bottom of each comment section in BlogSpot blogs enable visitors to switch between new and old posts or move from one post page to another ordered by date and time. These buttons become less of use when number of comments increase too much. Normally readers do not even observe the navigation deep down and this results in loss of precious pageviews. I have always emphasized that value pageviews more than unique visitors because it is indeed pageviews that turns into revenue generating page impressions both for AdSense or any other Ad Network.  You might have seen the More, Next and Previous button showing inside the top black sticky bar on MBT homepage and post pages. It is really not possible to shift a Post data item to any other widget section in blogger. Doing such results in "Data variable not found in dictionary" error or similar.

We played a work around and used Cascading stylesheet Position properties to allocate fixed positions to these buttons anywhere on the page. This is again a unique addition to Blogger Customization and being implemented for the first time. The tutorial today will not only help you change the position of navigation links but will also teach you to install a custom sticky bar just like the one we are using on our blog. We are pretty sure you will find today's tutorial really easy yet delicious!

PS: Tested with Chrome, Firefox, IE9 & Safari.

STEP1: Adding the sticky bar

First comes first. I have already shared a detailed tutorial on adding a stickybar to blogger. Please first install a stickybar on your blogs and then try step#2 of today's tutorial.

• Read: Create a StickyBar!

Note: The style that I am using on MBT is different from that of the tutorial so if you want a similar color theme then simply copy the stylesheet from MBT source file or let me know to help you.

STEP2:

Now comes the interesting part. What we will do here is simply shifting your current Newer, Older & Home buttons to the top left of the stickybar and replace them with more fancy buttons like the one we are using.  Follow these steps:

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML and then check "Expand Widget Templates"
4. Search for the following CSS classes and delete them all: You will find three such classes or more starting with either #blog-pager or .blog-pager

#blog-pager {
------
}

#blog-pager-newer-link {
----

---

--
}

#blog-pager-older-link {
-----

---

--
}

   5.   Now after you have deleted them, add the following code in their place:

#blog-pager {
text-align:center;
}
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-320px;
top:0px;
margin-top:5px;
}

#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-290px;
top:0px;
margin-top:5px;
}

#blog-pager-more-link {
position:fixed;
z-index:9999;
margin-left:-20px;
top:0px;
margin-top:5px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-627px;
top:0px;
}

#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-597px;
top:0px;
}
}

What we did in step4 and step5 was simply replacing your old code with the new one.

    6.   Next search for the following chunk of code:

Note: You are only concerned with finding the two highlighted codes. The code inside them may look different for your template so just finding these two highlighted tags and then follow step7.

<b:includable id='nextprev'>
  <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;' title='Previous'>&#171; Prev</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;' title='Next'>Next &#187;</a>
      </span>
    </b:if>
<span id='home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

     7.  Replace the code inside them with the following code as shown below:

<b:includable id='nextprev'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-more-link'>
      <a class='blog-pager-more-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEMUDY8tV39tDyYJiyGuMPYmnw2WT1iw7jEKJKFyP_1dtQqUI6OVYblJfU3yTO1NMyN0idX2rFPUCi9XC6IqZ-obfP1tWL23pvd5gdtx9qXNPy5-OX-rOI8_kA71AkYXct9PcH0yatM2sH/s400/more.png'/></a>
      </span>
      </b:if>
</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <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;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw8xfD4l_z4e2k3K3hHdo3mwaXpHU7-De_PO4Mn6CArabeEEA1D20egCodOhCeYou3hmrrSqzH5kToQKaZUC1wEkG97-pqM9GI3yWBQB3cpQcnRXboGn1x_OE20a226Y7almHscwdZTqw7/s400/Previous.png'/></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;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXbk7o-5GcHV9nmusPq0mpoV0bD8viggt9UGFRDXAIhsfeFVzklQllprnZ5yCykHqPxI1tJonHDjObgINdZqeigSLxMWHF5qfC08Aqx6j5ZKRr3iLlFwu_e9lmLD5cFS-rV08APXVqgn0/s400/Next.png'/></a>
      </span>
      <b:else/>
 
    </b:if>

  </div>
  <div class='clear'/> </b:if>

</b:includable>

It was that easy!

   8. All done! Visit your Blog to see it functioning just fine. :)

How it works?

Previous will display newer posts

Next will display Older posts

 More will display on homepage alone.

• Button More is responsible for displaying the next set of previously published posts. It will show a bunch of posts depending on the number of posts you allowed to be displayed on homepage.
• The other two buttons will help the visitor to navigate between next and previous page. If the visitor is on your newly published post then the Previous button will not show up and Next will show alone.

Everything is operated using conditional statements provided by XHTML 1.0.

If you are looking for read more buttons then do check our Icons and buttons categorythat has been downloaded over thousands of times and found on almost every Blogger blog today: Download from here

Questions?

I have one last paper on 29th Nov  after which I will be free for one month to help you all with every query you may have. The blog is being maintained by co-authors because I am not currently available. I am writing posts as soon as I get some spare time. You are most welcomed to ask any question you may have related to this post. Off-topic questions should kindly be avoided. I just hope you find this new addition useful to your overall Pageviews. Wish you more power buddies. Peace and blessings. :)

Read More

Why might GoogleBot get errors when trying to access my robots.txt file?.

A great thing about Google is, it gives webmasters all the help they need to get their websites into Google's index. There's a nice tool available in Google Webmaster Tools called 'Fetch as GoogleBot'. This tool, as we discussed in our SEO Tips for start-ups, can be a great help diagnosing errors and getting a website in Google's index faster. A robots.txt file is used for crawling efficiency, and preventing certain pages from being crawled etc. Sometimes though, GoogleBot might have difficulty fetching your robots.txt file. Here's a solution from Google to this problem.

The original question asked o the GWT forum had to with crawling inefficiency. The GoogleBot was unable to crawl a robots.txt file 50% of the time, even though the file could be fetched from other hosts with a 100% success rate. It is worth noting that this was on a plain nginx server and a mit.edu host, so that should have a pretty good up-time. So the problem seems to be with Google, right?

Sometimes, people try cloaking on their websites. Cloaking means hiding content from crawlers, so that different content is served to crawlers and users. So what a user might see on their websites might be a lot different than what crawlers such as GoogleBot see. Not only is this a bad SEO practice, it can also have consequences.

During cloaking, people sometimes make a mistake, and end-up reverse-cloaking. So while browsers and user agents see the website fine, crawlers don't see any content. Making such a mistake is like axing your own foot. So this could be one of the reasons to the problem.

As we discussed about at the start, the Fetch as GoogleBot feature in Google Webmaster Tools is a pretty awesome tool. You can use it to fetch your robots.txt file. t will tell you when there's a problem. Many people might not know this, but sometimes, their web hosts might alternate between different systems and hosts. So a 50% success rate might be accounted for one of the hosts being improperly configured. You might want to contact your hosting company about this.

These two could be the most probable causes for robot.txt crawling errors. Did this help? Please do let us know. And stay tuned for more SEO questions and their answers :)

Read More

Why do paid links violate Google's guidelines while other ads don't?

Google is known for its non-tolerance for paid links to a site. Previously, sites tended to gain ranking on account of the paid links they had pointing to themselves. Bu Google has been working on its algorithm, and the Panda and Penguin updates have been all about cutting down on such spam activities. Now Google delivers a penalty to such a website that has paid back-links. But if you come to think about it, don't ads seem to do the same thing? For example, if you buy an ad slot on a website that points to your own site, then how is that different from links on other websites that you buy?

Google is not against advertising. It is great for educating people, and alerting them. It can drive traffic to a site, and raise awareness. And there can be a lot many reasons for advertising, but Google has nothing against them.

But the simple answer to the question is, one type on link manipulates search engines, whereas the other type does not (you can guess which does which). When you're paying for links that pass PageRank, fundamentally, you are paying for something that manipulates search engines, something that creates the worst search experience for users, and hence violate Google's Terms of Service.

So you can use AdSense, DoubleClick, Chitika, or whatever you're interested in. What Google looks for is, whether search engines get worse, or whether PageRank is being passed, and whether search engines get manipulated by a particular set of links.

So you can make sure you don't pass PageRank with no-follow, and you can have links go through a JavaScript redirectot where that's blocked by JavaScript. The vast majority of banner ads, advertising and ad networks know how that works, and know how to do it such that GoogleBot doesn't crawl all the way through those ads, and those ads don't pass PageRank.

So if you have a link to your site that passed PageRank, then that will definitely harm your website more than it will do good. If you're doing advertisements  just make sure those links don't pass PageRank and manipulate search engines in any way. Avoid spamming :)

Read More