Solution: More Posts & Posts Links not working with Adsense Anchor ads on Touch screen mobiles in blogger

Problem Statement: Whenever anchor ads are loading in mobile More Posts link is becoming dead and also other links such as Title of posts in feed along with the Keep Reading link is becoming unresponsive to touch and thus users are unable to browse site properly.

So coming straight to solution: I have seen this happening only when something is having z-index more than the other elements on the page in this case when anchor ads were loading it seems like the z-index for the anchor ads was overriding the z-index of page elements itself leaving them unresponsive to touch though they are working completely fine on clicks over computer system ,so to fix this I added a small piece of CSS style="z-index:1000!important;" to the element or More Posts link so that in the page DOM layer it comes just at place where both Anchor ads and More Posts remains clickable without clashing with each other.

Please find the screenshots below for your reference to find where the changes has to be made and how it was verified that the change has actually got implemented:

  1. Go to blogger dashboard>>Theme>>Edit Html
  2. Jump to Blog1 widget using the jump to widget option from menubar in editor.
  3. Find the section near it as shown in the screenshot below which says   <b:includable id='nextPageLink'>

  4. Add style="z-index:1000!important;" and save changes.

  5. Clear your browser cache and cookies & reload the site to see if its working or not, now for me the value 1000 for z-index worked but it may not work for you due to some other customization's that you might have introduced in your template so try for some higher values in that case.
Note:Please take a backup of your template before making any changes as sometimes missing even a small thing makes site non-responsive and you might not want to loose your past improvements\customization's on your site

Comments

  1. Can you please share the css that is used to manually insert ads because I get a lot of invalid clicks on my ads.
    I have ads after the first paragraph and at the bottom on the posts.
    If I inserts ads between post automatically using the blogger dashboard - Show Ads Between Posts I get lots of invalid clicks.
    Thanks

    ReplyDelete
    Replies
    1. Hi Jerad,
      Thanks for writing...though I saw your comment before you contacted from form I wasn't able to reply due to some reason or the other though I wanted to...I want to inform you that I am not doing manual insertion of ads its auto ads from google and neither have I changed any css for ads as i don't think its allowed as per google ads policies...the trick is to make the ads gadget available in blogger dashboard movable and move them accordingly and for doing that you have to find it in html editor and change some parameters to true...I will write a post on how to do that but you can find the same doing a quick search on google too...if you have not changed anything in template code ,inserting ads by selecting 'show ads between posts' option should not be a issue...did you try to look into the values for ads visual parameters in adsense dashboard there are many things that you can tweak there to fix issues...try it and let me know if the issue still persists as without seeing your site its hard to understand where the issue might be.

      Delete

Post a Comment

Note:Please be gentle while commenting and avoid spamming as comment are anyways moderated thank you.

Popular posts from this blog

Enabling fixed Sidebar for blogger Contempo template for screen sizes smaller than 1440px

Adding copy to clipboard button to every google code prettify pre blocks in blogger

Query to Expand and List All logins within a SQL Server Group

Adding code prettify to Blogger

Powershell script to automatically send HTML emails using gmail smtp