Recent Posts Slider dan Recent Comments Widget di Blogger

Cara Membuat Recent Posts Slideshow dan Recent Comments Widget di Blogger

Recent Posts atau Artikel Terbaru Slideshow adalah fitur yang digunakan untuk menampilkan semua posting atau artikel terbaru sebuah Blog/website secara otomatis dengan slideshow horizontal style atau sering juga disebut Automatic Recent Posts Slider. Featured/Recent Posts Slider dengan script jQuery yang efisien dan dengan fitur thumbnail atau image pada setiap posting yang ditampilkan. Widget Recent Comments atau Komentar Terbaru yang keren juga dapat Anda nikmati dengan menggunakan javascript yang sama.  Fitur  Slideshow Artikel Terbaru atau Widget Komentar dapat digunakan sekaligus bersama atau Anda bisa pilih salah satunya. Untuk lebih jelasnya ikuti saja tutorial lengkapnya dibawah ini.

Seperti di Worpress yang telah menyediakan banyak Plugin Slider untuk Recent Posts, Popular posts ala slideshow, di Blogger-pun Anda bisa membuatnya sendiri tampilan artikel terbaru seperti di blog-blog Wordpress itu. Memang fitur ini cukup disukai oleh para blogger, bahkan termasuk salah satu fitur penting yang harus dimiliki sebuah blog/website profesional

Untuk melihat tampilan live Recent Posts Slideshow atau Recent Comments Widget silahkan lihat DEMO dulu Sob!

DEMO RECENT POSTS SLIDER

DEMO RECENT COMMENTS WIDGET

Gimana Sob, tertarik untuk membuatnya? Ok langsung saja ke pembahasan cara membuatnya.

Pemberitahuan:

Sebelum Anda memulai memasang fitur  ini, pastikan tidak ada code atau script recent posts slider lain atau recent comment di template Anda, ini membuat script tidak bekerja.

Javascript dan jQuery

Script slider tersebut dibuat dengan tujuan multifungsi selain Json script untuk memanggil data-data update document baik untuk recent post-nya maupun recent comments. Juga fungsi efek sliding pada artikel terbaru dan setting variasi data-data, seperti jumlah post yang ingin ditampilkan, jumlah komentar, thumbnail size, avatar thumb, scroll dan lainnya.

Langkah pertama Anda harus menempatkan script jQuery library di template, jika sudah ada jquery-1.x.x.min.js (versi yang lain) lewati saja langkah ini. Untuk desain ini saya sendiri menggunakan jquery/1.8.3/jquery.min.js

Copy dan letakkan script ini sebelum tag </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Langkah kedua copy semua script jQuery berikut dan letakkan sebelum tag </head> atau bisa juga ditempatkan sebelum tag </body>, jika Anda sudah menggunakan banyak script ditemplate.

<script type='text/javascript'> //<![CDATA[ var numpostx = 14, thumbSize = 110, contjumlah = 0, cmtext = "Comments", pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", pkBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhIC2ND-N1GYmA4T4W4pmDYnTKbXiGMnIH-ReBLFS6c_i8UP5a0z2D4WBUUmeLGYQTE1HMqf12nCK_962oW496yaROFkuY1GyZRVXNkOsV4gak4ZL5NyWYZJzCDtasyV1I4YoOEl0ah_Dy/s1600/user-anonymous-icon2.png", numcomment = 6, thumbcsize = 70, cmsumm = 100; $(document).ready(function(){$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumbp"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"/></span></a></div><div class="titlexp"><h4><a href="'+k+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#rcentpost").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},3000,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back">&lt;</a><a href="#" class="arrow forward">&gt;</a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#slider-recentpost").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#slider-recentpost").trigger("next")}},8000)}else{$("#rcentpost").html("<span>No result!</span>")}},error:function(){$("#rcentpost").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+c+'"><span><img src="'+a+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Error Loading Feed!</strong>")}})}); //]]> </script>
keterangan:

var numpostx = jumlah posting yang ditampilkan, sesuaikan       saja. Jika lebar blog < 900px sebaiknya pilih 10-12 post aja
thumbSize = ukuran thumb image posting
contjumlah = jumlah karakter deskripsi posting
cmtext = type komentar untuk recent comments
pBlank  = url image jika posting tidak ada gambar
pkBlank = url image jika komentator anonymous
numcomment = jumlah komentar
thumbcsize = ukuran thumb image id komentator
cmsumm = jumlah karakter komentar
3000    = kecepatan sliding (semakin kecil semakin cepat)
8000    = waktu jeda dalam milisecond untuk pergantian slide posting baru (semakin besar semakin lama)

Bagi Anda yang tertarik memasang avatar untuk anonymous user pada recent comments widget, saya telah sediakan dua gambar dibawah Jack dan Alien. Silahkan copy image URL-nya dan gantikan code yang berwarna merah ( pada pkBlank) .

Jack

Alien

Contoh tampilan avatar user anonymous Jack dan Alien

Memasang Automatic Recent Post Slider dan Recent Comments Widget di Blog

Setelah Anda selesai meletakkan scirpt-script jQuery diatas ditemplate, sekarang waktunya untuk memberi style (CSS) dan code HTML-nya. Seperti yang telah disinggung diatas script ini dapat digunakan baik untuk fitur recent post otomatis maupun recent comments sekaligus. Namun jika Anda hanya ingin menggunakan salah satu-nya saja, Anda hanya perlu memilih salah satu saja, apa itu fitur Artikel Terbaru Slideshow atau widget Komentar Terbaru. Untuk pemasangan masing-masing fitur di blog, lanjutkan tutorial dibawah ini:

Automatic Recent Post Slider

CSS

Memberi style atau gaya pada Slide slideshow dengan CSS ini, terdiri dari dua bagian yaitu bagian rcentpost (wadah bagi postingan, title, dan image) dan bagian slider-recentpost (bungkus dari rcentpost). Dan juga style untuk control navigasinya (arrow) serta penempatan gambar loading untuk rcentpost.

Copy semua code CSS dibawah ini dan letakkan code sebelum atau tepat diatas tag ]]></b:skin>:

/*
  Automatic Slider Posts by http://problogiz.blogspot.com/ 
*/

#rcentpost{width:88%;height:150px;overflow:hidden;margin:10px auto 10px;}
#rcentpost ul{width:9999px}
#rcentpost ul,#rcentpost li{list-style:none;padding:5px;margin:0;overflow:hidden}
#rcentpost li{width:150px;display:inline-block;float:left;height:150px}
.thumbp{width:80px;height:80px;margin:0 auto;border-radius:9999px;overflow:hidden;border:1px solid #E4E4E4}
.titlexp{text-align:center;position:relative;margin-top:5px}
.titlexp h4{font-size:90%;max-height:45px;overflow:hidden}
.thumbp img{display:block;width:100%;height:100%;border-radius:9999px}
.datex{font-size:9px}
.datex .dt,.datex .cm{position:absolute;top:-30px;left:12px;display:block;background:#EFFAFF;background-color:rgba(239,250,255,0.73);border:1px solid #B1D1EB;padding:2px 4px}
.datex .cm{display:none}
#slider-recentpost{background:white;-webkit-box-shadow: 2px 2px 10px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    2px 2px 10px rgba(50, 50, 50, 0.75);
box-shadow:         2px 2px 10px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;position:relative}
.arrow{position:absolute;display:block;top:60px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbEVa-D1HTPbaYXmkGQWFI_bRBY2DmQ0L3pdOyAaJ_jzO2d9auAcyc6Znp8LGe-O4wkhiF2EmwvYi2aUNqx-_QuUcaRbCcKWSmLLy-si1hUU3h1UChXy5Js69ZJOvcf8oHVRSOhP_DpoLd/s40/arrow2.png);background-repeat:no-repeat;background-position:0 50%;width:20px;height:30px;text-indent:-9999px}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
::selection{background:#1195C9;color:#fff;text-shadow:none}
::-moz-selection{background:#1195C9;color:#fff;text-shadow:none}
span.loadingrc{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNWXBKHKWUv6kZxYXqnhFETVajTsKs8sZNy-t0lNSdE3qEaGOC-zT-Z1IMGgFQIQHCBnmVY-zrBESiGxhI2ph57USBLia_UwnYhNCNp0hICxDW-EPS6qpMZDh1TQOYK_hrhYrr_GkZTft/s1600/download.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;display:block;width:100px;height:100px;margin:0 auto}

*sprite image untuk arrow (navigasi):

keterangan:

#rcentpost{width:88%;height:150px;}= lebar dan tinggi kotak rcentpost, Anda bisa sesuaikan dengan lebar content-wrapper (blog), usahakan dibawah 100% 
.thumbp{width:80px;height:80px;}= ukuran lebar dan tinggi thumbnail posting
#slider-recentpost = bungkus/slide box dari rcentpost
.arrow = navigasi dari slider posts ini
span.loadingrc = gambar loading slider posts
.datex = adalah tanggal publish postingan, jika Anda tidak menginginkannya hapus saja code yang berwarna pink itu
.titlexp h4{font-size:90%;} = ukuran font untuk judul posting, ini juga bisa Anda sesuaikan dengan blog

HTML

Untuk struktur HTML-nya cukup sederhana, copy codenya dan letakkan tepat diatas atau sebelum tag <div id='main-wrapper'> atau tag <div class='main-outer'> (jika kode pertama tidak ada)

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='slider-recentpost'>
<div id='rcentpost'>
<span class='loadingrc'>Loading...</span></div>
</div>
</b:if>

keterangan;

kode yang berwarna merah adalah tag kondisional agar recent posts slider ditampilkan selain di Homepage, hapus saja kalau mau ditampilkan di seluruh halaman blog.
lihat artikel cara menampilkan dan menyembunyikan widget di halaman tertentu pada Blog

Kemudian Simpan Template

Recent Comments Widget

Untuk memasang Widget Komentar Terbaru ini, Anda hanya perlu menambahkan konfigurasi CSS baru dan HTML ke dalam gadget blogger, tanpa perlu script atau jQuery lagi.

Copy semua kode recent comments dibawah ini, dan gunakan sebagai widget Anda.
Pilih Tata Letak Blogger > Tambahkan Gadget > pilih HTML/JavaScript > pastekan semua kode dibawah > Simpan
* beri nama widget dengan nama Recent Comments atau Komentar terbaru

Recent Comments Code:

<style type="text/css">

/*
  Recent Comments by http://problogiz.blogspot.com 
*/

#rcentcomnets .ketkomt span{font-size:10px;margin-left:8px}
#rcentcomnets li:hover{background:#A9C9DF;border:1px solid #57ACE8}
#rcentcomnets .kmtimg{margin:0 5px 0 0;float:left;height:75px;width:75px;overflow:hidden;border-radius:9999px 0 9999px 9999px;border:1px solid #E4E4E4}
#rcentcomnets .kmtimg a{display:block}
#rcentcomnets .kmtimg img{padding:0;width:100%;height:100%;border-radius:9999px 0 9999px 9999px}
#rcentcomnets .ketkomt{padding:0 0 2px;font-size:13px;line-height:13px;overflow:hidden;max-height:28px}
#rcentcomnets li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#rcentcomnets li{overflow:hidden;height:81px;margin:5px 0;padding:2px;border:1px solid #DADADA;border-radius:9999px 1000px 1000px 9999px}
#rcentcomnets .loadx{display:block;width:80px;height:10px;margin:10px auto;text-indent:-9999px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRq62Kxuqr3eo1IFkokUPGZPfxFNY5jS7LpfTj9dQ6V5xt_UHULu2Q0-Ntu7oLxbY65HQoqACKbpWxjp71bhdj-cRwNSazHL-9FamnuA3o2R5pBUfFLByNgHiMrOC7nqA4SqwsalgdTb9/s1600/horizontal-loading.gif) no-repeat 0 0}
</style>
<div id="rcentcomnets">
<span class="loadx">Loading...</span></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
rccommnetsx({
numComments:6,
characters:100,
adminBlog:""
});
});
//]]>
</script>

Anda dapat tempatkan widget ini di bagian sidebar blog, dan secara otomatis akan memperbarui jika ada komentar baru pengunjung.

keterangan:

10px = ukuran huruf isi komentar
#A9C9DF = warna hover comment
height:75px;width:75px = lebar dan tinggi gambar/image avatar
font-size:13px = ukuran nama /keterangan id user
kode warna merah = url image loading
kode warna biru = jumlah komentar yang ditampilkan dan banyak karakter

Itulah Sob, salah satu cara untuk membuat fitur Artikel Terbaru otomatis dengan tampilan Slideshow dan widget Komentar Terbaru di blog. Tentu banyak tutorial lain yang membahasnya dengan konfigurasi dan script yang berbeda. 

Artikel ini dibuat dengan harapan Sobat Blogger dapat menggunakanya sebagai fitur penting bagi blog/website dan memberi kesempatan visitor lebih jauh meng-eksplore isi blog dan meningkatkan pageview secara keseluruhan.

Selamat Mencoba

Salaam