Cara Menambah Related Post Ala Evo Magz
Sering kita jumpai di blog mastah-mastah (kita anggap saja begitu) ketika sedang membaca tulisan-tulisan mereka entah itu karena diarahkan Google karena kita sedang mencari sesuatu atau hanya iseng blog walking untuk mencari ilmu, sering kali kita jumpai ada sejumlah list post atau artikel yang ada di footer atau di bawah artikel. List artikel tersebut bernama Related Post atau post terkait. Ya, walau tidak semua blogger memakai Related Post bisa juga Random Post, Recent Post, atau Popular Post akan tetapi kebanyakan memang memakainya related post. related post merupakan sejumlah daftar artikel yang memiliki kaitan dengan artikel yang dibaca dalam kategori label, jadi hanya artikel-artikel yang ada terkaitan label saja yang akan ditampilkan berbeda dengan related post di mesin pencari Google yang memberikan data berdasarkan kemiripan kata kunci karena memang untuk mempermudah kita dalam menemukan informasi dalam milyaran data agar informasi yang didapat dari kata kunci lebih luas dan terperinci, lain hal dengan kita selain kemudahan tersebut tapi juga agar pengunjung betah berlama-lama di blog kita dan lagian data yang kita punya tidak sampai triliunan, ratusan saja sudah syukur bisa menulisnya :v hahaha jadi kategori label saja sudah cukup.
Memang terkadang kita terhipnotis untuk terus membaca dengan adanya related post, apa lagi jika daftarnya sangat berkaitan erat dengan artikel yang dibaca dan membuat informasi yang kita inginkan semakin meluas akan tetapi membuat semua pertanyaan-pertanyaan atau rasa penasaran terjawab malah bertambah penasaran, sering kita alami ketika kita membaca di blog review atau news top. Karena kita berharap reader betah dan terpuaskan hasrat tentang informasi di blog kita, tak ada salahnya kita ikut-ikutan memasang related post kan? Berikut langkah-langkahnya.
Silahkan ubah sesuai selera
Sekian tulisan saya mengenai Cara Menambah Post Terkait Ala Evo Magz. Semoga bermanfaat dan membantu pencarian agan-agan semua. Apabila ada masalah atau kesulitan silahkan ditanyakan di komentar, insya Allah saya jawab sebisanya :D. Kritik dan saran membangun amat sangat saya apresiasi untuk saya kembangkan dan untuk menambah ilmu si newbe ini.
Resource and reference
Template Evo Magz v4 by Mas Sugeng
Memang terkadang kita terhipnotis untuk terus membaca dengan adanya related post, apa lagi jika daftarnya sangat berkaitan erat dengan artikel yang dibaca dan membuat informasi yang kita inginkan semakin meluas akan tetapi membuat semua pertanyaan-pertanyaan atau rasa penasaran terjawab malah bertambah penasaran, sering kita alami ketika kita membaca di blog review atau news top. Karena kita berharap reader betah dan terpuaskan hasrat tentang informasi di blog kita, tak ada salahnya kita ikut-ikutan memasang related post kan? Berikut langkah-langkahnya.
Langkah-langkah memasang related post:
- Pastikan sudah sign in dan masuk pada blog agan
- Jika sudah masuk, bukalah Template >> Edit HTML dan ikuti langkah berikutnya
Selanjutnya agan tekan CTRL+F dan cari kode]]></b:skin>
kemudian paste kode CSS berikut di atas kode]]></b:skin>
tersebut - Jika sudah memasang kode CSS diatas berikutnya cari kode
<data:post.body/>
dan jika sudah ketemu, copy dan paste kode HTML dan JQ berikut di bawah kode tersebut (biasanya terdapat lebih dari dua kode<data:post.body/>
, agan pilih saja yang terakhir atau bisa dicoba satu persatu) atau agan bisa paste kode berikut di atas</b:if></article>
- Setelah itu agan copy dan paste kode JQuery berikut di atas kode </body> atau bisa mengikuti di bawah kode HTML yang tadi agan paste sebelelumnya
- And the last, kita simpan perubahan template atau preview terlebih dahulu untuk melihat perubahannya. Dan blog agan pun sudah terpasang related post
/* ==== 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 Awesome, Helvetica, Arial, sans-serif;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}
<!-- 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'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Posts :</h4>",
numPosts: 5,
summaryLength: 140,
titleLength: "auto",
thumbnailSize: 60,
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUJZCsZeynHb2mjbz73SSfKZ4xXPPHDLv5BvKj6Ok2XZJBsBxQmuGobTtOXwzS1IZeaoAHvNP5OnpM-5EiwZRcGM7_jlC70Bq7OEnVXnATKLaQGqPktE-9WHCEWdlC_2ost-rEbewY1vm/w60-c-h60/no-image.png",
containerId: "related-post",
newTabLink: false,
moreText: "Read More...",
widgetStyle: 2,
callBack: function() {}
};
</script>
<!-- Related Post Widget End -->
</div>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger by kupuk blog => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"//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>
</b:if>
widgetTitle: "<h4>Related Posts | Judul widget |
numPosts: 5 | Jumlah post yang akan ditampilkan |
summaryLength: 140 | Jumlah kata yang akan ditampilkan |
thumbnailSize: 60 | Ukuran gambar yang akan ditampilkan |
moreText: "Read More..." | Baca selengkapnya |
Sekian tulisan saya mengenai Cara Menambah Post Terkait Ala Evo Magz. Semoga bermanfaat dan membantu pencarian agan-agan semua. Apabila ada masalah atau kesulitan silahkan ditanyakan di komentar, insya Allah saya jawab sebisanya :D. Kritik dan saran membangun amat sangat saya apresiasi untuk saya kembangkan dan untuk menambah ilmu si newbe ini.
Resource and reference
Template Evo Magz v4 by Mas Sugeng
Post a Comment for "Cara Menambah Related Post Ala Evo Magz"
= > Tanggapan Anda memberikan saya semangat untuk terus menulis. Komen Agan membuat saya bahagia
= > Kritik dan saran sangat saya harapkan untuk membangun kemampuan saya dalam menulis
= > Komentar insya Allah saya jawab sesuai pemahaman saya, selama punya akses internet dan kesempatan
= > Komentar tidak langsung muncul, selain untuk menyortir komentar spam juga bertujuan untuk mempermudah saya menentukan komentar yang baru dan belum saya tanggapi/jawab. Jadi stay tune ya gan, sampai komentar agan saya jawab.
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url (hidup/mati) tidak akan di publish