Tuesday, 1 September 2020

How to Overcome Related Posts Not Appearing on Mobile

How to Overcome Related Posts Not Appearing on Mobile

How to Overcome Related Posts Not Appearing on Mobile
Tuesday, 1 September 2020

To solve the problem of Related Posts not appearing on smartphone / mobile devices , it can be resolved easily. It's just that there are a few things that need to be confirmed, regarding the installation of the related posts widget by the template creator. Usually, some Blogger template creators deliberately hide (not display) the related posts widget on mobile devices, taking into account the page loading speed. Now, usually to hide the related posts widget, the most commonly done there are 3 ways, namely as follows. Method 1: By adding the display: none CSS command to the ID / class tag of the Related Posts widget on a particular device. Example:
@media screen and (max-width: 420px) {
# related-posts, .related-post {display: none! important} }

If so, just delete that kind of code in the blogger template, via Edit HTML.

Method 2:
Hide the related posts widget on the mobile view using a mobile specific conditional tag like this:

<b: if cond = 'data: blog.isMobileRequest == & quot; false & quot;'> <div id = 'related-wrapper'>
<div class = 'related-post' id = 'related-post' />
<script type = 'text / javascript'>
var labelArray = [<b: if cond = 'data: post.labels'> <b: loop values ​​= 'data: post.labels' var = 'label'> & quot; <data: label.name /> & quot; < b: if cond = 'data: label.isLast! = & quot; true & quot;'>, </ b: if> </ b: loop> </ b: if>]; var relatedPostConfig = {homePage: & quot; <data : blog.homepageUrl /> & quot;, widgetTitle: & quot; & lt; h4 & gt; Related Articles & lt; / h4 & gt; & quot;, numPosts: 6, summaryLength: 0, titleLength: & quot; auto & quot;, thumbnailSize: 320, noImage: & quot; data : image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U / gAAAADElEQVQImWOor68HAAL + AX7vOF2TAAAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U / gAAAADElEQVQImWOor68HAAL + AX7vOF2TAAAAAElFTkSuQmCC & quot; & quot; new, quotlefunction () {}}
  </script> </div>
</ b: if>

If so, please delete the marked code.

Method 3:
Hide the related posts widget with Conditional JavaScript applied as follows:

<div id = 'related-wrapper'>
<div class = 'related-post' id = 'related-post' />
<script type = 'text / javascript'>
if (window.matchMedia ("(min-width: 420px) "). Matches) {var labelArray = [<b: if cond = 'data: post.labels'> <b: loop values ​​= 'data: post.labels' var = 'label'> & quot; <data: label.name /> & quot; < b: if cond = 'data: label.isLast! = & quot; true & quot;'>, </ b: if> </ b: loop> </ b: if>]; var relatedPostConfig = {homePage: & quot; <data : blog.homepageUrl /> & quot;, widgetTitle: & quot; & lt; h4 & gt; Related Articles & lt; / h4 & gt; & quot;, numPosts: 6, summaryLength: 0, titleLength: & quot; auto & quot;, thumbnailSize: 320, noImage: & quot; data : image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U / gAAAADElEQVQImWOor68HAAL + AX7vOF2TAAAAAElFTkSuQmCC & quot;function () {}}
              }   </script> </div>

If you find the code format as marked above, please delete the code.

The Related Posts widget still doesn't appear?

Please pay attention to Method 2 and Method 3 on other JavaScript related posts in the template. The JavaScript in question is something like this:

<script type = 'text / javascript'>
// <! [CDATA [
if (p === 0) {return false} while (- p) {c = Math.floor (Math.random () * (p + 1)); b = a [p]; a [p] = a [c]; a [c] = b} return a}, e = (typeof labelArray == "object" && labelArray.length> 0)? "/ - /" + l (labelArray) [0]: "", h = function (b) (var c = b.feed.openSearch $ totalResults. $ td.numPosts, a = o (1, (c> 0? c: 1)); j (d.homePage.replace (/ \ /$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost " )}, g = function (z) {var s = document.getElementById (d.containerId), x = l (z.feed.entry), A = d.widgetStyle, c = d.widgetTitle + '<ul class = " related-post-style - '+ A +' "> ', b = d.newTabLink?' target = "_ blank" ': "", y =' <span class = "bg_overlay"> </span> ', v, t, w, r,
//]]>
</script>

If the related posts widget still doesn't appear, please search for all of the following code in the JavaScript above:

j (d.homePage.replace (/ \ / $ /, "")

Then replace it with the following code:

j (d.homePage.replace (/ \ /? \? m = \ d + (\ & | $) | \ / + $ /, "")

After that, save the theme and see the results by opening one of the blog posts on your smartphone.
How to Overcome Related Posts Not Appearing on Mobile
4/ 5
Oleh

Comments