Jika anda pengguna Template milik nya mas sugeng evo Magz Template anda bisa ikuti tutorial berikut ini yaitu cara membuat /menampilkan related pos bergambar di Template evo Magz milik mas sugeng.
Sebelum ke tkp untuk jaga jaga supaya jika tampilan related post tidak sesuai dengan keinginan anda tidak cocok atau gagal dalam penempatan nya, sebaiknya backup dulu atau simpan Template anda supaya mudah mengembalikan nya ke Template sebelumnya
Simak Cara nya sebagai berikut :
1). Masuk ke halaman blog anda >>klik Template >> edit html2). Silahkan copy kode berikut ini tepat di atas nya kode ]]></b:skin> atau anda bisa tempat kan di atas kode </style>
/* ==== Related Post Widget Start ==== */ .related-post{margin:15px 0 0;border-top:1px solid #f0f0f0;padding:15px 0 0} .related-post h4{font-size:14px;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 Fjalla One,Helvetica,Arial,sans-serif} www.masyadi.com .related-post-style-2 .related-post-item-summary{display:block;overflow:hidden} .related-post-style-2 .related-post-item-more{}
2). Setelah itu letakan kode berikut di atas k0de </body>
<div class='related-post' id='related-post'></div> <script type='text/javascript'> var labelArray = [ "Smartphone" ]; var relatedPostConfig = { homePage: "http://evomagzblog.blogspot.com/", widgetTitle: "<h4>Related Posts :</h4>", numPosts: 5, summaryLength: 140, titleLength: "auto", thumbnailSize: 60, noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3DSKtdBvdpZNBQ8iqN3AbGDlpgTaoYEMsdEFrI3f26TXFVbUt9MAlL2Q6dzwyDVxffi6aCVrSWQlLDPCMofxS3rYPdpvQgTBi8D3yERZcMysjshd1_RY44kIDQDCekoTfDBwRYqhITfy/w60-c-h60/no-image.png", containerId: "related-post", newTabLink: false, moreText: "Read More...", widgetStyle: 2, callBack: function() {} }; </script><script type='text/javascript'> //<![CDATA[ /*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */ 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)+"…":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)+"…":"";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>
3). Jika sudah save Template dan lihat hasilnya
Catatan
Sebelum praktek ingat save Template dahulu supaya tidak terjadi hal hal tidak di inginkan, ikuti tutorial di atas dengan benar, tiap Template mempunyai struktur data yang berbeda beda jadi ada yang langsung berhasil ada juga yang gagal.
Jika anda pengguna Template evo Magz sebenarnya kode kode diatas sudah ada dan sudah terpasang, untuk menampilkan nya anda hanya cukup mengedit pengaturan nya yaitu masuk ke halaman blog anda >> klik Template >> klik roda gigi yang tampilan seluler >> lalu pilih "tidak, tampilkan Template seluler di perangkat seluler".
Lihat contoh
Maka related post bergambar anda akan muncul di Template evo Magz tersebut, silahkan cek Web anda jika tidak percaya.
Sekian tutorial sederhana ini tentang cara membuat / menampilkan related post bergambar di evo Magz Template. Semoga bermanfaat dan bisa di fahami, mohon maaf jika ada salah kata dalam menulis.
