Jquery Widget Recent Post Automatic Slider

Jquery Widget Recent Post Automatic Slider – merupakan widget yang berguna untuk menampilkan artikel terbaru atau konten posting yang terakhir kali di terbitkan pada sebuah halaman blog menggunakan slide show. Widget Recent Post Automatic Slider ini berguna untuk memberitahukan kepada visitor blog agar mereka dapat dengan mudah menemukan artikel terbaru yang mungkin mereka cari. Untuk menemukan artikel terbaru, visitor tidak perlu lagi untuk mencari lebih jauh karena widget ini sudah terlihat dengan jelas untuk memberitahu kepada visitor yang datang dan mereka hanya dengan menggunakan tombol mouse sekali klik saja untuk menuju ke halaman artikel terbaru dari blog yang sudah terpasang Widget Recent Post Automatic Slider ini. Untuk cara pemasangan widget ini sangat mudah, hanya dengan sedikit meletakkan script yang sudah tersedia dibagian konten ini kemudian dapat langsung diterapkan ke blog masing-masing. Untuk yang sudah tidak sabar memasang Widget Recent Post Automatic Slider ini silahkan ikuti tutorial pemasangannya dan silahkan dimulai. Berikut ini adalah cara memasang Jquery Widget Recent Post Automatic Slider untuk melengkapi layout halaman blog yang memungkinkan blog menjadi lebih cantik.

1. Login ke halaman blogger.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> gunakan tombol CTRL + F untuk mempermudah pencarian.
4. Kemudian taruh kode berikut ini lalu letakkan diatasnya 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: #FFFFFF;
    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;
}

5. Lanjutkan lagi dengan mencari kode </body> kemudian taruh kode berikut ini lalu letakkan tepat di atasnya.

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

6. Simpan Template.
7. Selanjutnya klik Tata Letak > Tambah Widget > pilih HTML/Javascript.
8. Copy kode berikut ini kemudian taruh di kolom HTML/Javascript.

<div id="slider">
<script style="text/javascript" src="http://andes.googlecode.com/files/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://mas-andes.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Keterangan:

• Silahkan ganti http://mas-andes.blogspot.com dengan URL blog anda.
• Untuk mengubah jumlah artikel posting yang ingin ditampilkan pada slide show silahkan ganti var numposts_gal = 6; dengan angka sesuai keinginan anda.
• Jika ingin mengubah jumlah karakter dalam deskripsi silahkan ganti pada var numchars_gal = 150; dengan angka sesuai kenginan anda.
• Atur letak widget tepat diatas kolom posting seperti pada gambar dibawah ini, atau bisa juga dengan keinginan anda.
  

9. Simpan dan selesai sudah cara pemasangan Jquery Widget Recent Post Automatic Slider, silahkan lihat hasilnya.

Jquery Widget Recent Post Automatic Slider adalah cara terbaik untuk menunjukkan artikel posting terbaru menggunakan mode slide show. Anda dapat melihat slider-slider tersebut kebanyakan di wordpress akan tetapi untuk blogger hal ini tentunya tidak banyak yang menggunakan. Jika Anda berpikir bahwa kustomisasi ini akan sulit maka anda salah, widget ini sangat mudah untuk menyesuaikan dan sangat mudah untuk diterapkan. Anda tidak perlu menambahkan foto, teks atau link seperti slider lainnya, karena semua sudah berjalan secara Otomatis.