FF
Anda pasti sudah tahu tentang slider konten sudah banyak yang memakainya. jadi hampir semua blogger menggunakan slider konten .. apakah itu digunakan untuk gambar slideshow atau konten.
Tapi slider konten yang paling ada harus memasukkan data secara manual atau dengan copas scripnya :D hihiihi ... Cara kerjanya adalah script akan membaca feed blogger dan membuat slider konten juga dengan gambar secara otomatis ...
nah langsung aja ya copy scripnya di sini :D
~ Step 1 : Apply Style
1. Login ke Dashboard Blogger dan arahkan ke Layout> Edit HTML
2. Jangan klik kotak centang yang mengatakan 'Expand Template Widget'
3. menemukan ini
]]></b:skin>Kemudian masukkan script di depannya
/* 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(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{
/*
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(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;
}
/* 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
*/
~ Step 2 : Apply Javascript
sekarang cari scriptdi bawah ini
</body>
Kemudian masukkan script di depannya<!-- jQuery -->
<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>Step 3 : Apply Gadget
Desain -> Klik "Tambah Gadget" -> HTML / JavaScript tipe:
<div id="slider"> <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/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://idefree.co.cc/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>
okeh sekian untuk saat ini.
selamat mencoba pasti work ko :)..
