Recent Post Slider Otomatis

Recent Post merupakan salah satu widget yang perlu ada dalam sebuah blog. Fungsinya untuk memberikan informasi kepada pengunjung tentang kumpulan artikel terbaru yang dapat diakses mereka. Bentuk recent post mempunyai berbagai macam tampilan, sesuai dengan keunikan dan style tampilan yang dikreasikan oleh pembuatnya. Kali ini saya akan share recent post dalam bentuk slider yang dapat dipasang di blog. Recent post slider otomatis ini dapat menampilkan beberapa kumpulan artikel terakhir bagi pengunjung. Disamping itu tampilannya dijamin tidak kalah menarik dengan recent post lainnya. Baiklah, sekarang mari kita bahas cara pasang recent post slider otomatis untuk blogspot. Ikuti langkah berikut.

Live Demo

Log in ke blogger
Klik Template
Klik Edit HTML
Centang Expand Template Widget
Masukkan kode css berikut di atas kode ]]></b:skin>

#slide-container{height:360px;position:relative;width:480px}
#slider{height:360px;left:25px;overflow-x:hidden;overflow-y:hidden;position:relative;width:480px;font-family:calibri}
.slide-desc{background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;color:#FFF;padding:10px;position:absolute;right:0px;text-align:left;top:0;width:200px;z-index:99999}
.slide-desc h2{display:block}
.crosscol .widget-content{position:relative}
#slider ul, #slider li,
#slider2 ul, #slider2 li{margin:0;padding:0;list-style:none}
#slider2{margin-top:1em}
#slider li, #slider2 li{width:480px;height:360px;overflow:hidden}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{display:block;width:30px;height:77px;position:absolute;left:-30px;text-indent:-9999px;top:71px;z-index:1000}
#nextBtn, #slider1next{left:520px !important}
#prevBtn, #nextBtn, #slider1next, #slider1prev{display:block;height:77px;left:0;position:absolute;top:132px;width:30px;z-index:1000}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{display:block;position:relative;width:30px;height:77px;background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0}
#nextBtn a, #slider1next a{background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0}
ol#controls{margin:1em 0;padding:0;height:28px}
ol#controls li{margin:0 10px 0 0;padding:0;float:left;list-style:none;height:28px;line-height:28px}
ol#controls li a{float:left;height:28px;line-height:28px;border:1px solid #ccc;background:#DAF3F8;color:#555;padding:0 10px;text-decoration:none}
ol#controls li.current a{background:#5DC9E1;color:#fff}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none}

Selanjutnya masukkan kode berikut di atas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>

Klik Simpan Template
Klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div id="slider">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6; /* silahkan ganti angka 6 untuk jumlah tampilan yang diinginkan */
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<script src="http://blogonol.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Ganti blogonol dengan nama blog anda
Selanjutnya klik Simpan dan letakkan sesuai keinginan anda
Bila template anda belum memiliki kolom widget, tambah dulu satu kolom untuk widgetrecent post otomatis. Ikuti langkah pembuatannya.
Klik lagi template
Klik Edit HTML
Centang Expand Template Widget
Masukkan kode berikut di atas kode ]]></b:skin>
#blogonol_tambah_kolom{margin:10px 0;padding:1%;width:98%}
Selanjutnya cari kode berikut

<b:section class='mainblog' id='mainblog' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
cari aja yang mirip dengan kode di atas. Mungkin pada beberapa template kodenya akan berbeda. Patokannya kode yang berwarna biru

Kalau sudah ketemu, masukkan kode berikut di atasnya

<div id="blogonol_tambah_kolom">
<b:section class='header' id='kolomtambahan' preferred='yes'/>
</div>

Sekarang masukkan widget recent post slider otomatis pada kolom yang kamu buat. Demikian tutorial cara membuat recent post slider otomatis. Semoga bermanfaat bagi kita semua. Amin. Selamat mencoba dan sukses selalu.

Source Code from Helper Blogger

"keep spirits and do the best"