Untuk mengatasi dilema Related Posts yang tidak muncul di perangkat smartphone/mobile, sanggup diselesaikan dengan mudah. Hanya saja ada beberapa hal yang perlu dipastikan, terkait pemasangan widget related posts tersebut oleh creator templatenya.
Biasanya beberapa kreator template Blogger sengaja menyembunyikan (tidak menampilkan) widget related posts pada device mobile, dengan pertimbangan kecepatan loading halaman.
Nah, biasanya untuk menyembunyikan widget related posts yang paling umum dilakukan ada 3 cara, yaitu sebagai berikut.
Cara 1:
Dengan menambahkan perintah CSS display:none pada tag ID/class dari widget Related Posts tersebut pada device tertentu. Contoh:
Jika benar demikian, tinggal hapus isyarat semacam itu di template blogger, melalui Edit HTML.
Cara 2:
Menyembunyikan widget related posts di tampilan mobile menggunakan tag conditional khusus mobile menyerupai ini:
Jika demikian, silahkan hapus isyarat yang ditandai tersebut.
Cara 3:
Menyembunyikan widget related posts dengan Conditional JavaScript yang diterapkan menyerupai berikut ini:
Jika mendapati format isyarat menyerupai yang ditandai di atas, silahkan hapus isyarat tersebut.
Widget Related Posts masih tidak muncul juga?
Silahkan perhatikan kembali Cara 2 dan Cara 3 pada JavaScript related posts lainnya yang ada di template. JavaScript yang dimaksud yakni menyerupai berikut ini:
Jika widget related posts masih belum muncul juga, silahkan cari seluruh isyarat berikut ini pada JavaScript di atas:
Lalu ganti dengan isyarat berikut:
Setelah itu, simpan tema dan lihat kesannya dengan membuka salah satu postingan blog di smartphone.
Masih terkait: Cara Menampilkan Widget Related Post di Sidebar Blogger
Biasanya beberapa kreator template Blogger sengaja menyembunyikan (tidak menampilkan) widget related posts pada device mobile, dengan pertimbangan kecepatan loading halaman.
Nah, biasanya untuk menyembunyikan widget related posts yang paling umum dilakukan ada 3 cara, yaitu sebagai berikut.
Cara 1:
Dengan menambahkan perintah CSS display:none pada tag ID/class dari widget Related Posts tersebut pada device tertentu. Contoh:
@media screen and (max-width: 420px) {
#related-posts,.related-post{display:none!important}}
Jika benar demikian, tinggal hapus isyarat semacam itu di template blogger, melalui Edit HTML.
Cara 2:
Menyembunyikan widget related posts di tampilan mobile menggunakan tag conditional khusus mobile menyerupai ini:
<b:if cond='data:blog.isMobileRequest == "false"'><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'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:"<data:blog.homepageUrl/>",widgetTitle:"<h4>Artikel Terkait</h4>",numPosts:6,summaryLength:0,titleLength:"auto",thumbnailSize:320,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Read More",widgetStyle:3,callBack:function(){}}
</script></div>
</b:if>
Jika demikian, silahkan hapus isyarat yang ditandai tersebut.
Cara 3:
Menyembunyikan widget related posts dengan Conditional JavaScript yang diterapkan menyerupai berikut ini:
<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'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:"<data:blog.homepageUrl/>",widgetTitle:"<h4>Artikel Terkait</h4>",numPosts:6,summaryLength:0,titleLength:"auto",thumbnailSize:320,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Read More",widgetStyle:3,callBack:function(){}}
} </script></div>
Jika mendapati format isyarat menyerupai yang ditandai di atas, silahkan hapus isyarat tersebut.
Widget Related Posts masih tidak muncul juga?
Silahkan perhatikan kembali Cara 2 dan Cara 3 pada JavaScript related posts lainnya yang ada di template. JavaScript yang dimaksud yakni menyerupai berikut 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)+"…":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)+"…":"";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="mengatasi dilema Related Posts yang tidak muncul di perangkat smartphone Cara Mengatasi Related Posts Tidak Tampil di HP/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 Tampil di HP/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="mengatasi dilema Related Posts yang tidak muncul di perangkat smartphone Cara Mengatasi Related Posts Tidak Tampil di HP/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 Tampil di HP/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 Tampil di HP/Mobile"'+b+'><div class="related-post-item-thumbnail"><img alt="mengatasi dilema Related Posts yang tidak muncul di perangkat smartphone Cara Mengatasi Related Posts Tidak Tampil di HP/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 Tampil di HP/Mobile" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="mengatasi dilema Related Posts yang tidak muncul di perangkat smartphone Cara Mengatasi Related Posts Tidak Tampil di HP/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 Tampil di HP/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 widget related posts masih belum muncul juga, silahkan cari seluruh isyarat berikut ini pada JavaScript di atas:
j(d.homePage.replace(/\/$/,"")
Lalu ganti dengan isyarat berikut:
j(d.homePage.replace(/\/?\?m=\d+(\&|$)|\/+$/, "")
Setelah itu, simpan tema dan lihat kesannya dengan membuka salah satu postingan blog di smartphone.
Masih terkait: Cara Menampilkan Widget Related Post di Sidebar Blogger
Advertisement