Cara Membuat Automatic Recent Post Slider Dengan Jquery

Cara Membuat Automatic Recent Post Slider Dengan Jquery - Automatic Recent Posts Slider dengan jQuery Untuk Blogger adalah cara terbaik untuk menunjukkan posting terbaru blog sobat sebagai slide show. Sobat mungkin berpikir bahwa kustomisasi gadget ini akan sulit, ternyata tidak bagitu sob, gadget ini sangat mudah untuk menyesuaikan dan sangat mudah karena kita tidak perlu menambahkan foto, teks atau link seperti slider lainnya, karena semuanya otomatis.

Cara Membuatnya :

1. Masukan kode berikut tepat diatas  ]]></b:skin>

/* START EasySlider By otowebsite.blogspot.com */
#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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_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 {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
    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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
    background: url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_next.png) no-repeat 0 0;
}
/* numeric controls */
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;
}
/* END EasySlider By otowebsite.blogspot.com */

2. Cari Kode  </body> dan letakan kode dibawah ini tepat dibawah kode </body> 

<!-- Start easy content slider by otowebsite.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='https://otowebsite-blogspot.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>
<!-- End easy content slider by otowebsite.blogspot.com -->


3. Save Template.
4. Add Gadget dan Add HTML dibawah ini :

<div id="slider">
<script style="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/easy-Slider.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://otowebsite.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Note :

• Sekarang ganti http://otowebsite.blogspot.com dengan url blog Anda sendiri.
• Untuk mengubah jumlah posting yang akan di tampilkan, cukup edit kode var numposts_gal = 6; dalam kode di atas.
• Jika Anda ingin mengubah jumlah karakter untuk menunjukkan dalam deskripsi edit kode var numchars_gal = 150;    

Terima kasih telah membaca artikel Cara Membuat Automatic Recent Post Slider Dengan Jquery.

Semoga Bermanfaat.

Script By : http://otowebsite.blogspot.com

Share this post