Cara Membuat Ricent Post HTML 5 Berdasarkan Label di Blog

Baca Juga

Cara Membuat Ricent Post HTML 5 Berdasarkan Label  diBlog – Ricent Post adalah sebuah widget yang menampilkan artikel terbaru yang baru saja di upload di sebuah blog atau website dengan urutan yang dapat ditentukan. Widget ini sangat populer di pasang di sebuah blog atau pun Website banyak orang, saya sendiri juga memasangnya pada Blog ini. Namun kali ini saya akan berikan tutorial mengenai bagaimana cara membuat widged Ricent Post berdasarkan label di blog sobat, jadi yang akan tampil yaitu artikel atau postingan terbaru dari sebuah label saja. sebenarnya tutorial ini saya dapatkan dari Blognya Bungfrengki, namun saya berpikir sangat penting untuk di bahas lagi di blog saya ini.

Keuntungan atau manfaat dari Widget Ricent Post berdasarkan label ini adalah dapat menjadi rekomendasi bagi pengunjung untuk melihat artikel terkait lainnya di blog sobat, sehingga dapat menambah Nilai pengunjung di sebuah postingan. Hal yang tidak kalah menarik lagi dari widget Ricent Post yang satu ini adalah menggunakan HTML 5 yang sangat Responsive atau bahasa lainnya render Blocking, tidak akan membuat Loading Template blog sobat menjadi lambat atau terasa terbebani. Jika sobat tidak percaya silahkan sobat pasang dan cek sendiri, silahkan sobat analisis dengan kamus HTML 5. Bagi sobat yang berminat untuk mencobanya silahkan simak cara membuatnya berikut ini.

Baca juga : Cara Membuat Recent Post Hanya Gambar Responsive HTML 5

1. buka Blog Sobat > masuk menu “Template” > Edit HTML > salin kode di bawah ini dan letakkan kode CSS di bawah ini tepat di atas kode </style> atau ]]></b:skin>

</style> atau ]]></b:skin>

/* Recent By Label */
.recent-by-tag img {float:left;width:60px;height:60px;margin-right:10px;margin-bottom:17px}
.recent-by-tag li {clear:both;line-height:1.3em important}
.recent-by-tag li a{list-style:none;color:#555;font-weight:bold;font-size:14px !important}
.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858 !important}
.recent-by-tag li .showdates{display:inline-block;font-size:10px;font-weight:normal;margin-top:5px;color:#aaa}

2. Selanjutnya salin kode di bawah ini dan letakkan di atas kode </head>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaK_f0JbUrhkhXzpXlTwKA2UR6DA8MNCNTHdsWhok4fy944ah7NDpiKBl7dQgSkPLFN9xXjOJbgPcmVeRplgbwih-pJHiVKu5WtQQzxRRRMkmsIVyxMcnqUQn-eaZOfEKdDk0Q0QdH2XFR/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

3. simpan Template.

Baca juga : Cara Membuat Tabel Keterangan Responsive di Blog

4. berikutnya adalah memasang kode pemanggil dengan cara : buka Blog Sobat > masuk menu “ Tata Letak” > Tambah Widget baru  > HTML/Java Script > salin kode di bawah ini dan letakkan kode tersebut di dalam widget yang sobat buat tadi.

<script>
var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){document.write("<script src="/feeds/posts/default/-/SEO?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>");}
</script>

NB : Ganti kode SEO pada Script di atas dengan Label yang ingin sobat tampilkan.

5. simpan Setelan dan Lihat hasilnya. Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka widget  Ricent Post HTML 5 Berdasarkan Label  sudah terpasang dan tampil dengan baik.

Demikianlah tutorial mengenai Cara Membuat Ricent Post HTML 5 Berdasarkan Label  di Blog, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.