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

By SHIVAM KUMAR -
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. Jerad January 12, 2020 at 8:59 PM

    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. SHIVAM KUMARJanuary 24, 2020 at 10:36 AM

      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

By SHIVAM KUMAR -
Image
Here is how to do it : Add this code in your blogger template(where to add this code is mentioned before 2nd code snippet of this post) ,now the value 1300px is the screen size for which I want the sidebar to be always visible for, you can reduce this value as you like, but be aware that reducing this value to much smaller digit will result in showing the overlapped sidebar instead of content body for your blog readers who are using much smaller screen devices such as mobiles which you might not want to happen so be wise : @media screen and (max-width: 1300px) {   .sidebar-container {     bottom: 0;     position: fixed;     top: 0;   }   .sidebar-container {     left: 0;     right: auto;   }   .sidebar-container.sidebar-invisible {     -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);             transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);   }   .sidebar-container.sidebar-invisible {     -webkit-transform: translateX($(sidebar.width * -1));         -ms-
Read more

Adding Home Older Newer Post Buttons in new Blogger templates such as Contempo

By SHIVAM KUMAR -
Image
Requirement: Add Home, Older, Newer Post Buttons in new Blogger templates such as Contempo. Solution: Hi for this jump to Blog widget in HTML editor of your template and find and replace code in includables with respective id's with the ones given below also change the order of buttons as shown below in postPagination includable as per your needs. Code given below shows button in this order   Older Posts Home Newer Posts Demo: Can be seen by clicking here and scrolling to end of page. Screenshot: Note: First page will display only Older posts button as there is nothing to go back when we are on landing or home page and the last page will display Previous posts button and the Home button as there is nothing left to go forward. Displays buttons in order provided here in frontend ,ID to search postPagination: <b:includable id='postPagination'> <div class='blog-pager container' id='blog-pager'> <b:include cond='data:new
Read more

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

By SHIVAM KUMAR -
Image
It's a 2 part process: The script part to find all the pre blocks having code in it and append a copy button to it dynamically. The style part to place our copy button at the specified location(on top right of every code block in this case) The script part: <script> var pre = document.getElementsByTagName('pre'); for (var i = 0; i < pre.length; i++) {             var button = document.createElement('button');                     button.className = 'copy-button';                     button.textContent = 'Copy';                     var s = pre[i].innerText;                     button.setAttribute("data-clipboard-text",s);                     pre[i].appendChild(button);        } var clipboard = new Clipboard('.copy-button'); clipboard.on('success', function(e) {     console.info('Action:', e.action);     console.info('Text:', e.text);     console.info('Trigger:', e.trigg
Read more