Nah pada kesempatan kali ini saya akan share sebuah tutorial sederhana mengenai bagaimana membuat widget artikel terkait atau related posts disertai masing-masing gambar dan snippet (penggalan postingan) dari artikel tersebut. Dengan begitu widget related post akan terlihat lebih mantap dan menarik minat pengunjung atau pembaca untuk meng-klik salah satu artikel yang terdapat didalam widget artikel terkait.
Untuk penampakkan artikel terkait disertai gambar dan snippet ini, anda bisa melihatnya pada gambar berikut. Disitu terlihat cuma ada satu postingan, karena jumlah artikel pada label tersebut hanya satu.
Berikut langkah-langkah pembuatan dan pemasangannya.
Cara Membuat Related Post atau Artikel Terkait dengan Gambar dan Snippet (Penggalan Postingan)
1. Pertama silahkan anda login ke akun blogger anda.
2. Pada dashboard atau menu blogger, silahkan pilih menu Tema atau Template.
3. Backup/cadangkan terlebih dahulu template lengkap anda, lalu close atau tutup.
4. Selanjutnya klik Edit HTML.
5. Temukan kode ]]></b:skin>, gunakan Ctrl+F untuk mempermudah pencarian.
6. Setelah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>.
CSS
/* CSS Related Posts */
#harmansh { background-color:#FFF; margin:10px 0 0 0; padding:10px;border:1px solid #ddd}
#harmansh h4 { color:#fff;font-family:'Arimo';font-size:18px; margin:-10px -10px 10px; padding:10px 3px; text-align:center; font-weight:bold;position:relative; background-color:#374760;}
#harmansh ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#harmansh ul { margin-top:10px }
#harmansh li { float:left; width:100%; margin:0 0 5px}
#harmansh .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }
#harmansh strong { font-weight:bold;font-family:'Arimo';font-size:15px; line-height:1.1em;color:#222 }
#harmansh p { margin:2px 0 0;font-family:'Arimo';font-size:15px;text-align:justify; }
.loadingxx { width:100%; min-height:150px; background:transparent url(https://2.bp.blogspot.com/-bL-eL_VIl2A/UoHFt0i8-wI/AAAAAAAAFI8/vn7h5nIbz6A/s1600/bs+loading+dot.gif) no-repeat center; display:block; text-indent:-9999px }
#virelated-posts {margin:20px 20px 20px 0;padding:0;}
ul#virelated-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;}
ul#virelated-summary li:last-child{border-bottom:none;}
ul#virelated-summary li img{display:none;}
ul#virelated-summary li a.relinkjdulx {display:block;font-size:14px;font-weight:700;line-height:normal;overflow:hidden;padding:10px 10px 10px 0;}
#virelated-summary .news-text {display:block;padding:0;font-size:12px;margin-bottom:0;}
7. Jika sudah, cari kode <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> Gunakan Ctrl+F untuk mempermudah pencarian, biasanya kode ini terdapat lebih dari satu. Pilih kode urutan yang pertama.
8. Letakkan kode berikut ini tepat dibawah kode <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> yang pertama.
HTML
<div id='virelated-posts-mobile'>
<h3>Related Posts :</h3>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'/> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&amp;max-results=5"' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
9. Terakhir temukan kode <data:post.body/>.
10. Setelah ketemu, letakkan kode berikut ini tepat di bawah kode <data:post.body/>.
HTML
<b:if cond='data:blog.pageType == "item"'>
<div id='harmansh'/>
<script type='text/javascript'>
//<![CDATA[
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:150,relatedTitle:"Related Posts",readMoretext:"Read More",rlpBlank:"https://3.bp.blogspot.com/-ciCUurobkhg/UoCtFhXRBuI/AAAAAAAAFIs/9FbIqQZ3KfU/s1600/BS+No+Image+White.png",rlt_thumb:70,recentTitle:"Related Post",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="harmansh"></div>');f.containerSelector="#harmansh"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#harmansh-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#harmansh"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="harmansh"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="harmansh-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#harmansh",
maxPosts: 6,loadingClass: "loadingxx",
rlt_thumb: 70
});
//]]>
</script>
<div class='clear'/>
</b:if>
- Tulisan 6 warna merah adalah jumlah link judul yang akan ditampilkan, kalian bisa menggantinya dengan jumlah yang anda inginkan.
- Setiap template biasanya memiliki dua sampai empat buah kode <data:post.body/>.
- Silahkan anda mencoba meletakkan kode diatas, dimulai dari kode <data:post.body/> yang pertama sampai kode <data:post.body/> ke empat. Pada kode template blog saya terletak pada kode <data:post.body/> yang kedua.
- Jika kebetulan anda pernah memasang tombol like and share seperti yang pernahkan saya bagikan pada artikel yang berjudul Memasang Tombol Like Share di Bawah Postingan Blog, silahkan anda letakkan kode diatas tepat dibawah kode tombol like share yang pernah anda pasang dahulu.
11. Jika sudah berhasil dan muncul ditempat yang anda inginkan, silahkan anda klik Save Template atau Tema.
Demikian tutorial sederhana mengenai bagaimana cara membuat related posts atau artikel terkait disertai dengan gambar dan snippet (deskripsi). Semoga bermanfaat and " Happy Blogging "
Related Posts :
Silahkan
klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG
0 komentar:
Post a Comment
...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......