Cara Menciptakan /Menampilkan Related Post Bergambar Di Evo Magz Template

Icikiblog - Seperti yang kita tahu fungsi related post bergambar atau sering kita sebut artikel terkait ialah artikel yang berkategori berkaitan dengan artikel tersebut yang biasanya muncul di final postingan atau konten, untuk itu hal ini sangat lah penting untuk seorang bloger semoga dapat menarik perhatian pengunjung nya untuk melihat lihat artikel yang ada di blog kita. Dengan menciptakan related post bergambar pada blog akan menarik pengunjung untuk betah usang 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 dapat ikuti tutorial berikut ini yaitu cara menciptakan /menampilkan related pos bergambar di Template evo Magz milik mas sugeng.
Sebelum ke tkp untuk jaga jaga supaya bila tampilan related post tidak sesuai dengan impian anda tidak cocok atau gagal dalam penempatan nya, sebaiknya backup dulu atau simpan Template anda supaya gampang mengembalikan nya ke Template sebelumnya

Simak Cara nya sebagai berikut :

1). Masuk ke halaman blog anda >>klik Template >> edit html

2). Silahkan copy arahan berikut ini sempurna di atas nya arahan ]]></b:skin> atau anda dapat daerah kan di atas arahan </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 arahan 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/AVvXsEgyhMt50zjvrqp8s_4sVc6grfz60Lcr4H_IylNVw_0v62V8JLNq9RBTmMLTnTtE2x1sHwMGMycaLA7og-xL3ORonnIQF3-WVs4Pbi0blVoGwbquoGhMJxWvW80m1Vevpz5-1hcflJT3X7ag/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="Seperti yang kita tahu fungsi related post bergambar atau sering kita sebut artikel terkai Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template" 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="Seperti yang kita tahu fungsi related post bergambar atau sering kita sebut artikel terkai Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template" 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="Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template" 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="Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template"'+b+'><img alt="Seperti yang kita tahu fungsi related post bergambar atau sering kita sebut artikel terkai Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template" 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="Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="Seperti yang kita tahu fungsi related post bergambar atau sering kita sebut artikel terkai Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template" 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="Cara Membuat /Menampilkan Related Post Bergambar di Evo Magz Template" 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 memiliki struktur data yang berbeda beda jadi ada yang eksklusif berhasil ada juga yang gagal.

Jika anda pengguna Template evo Magz bahwasanya arahan 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 >> kemudian 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 bila tidak percaya.

Sekian tutorial sederhana ini wacana cara menciptakan / menampilkan related post bergambar di evo Magz Template. Semoga bermanfaat dan dapat di fahami, mohon maaf bila ada salah kata dalam menulis.