Membuat artikel terkait tampil di seluler

Membuat artikel terkait tampil di seluler - Artikel terkait atau related post tidak di sediakan tanpa kita memasangnya sendiri terlebih dahulu jika template blog anda masih defauld ,bagi para Blogger mania yang suka otak atik edit Html tentu masalah ini akan menimbulkan masalah.

Lalu Apa bisa pos terkait atau related post di tampilkan di Blog jika di akses via seluler serta bisa di modif sesuai selera...,? jawabanya sangat bisa dong yaitu dengan cara mengatur beberapa opsi dan tambahan kode script tertentu ke dalam template yang digunakan. Namun yang perlu diperhatikan di sini adalah di bagian mana script tersebut harus diletakkan, dan yang satu lagi related post ini nantinya akan tampil mirip template premium yaitu tumdanil gambar, judul dan discripsi lihat gambar.

Baca juga cara membuat : Agar widget tampil di seluler





Silahkan ikuti langkah-langkah berikut ini;

• Pertama silahkan masuk ke halaman blog anda
• edit template
  
• Kemudian Pasang kode css berikut tepat diatas kode  ]]></b:skin>
  

 /*--- Related Post Widget posted by Trikpos ---*/ .related-post {   margin:15px 0 0;   border-top:1px solid #f0f0f0;   padding:15px 0 0;   }   .related-post h4 {   font:normal 16px Oswald;   color:#000000;   border-bottom:3px solid #0A8D94;   margin:0 0 .5em;   text-transform:uppercase;   }   .related-post-style-2 {   margin:0 0 0 0 !important;   padding:0 0 0 0 !important;   list-style:none;   }   .related-post-style-2 li {   margin:0 0 0 0;   padding:0 0 0 0;   }   .related-post-style-2 li {   padding:5px 0 !important;   border-top:1px solid #eee;   overflow:hidden;   }   .related-post-style-2 li:first-child {border-top:none}   .related-post-style-2 .related-post-item-thumbnail {   width:60px;   height:60px;   max-width:none;   max-height:none;   background-color:transparent;   border:none;   padding:0;   float:left;   margin:2px 8px 0 0;   }   .related-post-style-2 .related-post-item-title {   font:normal normal 16px Oswald;   color:#086D72;   }   .related-post-style-2 .related-post-item-summary {   font:normal normal 12px Arial;   display:block;   overflow:hidden;   }   .related-post-style-2 .related-post-item-more {}

silahkan cari code <data:post.body/> dan letakkan kode berikut di bawah kode<data:post.body/>

 <!-- Related Post Widget Start --> <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 menarik lainya :&lt;/h4&gt;&quot;,       numPosts: 5,       summaryLength: 140,       titleLength: &quot;auto&quot;,       thumbnailSize: 60,       noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiysTk20wDbP6fZLvONaNxV0-917s6CE0SZB96TAB107xkeTkx_2SLLQGty1-OJmhqToxpZb4ND3ylhjSyIeA2hnbJhFN58_VyCndKwGFn3INPB0Co3ptY9X-W-NKHxhqmpQllNOe5VIca4/w60-c-h60/no-image.png&quot;,       containerId: &quot;related-post&quot;,       newTabLink: false,       moreText: &quot;Read More...&quot;,       widgetStyle: 2,       callBack: function() {}      };      </script> <!-- Related Post Widget End -->

scrol maos anda arah ke paling bawah temukan kode </body> dan pasang kode berikut ini diatas kode </body>

<script type='text/javascript'>   //<![CDATA[        <!--- Related Post Widget for Blogger by Trikpos.comt --->   var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4> Artikel Terkait:</h4> ",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,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 style="display:block;clear:both;"></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(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):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><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><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>"+y+"</li> "}else{if(A==3||A==4){c+=' <li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip">  <a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></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+'><img alt="" class="related-post-item-thumbnail" 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">  <img alt="" class="related-post-item-thumbnail" 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>  I  

terakhir simpan ; Sebetulnya cara memasang related post di blog ini sama seperti memasang tombol share , nah jika anda ingin meletakan related post tersebut persis di bawahnya tombol share, maka pemasangan kode ini harus tepat di bawahnya code share . Demikian penjelasan kami mengenai Membuat artikel terkait tampil di seluler Semoga bisa menjadi referensi serta bermanfaat bagi anda.