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.comdengan 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;
0 komentar:
Posting Komentar