✔ Cara Mengatasi Related Posts Tidak Muncul Di Versi Mobile

Di beberapa template blogger terkadang memang dengan sengaja di buat untuk tidak menampilkan widget related posts atau widget lainnya di tampilan mobile. Si pembuat template mengaggap bahwa beberapa widget blogger memang tidak perlu untuk di tampilkan di versi Hp alasannya hanya akan menambah beban loading blog tersebut.

Pada kasus yang mungkin anda alami dikala ingin menampilkan widget di tampilan hp dengan menambahkan aba-aba Mobile'yes' atau memakai cara menampilkan widget pada postingan aku sebelumnya. Masih saja widget belum sanggup muncul di tampilan mobile, anda sanggup memakai cara yang akan aku bagikan di bawah ini.

Nah untuk mengatasi widget tidak muncul di tampilan smartphone teman-teman perlu menghapus beberapa aba-aba html di dalam template blogger yang menyebabkan widget ini tidak mau tampil dikala di jalan masuk melalui Hp.

Cara Mengatasi Widget Blogger yang Tidak Muncul di Tampilan Smartphone

Alasan lain pembuat template tidak menampilkan widget related posts di tampilan hp ialah dia menilai bahwa pembaca artikel jarang mengunjungi halaman lain melalu widget related posts yang kita pasang kecuali kalau pengunjung kita ialah sesama blogger. Menurut aku alasan ini memang masuk akal.

Nah Biasanya ada 3 cara yang di terapkan si creator template untuk menyembunyikan widget related posts pada tampilan mobile, yaitu sebagai berikut.

Menyembunyikan widget dengan css display:none

Pertama. Cara pertama yang sanggup teman-teman lihat biasanya terdapat aba-aba menyerupai di bawah ini yang di simpan di template, jikalau memang betul silahkan anda hapus saja aba-aba menyerupai di bawah melalui sajian edit HTML blogger.

@media screen and (max-width: 420px) {  #related-posts,.related-post{display:none!important}}

Menyembunyikan widget related posts dengan tag conditional

Kedua. Biasanya widget related posts sanggup juga di sembunyikan dengan memakai tag conditional yang di simpan di dalam template. kodenya akan nampak menyerupai di bawah jikalau memang ada silahkan hapus saja aba-aba tersebut.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><div id='related-wrapper'>  <div class='related-post' id='related-post'/>  <script type='text/j4vascript'>  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;Artikel Terkait&lt;/h4&gt;&quot;,numPosts:6,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:320,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}    </script></div>  </b:if>

Menyembunyikan widget related posts dengan conditional JavaScript

Ketiga. aba-aba yang ketiga ini biasanya di gunakan juga untuk menyembunyikan widget pada tampilan mobile. Jika ada eksklusif hapus saja aba-aba yang menyerupai berikut.

<div id='related-wrapper'>  <div class='related-post' id='related-post'/>  <script type='text/j4vascript'>  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;Artikel Terkait&lt;/h4&gt;&quot;,numPosts:6,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:320,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}                }  </script></div>

Jika Setelah menghapus aba-aba di atas widget related posts masih belum muncul, silahkan perhatikan kembali pada cara nomor 2 dan 3 pada j4vascript related posts lainnya. JavaScript yang dimaksud menyerupai ini:

<script type='text/j4vascript'>  //<![CDATA[  var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:125,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/j4vascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;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.$t-d.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,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><div class="related-post-item-thumbnail"><img alt="cara mengatasi widget related posts tidak tampil di hp ✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div class="related-post-item-text"><a class="related-post-item-title" title="✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span></div>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title-thumb" href="'+v+'"'+b+'><div class="related-post-item-thumbnail"><img alt="cara mengatasi widget related posts tidak tampil di hp ✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile" href="'+v+'"'+b+">"+w+"</a><span>"+u+"</span></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile"'+b+'><div class="related-post-item-thumbnail"><img alt="cara mengatasi widget related posts tidak tampil di hp ✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="cara mengatasi widget related posts tidak tampil di hp ✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="✔ Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);  //]]>  </script>

Jika hingga tahap ini widget related posts masih juga belum muncul silahkan anda cari aba-aba berikut pada JavaScript di atas.

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

Lalu ganti dengan aba-aba di bawah ini.

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

Jika sudah simpan tema kemudian coba buka salah satu postingan anda melalu smartphone. Nah itulah cara mengatasi widget related posts tidak tampil di versi Hp.
Sumber http://www.masigun.com

Share this post

Berlangganan update artikel terbaru via email: