MEMBUAT ROTATING SLIDER RECENT POST DI BLOGGER

Kali ini kita akan membuat Widget berupa Recent Pos yang berbentuk slider yang bisa berputar secara otomatis. Widget ini menambah kecantikan penampilan blog kita... Teknik membuat widget ini cukup sulit sehingga salah dalam pengetikan dan penempatan akan membuat widget kita tidak berjalan sesuai dengan yang diharapkan.

Widget ini sudah saya uji coba dan ternyata berhasil.. Adapun langkahnya adalah sebagai berikut :

      1. Login terlebih dahulu ke blog anda

      2. Masuklah ke Template

      3. Klik "Edit HTML"

          Ada baiknya anda terlebih dulu membackup data template sehingga bila terjadi 

          kesalahan, tidak mengakibatkan kesalahan fatal yang dapat merusak blog anda.

      4. Klik di sembarang tempat, kemudian cari :]]></b:skin> dengan menekan Ctrl + F

      5. Copy paste perintah berikut ini di atas :]]></b:skin>

/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIfGaW0_3HEvCCHM4-Oq6RpUytoJOqyJLpgYu6HLar7nEiFlzZCjQwMa9rWFDs31Xam6yWLWBcRgX1ROCo3UwFldtyyM2GZK6JLTMN8dzUyKhAfCSLhXfo57j-7ckvDtJw8OgZE-aXiw/s5/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:500px !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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipI_RodT8ZCSjLGpWWJ8s491EQFwOewfgYdR4q3FaBMh0kuYV-Qb8eaijYXNMAsA8Yf_aImXTK2nL2dvdqCJvu9MqWV8tFc2f3dV-rNmtSnQK8mleIFRly-_dhA_tc3nB_oDemuKvObMg/s77/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IGDAcdWSDOeOm90rjvHcCGG5EMHg_l6Pd9fpzWBl_wI81JJ3PEDS4uz-cwvdQ6KzZ_C5Afa_c_icSWIxndJCnarIKQoyjR-mZvMNMLMstLTs07YQt6hSeqG1o-v0qCXyGrSJuGEznjU/s77/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
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/

6. Tekan Ctrl+F cari </body>
7. Copy paste kode berikut di atas </body>

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

8,  Selesai sudah mengedit template-nya, klik Tata Letak/ Layout
9.  Klik "Add Gadget" >> Pilih HTML/ Javascript
10. Masukkan kode berikut ke dalam formulir Gadget

<div id="slider">
<script style="text/javascript" src="http://pantel.googlecode.com/files/galleryposts-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://www.arkeyes88.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

** kode merah adalah dimensi slider ...
** kode biru adalah otomasi ...
** kode ungu jumlah posting jika Anda ingin posting acak (false / true)
** ganti warna hijau dengan alamat blog anda sendiri..