Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile

Cara Mengatasi Related Posts Tidak Muncul di Versi Mobile

cara mengatasi widget related posts tidak tampil di hp

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 karena hanya akan menambah beban loading blog tersebut.

Pada kasus yang mungkin anda alami ketika ingin menampilkan widget di tampilan hp dengan menambahkan kode Mobile'yes' atau menggunakan cara menampilkan widget pada postingan saya sebelumnya. Masih saja widget belum bisa muncul di tampilan mobile, anda bisa menggunakan cara yang akan saya bagikan di bawah ini.

Nah untuk mengatasi widget tidak muncul di tampilan smartphone teman-teman perlu menghapus beberapa kode html di dalam template blogger yang menyebabkan widget ini tidak mau tampil ketika di akses melalui Hp.

Cara Mengatasi Widget Blogger yang Tidak Muncul di Tampilan Smartphone


Alasan lain pembuat template tidak menampilkan widget related posts di tampilan hp adalah beliau menilai bahwa pembaca artikel jarang mengunjungi halaman lain melalu widget related posts yang kita pasang kecuali kalau pengunjung kita adalah sesama blogger. Menurut saya 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 bisa teman-teman lihat biasanya terdapat kode seperti di bawah ini yang di simpan di template, jika memang betul silahkan anda hapus saja kode seperti di bawah melalui menu 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 bisa juga di sembunyikan dengan menggunakan tag conditional yang di simpan di dalam template. kodenya akan nampak seperti di bawah jika memang ada silahkan hapus saja kode tersebut. Saya mohon maaf Untuk kode di bawah ini mungkin tampilannya tidak rapi karena tidak bisa di terapkan syntax highlighter.

<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;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. kode yang ketiga ini biasanya di gunakan juga untuk menyembunyikan widget pada tampilan mobile. Jika ada langsung hapus saja kode yang seperti berikut.

<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;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 kode di atas widget related posts masih belum muncul, silahkan perhatikan kembali pada cara nomor 2 dan 3 pada javascript related posts lainnya. JavaScript yang dimaksud seperti ini:

<script type='text/javascript'>
//<![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/javascript";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="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div class="related-post-item-text"><a class="related-post-item-title" title="'+t+'" 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="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" 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="'+t+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" 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="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="" 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="'+t+'" 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 sampai tahap ini widget related posts masih juga belum muncul silahkan anda cari kode berikut pada JavaScript di atas.

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


Lalu ganti dengan kode di bawah ini.

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


Jika sudah simpan tema lalu coba buka salah satu postingan anda melalu smartphone. Nah itulah cara mengatasi widget related posts tidak tampil di versi Hp.