Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template

Icikiblog - Seperti yang kita tahu fungsi related post bergambar atau sering kita sebut artikel terkait adalah artikel yang berkategori berkaitan dengan artikel tersebut yang biasanya muncul di akhir postingan atau konten, untuk itu hal ini sangat lah penting untuk seorang bloger agar bisa menarik perhatian pengunjung nya untuk melihat lihat artikel yang ada di blog kita. Dengan membuat related post bergambar pada blog akan menarik pengunjung untuk betah lama lama membaca isi blog kita dan itu sangat menguntungkan sekali untuk menambah Page piew di halaman blog kita.

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 html

2). 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/AVvXsEiFM2nqAxrVH3T4AWrNdo9vc4-u7voZrydu0UrCVUHpYEECY2W0aGkMSqq-AFldOi8mC8TT0FjdwQq4SifErb_VeXfqVbtlY59WsfOfCMyA6VC_eCXgnmwX8HQi2OViqYQpeEsP4IYia_-j/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)+"&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>

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.