Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


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!


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 = "http://4.bp.blogspot.com/-UycqzWtMm9o/UZ8Rh-ebn3I/AAAAAAAAHuU/E0Am9tW7cz4/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 avatar
Jack
Alien avatar
Alien

Contoh tampilan avatar user anonymous Jack dan Alien

comment dengan Jack avatar

comment dengan Alien avatar


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

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(http://1.bp.blogspot.com/-vVCqz7-ep5A/UaD0ugU664I/AAAAAAAAHwg/dDojZkM3SZY/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(http://3.bp.blogspot.com/-5j1Z2hBxVrI/UZ8dEKxlyjI/AAAAAAAAHvU/s2jDRUsGn9I/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):
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

Recent Comments WidgetUntuk 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(http://4.bp.blogspot.com/-MsRRTk6y4U8/UZ8dx_A3ERI/AAAAAAAAHvg/nVBp8bpLHYw/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

Artikel Terkait Lainnya:
Click here for comments

19 komentar

hohoho...keren boss, tapi berat nggak ya, ni saya bookmark dulu, nanti saya coba. salam.

REPLY

terima kasih, ngga juga mas, ini ga pake eksternal script semuanya internal, jadi ngurangi http request juga, silah dicoba:)

REPLY

Nice artikel :D
Kunjungi juga dong mungkin ada yang menarik buat anda sob :
http://firmanardyansyah.blogspot.com/2013/05/slide-out-jejaring-sosial-berlangganan_18.html

REPLY

wach saya tertari om hirza
sebelumnya salam kenal om

dari EMP-BLOG

http://informasibloger.blogspot.com

REPLY

@Firman Ardyansyah
thanks ok saya berkunjung nti

@Imron fhatoni
ok sob, salam kenal juga
nice blog;)

REPLY

kunjungan menjelang pagi gan, bheh saya nyimak dulu lah gan...masih butuh banyak belajar mengenai code html neh.. salaam hangat buat semua.. :D

REPLY

Keren abiz bro, tapi pas gw coba, blog gw jadi amburadul banget,padahal gw pengen banget menaruh Recent Post Slider kayak yang di atas tepat dibawah header tanpa merusak tampilan semula, bisa gak mas bro nolongin gw, plis deh. Kalo bisa ntar gw kirim templatenya trus minta divermak ama mas bro, bisa?

REPLY

minta template dokumentnya mas.....

REPLY

Mas tolongin donk,, kok pas saya bikin di blog saya kok lebarnya gak sama lebarnya dengan headernya.. kode yang mana yang harus di ganti tu mas biar sama lebarnya ama headerx

di tunggu kunjungan baliknya mas
htttp://badry7.blogspot.com

REPLY

gan. yang ane ko cuma loading aja ya. tapi artikelnya ga muncul di slidenya. tolong dong gan di cek . www.pertandingansepakbolapekanini.blogspot.com
mohon bantuannya gan.

REPLY

alhamdulillah gan sudah bisa. hehe

REPLY

...uhm iya...pas aku cobain di blogger yang masih default template ko ga jalan ya?
ak ada posting tiga - - - tapi ga muncul...

REPLY

pagi mas bro ulasan ulasan di blog ente keren keren saya jadi pusing and mumet lihatnya ,btw saya jadi minder sebab saya seorang newbie.banyak hal yang belum saya ketahui dan pahami .dan blog ente saya akan jadikan sumber pembelajaran .agar blog saya lebih keren dan lebih banyak pengunjung nyee. izin share yee...

REPLY

Salam kenal dan ijin comot tutorial tentang recent commentnya!

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|