Cara membuat recent post slider

Cara membuat recent post slider

1. Pergi ke akun Blogger.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Seperti biasa Centang Expand Template Widget ➨ Backup template Anda.

4. Sekarang temukan kode ]]></b:skin> (bila kesulitan mencarinya coba klick DISINI)

5. Lalu tambahkan bawah kode CSS berikut tepat di atas kode tadi.

/* START EasySlider By lasidroid.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 */

Anda dapat mengedit nilai-nilai CSS di atas dengan menggunakan OW - HTML Editor untuk melihat live preview perubahan (Catatan - Jika Anda mengedit gadget ini di  OW - HTML Editor  maka anda harus menambahkan ketiga kode secara bersamaan di editor).

1. Sekarang temukan kode  </body>

2. Tambahkan kode di bawah ini hanya setelah / di bawah kode </body>.

<!-- Start easy content slider by lasidroid.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 lasidroid.blogspot.com -->

3. Sekarang menyimpan template Anda.

Sekarang pergi ke Page Layout

Tambah Gadget ➨ Pilih elemen HTML / JavaScript.

Tempel kode di bawah ke dalam elemen HTML / JavaScript tadi.

<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://sangridhwan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

</div>

Sebelum menyimpan lakukan perubahan dulu

Sekarang ganti http://sangridhwan.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;