Holla!! Gimana sih cara membuat slider photo di postingan
blog??nahh ini jawabanya, Cuma butuh ketelitian mengganti URL-URL temen-temen. Lansung
aja, pertama-tama sign in blog dulu temen-temen, setelah itu buat entri baru di
pos, jika sudah copy script di bawah ini ke HTML samping compose
<script
src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function()
{
$('#BUS-slider').s3Slider({
timeOut:
3000
});
});
</script>
<style>
#BUS-slider {
width: 550px;
/* Keep it 20px-40PX greater than ACTUAL Image size */
height: 335px;
position: relative;
overflow:
hidden;
margin-left: 0;
}
#BUS-sliderContent
{
width: 550px;
position:
absolute;
top: 0;
margin-left: 0;
}
.BUS-sliderImage {
float: left;
position:
relative;
display:
none; top: 0;
border:1px
solid #ddd;
}
.BUS-sliderImage
span {
position:
absolute;
font:
10px/15px sans-serif,Arial, Helvetica;
padding: 10px
10px;
background-color: #000;
color: #fff;
filter:'alpha(opacity=70)';
-moz-opacity:
.5;
-khtml-opacity: .5;
opacity: .5;
text-align:justify;
}
.BUS-sliderImage
span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 550px
!important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 550px
!important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px
!important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 110px
!important;
height: 315px;
}
</style>
<br />
<div id="BUS-slider">
<ul id="BUS-sliderContent">
<li class="BUS-sliderImage">
<img
height="335" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh26TZfcLx7vUm4KcpMKzER0cZWJ8Hyvw6YWpVjobng_OTkgtG5WUAE4RuNiJ6YgquYPlHm6DLu0G9TaamQn61EnIp_IiM8xxWyupoVjspebAqtldzT6iz2lTyjRDhISiRPHbYzPmvSRek/w550-h335-no/1.jpg
" width="550" /><a href="http://www.blogger.com/hollabuddy.blogspot.com/"><span
class="top"><h3>
example text 1 </h3>
example text 2</span></a><span
class="short_text" id="result_box"
lang="en"><span
class="hps"></span></span>
</li>
<li class="BUS-sliderImage">
<img
height="335" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZWVY1P-LaILID3Yr8j4_qxOEM5Ab56B9lV1dxlQs8u3gDj1KZEUMQSAvYQKQhiI-c7AtrN7ZHV1mFJahJ8Pv5JJo6o0zzLYDxz022oIj7hgaHlnmn5QIeaH2GQRjgw-wkrSLoSbun5-o/w550-h335-no/2.jpg
" width="550" /><a href="http://hollabuddy.blogspot.com/"><span
class="top"><h3>
example text 1 </h3>
example text 2 </span></a><span
class="short_text" id="result_box"
lang="en"><span
class="hps"></span></span>
</li>
<li class="BUS-sliderImage">
<a href="http://hollabuddy.blogspot.com/"><img height="335" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhjkyxspPxZ3PL07xSu2YuqnmWaXGHMV9iORWt6PZjp2mlhVrxIiTfGbu2GLOzWtSxHrY9esTc7cwevKQMbPicjygaRn_VkMFzWsLDetKMFd2ojIF2r0hkZgC_jfmD2cjaqaTaZm76rk/w550-h335-no/3.jpg
" width="550" />
<span
class="top"><h3>
example text 1 </h3>
example text 2 </span>
</a></li>
<li class="BUS-sliderImage">
<a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VOaCdH82lKeQmX48lPQhORV_En-LYd0mW4Cgwa0lAW-pL-n2XLdr7-AsinLBMJ-mpyDFuzJhH9_DcO8I3Hn60_JN87wd8Q8GjOtoE0N4ZuMMWF850MMsjqL8RfWmuv6B2nJYvzU4xRo/w550-h335-no/4.jpg
" width="550" />
<span
class="bottom"><h3>
example text 1 </h3>
example text 2 </span>
</a></li>
<li class="BUS-sliderImage">
<a href="http://hollabuddy.blogspot.com/"><img height="335" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEE2F2b9Duo0DGK6KDt00cEvCFL5l715Eft0dOPjTftp78KvLrWXiQGMRAf_c9CfRYS9R-5gXZpgv3zJ4ibfXNhU4xc4QEJJCPMDDOIisQerb7b2qJ76Cn17vSP2dI6X5XoDK15cpWBg/w550-h335-no/5.jpg
" width="550" />
<span
class="bottom"><h3>
example text 1 </h3>
example text 2 </span></a></li>
</ul>
<div>
</div>
<br />
<br />
Keterangan :
Step 1, temen-temen bisa mengganti warna merah dengan URL foto anda
Step 2, temen-temen bisa mengganti warna biru dengan URL halaman foto temen-temen
di blog
Step 3, temen-temen bisa mengganti warna hijau dengan teks judul foto anda
Step 4, temen-temen bisa mengganti warna coklat dengan
teks diskripsi foto anda
Demikian Tutorial dari Hollabuddy.blogspot.com, semoga bermanfaat
