Cara Membuat Recent Posts Dibawah Postingan

Assalamu'alaikum, sahabat blogger? Sudah lama juga nih ngga posting artikel. mumpung ada waktu luang, kali ini saya akan berbagi tutorial tentang Cara Membuat Recent Posts Dibawah Postingan. Recent Post ini saya dapatkan dari blognya Mas Dhanie (DTK Blog) , bagaimana Penampilannya, lihat screenshot dibawah ini :


Lumayan Simpel buat mempercantik tampilan blog agan-agan semua.
Oke deh jika tertarik, Ikuti tutorial berikut ini :
  • Masuk ke Blogger agan masing-masing.
  • Maka akan ada tampilan Dashbord => Klik Template => Edit HTML
  • Masukan kode dibawah ini tepat diatas kode ]]></b:skin>

#related_posts { background-color:#fff; margin:0; }
#related_posts ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#related_posts ul { margin-top:10px }
#related_posts li { float:left; width:47%; padding:5px; border:1px solid #ddd; transition-duration:2s }
#related_posts li:hover { background-color:#f7f7f7; opacity:0.8; border:1px solid #0070b0; -o-transition:0.6s linear; -ms-transition:0.6s linear; -moz-transition:0.6s linear; -webkit-transition:0.6s linear; transition:all .4s ease-out }
#related_posts .gmbrrltd { background:transparent url(' data:image/gif;base64,R0lGODlhEAAQAPcEAMnJyVdXV5CQkLy8vP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAEACwAAAAAEAAQAAAIUwAHCBxAgICAgwIKBlgYYCBBgwgVMnRYEGFCAgwbDqwYESPDgiBDihxJUiSAkwBKolyZkiRLlCpfthy5sqTNmyZhEqi5U2ZBnjJbAvXZ8+RPlAEBACH5BAUAAAQALAAAAAAQAAoAAAg8AAEIBECAwICDAwoKWChgIEGDCBUydFgQYUICDBsOrBgRI8OCIEOKHEmypMkAKAOYBJlS5UoCLV/CTBkQACH5BAUAAAQALAYAAAAKABAAAAg5AAEIBECAwICDAwYSNIhQYUGECQc+RFiwosWLGDEK2ChAI0ePG0F2zEiyJIEAKANgTKnyIsuVKQMCACH5BAUAAAQALAYAAAAKABAAAAg7AAkIHAigIICBBA0iFGjw4MKGCyNKnDig4oCIFi8uzIjR4sSPAwOIDCBQgEkBI0kSOIlyZMmTKV+aDAgAIfkEBQAABAAsAAAGABAACgAACD0ACQgcSFAggIMACiokgDDhQoINH0JEKLGiRYEBMgYQKKCjAIEDQg7QuJGAx48ERI7UyNEjSJEkW3Z8GTIgACH5BAUAAAQALAAABgAQAAoAAAg7AAMIDECgoMGDBQcSRMhQIcOGAx9KnEiRooCLAgoO2DigIICPADBmJMCxIwGQITFq5OgRpMiVG1t+DAgAIfkEBQAABAAsAAAAAAoAEAAACDoAAwgMQKCgwYEEDRZEqHDhwIYQI0oUQFEAxIoWG2K8WFGiR48DQg4oCKAkAJEjCZg8KZKkSZQuSwYEACH5BAUAAAQALAAAAAAKABAAAAg5AAUIFECAQICDAQYSNIhQYUGECQc+RFiwosWLGAdoHJBxY0eNHzliHEnSIoCTADCiTHlxpUqUGAMCADs=' ) no-repeat 50% 50%; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #0070b0; -moz-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21); -webkit-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21); box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21); -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -o-transition:0.6s linear; -ms-transition:0.6s linear; -moz-transition:0.6s linear; -webkit-transition:0.6s linear; transition:all .4s ease-out }
#related_posts .gmbrrltd:hover { border:1px solid #860000; transition-duration:2s }
#related_posts strong { font-family:Yanone Kaffeesatz; font-weight:normal; font-size:18px; line-height:1.1em }
#related_posts p { margin:2px 0 0; font-size:11px }
.loadingxx { width:100%; min-height:150px; background:transparent url(data:image/gif;base64,R0lGODlhEAAQAPcEAMnJyVdXV5CQkLy8vP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAEACwAAAAAEAAQAAAIUwAHCBxAgICAgwIKBlgYYCBBgwgVMnRYEGFCAgwbDqwYESPDgiBDihxJUiSAkwBKolyZkiRLlCpfthy5sqTNmyZhEqi5U2ZBnjJbAvXZ8+RPlAEBACH5BAUAAAQALAAAAAAQAAoAAAg8AAEIBECAwICDAwoKWChgIEGDCBUydFgQYUICDBsOrBgRI8OCIEOKHEmypMkAKAOYBJlS5UoCLV/CTBkQACH5BAUAAAQALAYAAAAKABAAAAg5AAEIBECAwICDAwYSNIhQYUGECQc+RFiwosWLGDEK2ChAI0ePG0F2zEiyJIEAKANgTKnyIsuVKQMCACH5BAUAAAQALAYAAAAKABAAAAg7AAkIHAigIICBBA0iFGjw4MKGCyNKnDig4oCIFi8uzIjR4sSPAwOIDCBQgEkBI0kSOIlyZMmTKV+aDAgAIfkEBQAABAAsAAAGABAACgAACD0ACQgcSFAggIMACiokgDDhQoINH0JEKLGiRYEBMgYQKKCjAIEDQg7QuJGAx48ERI7UyNEjSJEkW3Z8GTIgACH5BAUAAAQALAAABgAQAAoAAAg7AAMIDECgoMGDBQcSRMhQIcOGAx9KnEiRooCLAgoO2DigIICPADBmJMCxIwGQITFq5OgRpMiVG1t+DAgAIfkEBQAABAAsAAAAAAoAEAAACDoAAwgMQKCgwYEEDRZEqHDhwIYQI0oUQFEAxIoWG2K8WFGiR48DQg4oCKAkAJEjCZg8KZKkSZQuSwYEACH5BAUAAAQALAAAAAAKABAAAAg5AAUIFECAQICDAQYSNIhQYUGECQc+RFiwosWLGAdoHJBxY0eNHzliHEnSIoCTADCiTHlxpUqUGAMCADs=) no-repeat center; display:block; text-indent:-9999px }
.kotak-dalem { background-color:transparent; padding:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; margin-bottom:0 }
.post-body h4 {background-color:#f7f7f7; color:#333; border-bottom:2px solid #888; font-size:17px; line-height:1em; font-family:Segoe UI; text-align:center; margin-top: 10px; margin-bottom: 1px}

  •  Setelah itu, masukan kode dibawah ini sesuai selera agan-agan sekalian. cari saja kode <data:post.body/> Lalu sesuaikan aja sesuai keinginan.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'/>
<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:100,relatedTitle:"Related Posts",readMoretext:"Read more",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaSbCZ3PCxj-bbF3rXE7C7rwi3rD5yaYVWlxVqpq99dH1adKKw7xdb3hBqL5SiDpWt-d-_mJpZcO5E6Mjmi81yoreKkpUdRD0nvZVAKlN0UnE37KY-opyIMzYhl6lzxu2ttSv-qjYRfBk/s70-c/20.jpg",rlt_thumb:55,recentTitle:"Recent Posts",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="related_posts"></div>');f.containerSelector="#related_posts"}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("#related-posts-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!="#related_posts"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related_posts"></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="related-posts-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: "#related_posts",
maxPosts: 4,
loadingClass: "loadingxx",
rlt_thumb: 50
});
//]]>
</script>
</b:if>

  •  Lalu Klik Save Template.
Oke, Cukup Sekian Tutorial Kali ini. Semoga Berhasil :)
Bila ada kesalahan mohon Silakan klik tombol Komentar di bawah :)

Related

Tutorial Blog 254271238192521103

Post a Comment

  1. bisa dicoba nih mas...menambah ilmu baru

    ReplyDelete
  2. wah recent post nya keren nih sob :)

    ReplyDelete
  3. saya nyimak aja mas,,, masih newvbie, blum pham beginian,,,, :-)

    ReplyDelete
  4. ternyata kodenya banyak juga ya mas

    ReplyDelete
    Replies
    1. Asal jangan salah sama kode Togel lho Mas Agus..:)

      Delete
    2. hahaha bisa aja nih gan :-)

      Delete
    3. takutnya saya kliru nomboki nomor ini mas boku, repot kan

      Delete
  5. wuhuhuyy.. kodenya luar biasa banyak gan :D

    ReplyDelete
    Replies
    1. hahah oke deh semoga berhasil aja :-d

      Delete
    2. kalo dipasang nanti blepotan sama related post :D

      Delete
  6. wah liat kodenya jd pusinggg... but tampilannya jd oke sih,

    ReplyDelete
    Replies
    1. Iya saya malah plus tujuh keliling..:)

      Delete
    2. Mas Pri iya gan, emang banyak dan hasilnya lumayan :)

      Mas Boku wah minum konidin mas :D hehehe

      Delete
  7. mas Nandar jago utak atik kode scriptnya,
    Terima kasih telah berbagi kode Mas Nandar..

    ReplyDelete
  8. kodenya panjang tapi sesuai sama hasilnya yang aduhai..indah dan keren ya mas :)

    ReplyDelete
  9. terima kasih gan tutorial ilmunya

    ReplyDelete
  10. wah boleh nih gan ane coba :)
    thanks gan :)
    ohya mas nandar.. kalo pengen nambahi tutorial kya gini gimana yah mas..
    http://4.bp.blogspot.com/-KyphrR--1_U/Uc0_pSmqrqI/AAAAAAAAA_0/buxBNJn5Exw/s615/Untitled.png

    ReplyDelete
  11. mantap gan. ane make link with in aja yggampang heheh

    ReplyDelete
  12. keren nih boss tutorialnya, panjang juga ya scriptnya.
    terima kasih sudah berbagi boss, Salam.

    *** Selamat Berpuasa ***

    ReplyDelete
    Replies
    1. thanks gan :)
      sama2 :)

      marhaban ya ramadhan :))

      Delete

Terimakasih telah membaca artikel di atas. Silahkan berkomentar dengan sopan.

emo-but-icon

Side Ads

Facebook

Adv

item