Home
Kali ini saya akan share cara membuat Slideshow Otomatis Blogger dengan S3Slider. Sebenarnya tutorial ini saya dapatkan ketika main ke blog teman "DTE (Dore The Explorer)" yang dulunya bernama "Hompimpa Alaihum Gambreng". Slideshow yang akan saya share sekarang tidak usah di edit lagi ketika ada postingan baru kan namanya juga otomatis wkwkwk, Cara kerja dari slideshow ini hampir mirip dengan popular post.
Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan :
Lalu cari kode berikut :
Klik Simpan Tempate.
Sumber : hompimpaalaihumgambreng.blogspot.com
Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan :
Lalu cari kode berikut :
]]></b:skin>Salin CSS berikut di atas kode tadi :
#slider, #slider ul#sliderContent, #slider img {Kemudian temukan kode berikut :
width:420px; /* Tentukan lebar slideshow */
height:270px; /* Tentukan tinggi slideshow */
}
#slider {
margin:0px auto 10px;
border:2px solid white;
background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
position:relative;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4), 0px 7px 10px -3px rgba(0,0,0,0.4);
overflow:hidden;
}
ul#sliderContent {
position:absolute;
top:0px;
margin:0px 0px;
padding:0px 0px;
overflow:hidden;
}
#slider img {
border:none;
padding:0px 0px;
margin:0px 0px;
outline:none;
}
.sliderImage {
float:left;
position:relative;
list-style:none;
margin:0px 0px;
padding:0px 0px;
display:none;
}
.sliderImage span {
position:absolute;
left:0px;
right:0px;
bottom:0px;
height:auto;
font:normal 11px Arial,Sans-Serif;
color:white;
background-color:black;
opacity:0.8;
filter:alpha(opacity=80);
padding:7px 10px 12px;
display:none;
}
.sliderImage span a {
font-size:12px;
font-weight:bold;
color:white;
text-decoration:none;
}
</head>Salin kode di bawah ini kemudian letakkan di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting. Karena di situlah letak ideal untuk menampilkan slideshow:
<script src='http://reader-download.googlecode.com/svn/trunk/s3Slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).bind('load', function() {
$('#slider').css('background-image', 'none').s3Slider({
timeOut:3000
});
});
//]]>
</script>
<script type="text/javascript">Ganti URL http://latitudu.blogspot.com/ dengan alamat blog Anda lalu simpan.
showPostDate_g = true;
slideOpenNewTab = false;
idMode = true;
slidebyLabels = false;
var slideLabelName = "Mengenai",
pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
text = "Komentar",
numposts_g = 10,
home_page = "http://latitudu.blogspot.com/";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4s3Slider.js" type="text/javascript"></script>
Klik Simpan Tempate.
Sumber : hompimpaalaihumgambreng.blogspot.com
