Kali ini saya coba pilih judul yaitu Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog kenapa saya memilih judul seperti itu ? karena yang akan saya bahas tentang cara pasang gambar atau foto seperti yang bisa sobat lihat contoh screen shot nya seperti diatas tulisan ini , Langsung ja ya sob ....!! nanti kalau kelaman jadi basi
Buat sobat yang mau mencoba untuk blog sobat cara agak gampang-gampang susah alias gasus , tapi kalau sobat teliti cara nya cukup mudah yaitu copy paste kode di bawah ini kehalaman HTML Postingan blog
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<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/AVvXsEj9m4vlI9pezduILd32qYMh-vpk8eRvKNpUgMnH92iHiV-yke9OfH4aLRhxQBWTHXQM-wAAdm1w8WCWwb3UuqAmy5spTbh7puADSOuV7-MzXqlUW4X7hzYbILP4_5yd70J8Elc3nXnYR2_x/s1600/Untitled-2.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3> Mother And Rangga</h3>
The road to the lake Singkarak west sumatera all back home</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/AVvXsEjAy-yK2jgzDuWjrH6D72nSj1ks3E_a7E5FgJz5eO0A34kqpFeW1V5d_OLkqNBeCco_Z88yTDVyfwXC7CebGtyShGgLOPw7C6AJkf3MKA8ZqoIbx50y7d8fm1kXP7qdrL88PLXHYVNJ2_gp/s1600/Untitled-6.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3>
Mother And Rangga</h3>
Rangga photo on the bridge leighton III</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
</li>
<li class="BUS-sliderImage">
<a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMEBopbWg0m_x104PTl7RfBlrKrCuPIDpvBYeGBlssOz7BZwZMogpOFUUPYxHecZ1e68nTwLchbJd2cRTWFcDFDaECRa5dBo_lIggFtqSp7Na8m_srNxs7fE0KZe0XnexdUTsprVwYhWP6/s1600/Untitled-1.jpg" width="550" />
<span class="top"><h3>
Rangga photo</h3>
Rangga in the Clock Tower Bukitinggi West Sumatera</span>
</a></li>
<li class="BUS-sliderImage">
<a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3tAea3stPj79ZlwwpHLdMCJTi-oUEfWU5Lri_4anRHTeFHYPTZXPtRCsR54MlggF0i56CZ8-LPs26CFUOysmhCsrn0tjubH8vJO5JLYpeGgwDSqDur0Q9RpcvMSMlpNSkR1id6dQ4FbY/s1600/Untitled-1.jpg" width="550" />
<span class="bottom"><h3>
Rangga Photo</h3>
Rangga posing overpass Kelok sembilan west sumatera</span>
</a></li>
<li class="BUS-sliderImage">
<a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEDPK3sw_-5VzsEJjUae0edf-wOOBKEMsdUUeojN28U_aL76pHQpa4mothvZk6Arfp1FsU5emz3lrnYOxB7dW0B9G2dhj0jV9cWhbOcqu8EEIwAL3v7b3_MQE1K4XNbilyAfH57xMlvC1/s1600/Untitled-2.jpg" width="550" />
<span class="bottom"><h3>
Rangga , Father and Mother</h3>
Rangga with beloved family</span>
</a></li>
<div class="clear BUS-sliderImage">
</div>
</ul>
</div>
<br />
<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/AVvXsEj9m4vlI9pezduILd32qYMh-vpk8eRvKNpUgMnH92iHiV-yke9OfH4aLRhxQBWTHXQM-wAAdm1w8WCWwb3UuqAmy5spTbh7puADSOuV7-MzXqlUW4X7hzYbILP4_5yd70J8Elc3nXnYR2_x/s1600/Untitled-2.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3> Mother And Rangga</h3>
The road to the lake Singkarak west sumatera all back home</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/AVvXsEjAy-yK2jgzDuWjrH6D72nSj1ks3E_a7E5FgJz5eO0A34kqpFeW1V5d_OLkqNBeCco_Z88yTDVyfwXC7CebGtyShGgLOPw7C6AJkf3MKA8ZqoIbx50y7d8fm1kXP7qdrL88PLXHYVNJ2_gp/s1600/Untitled-6.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3>
Mother And Rangga</h3>
Rangga photo on the bridge leighton III</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
</li>
<li class="BUS-sliderImage">
<a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMEBopbWg0m_x104PTl7RfBlrKrCuPIDpvBYeGBlssOz7BZwZMogpOFUUPYxHecZ1e68nTwLchbJd2cRTWFcDFDaECRa5dBo_lIggFtqSp7Na8m_srNxs7fE0KZe0XnexdUTsprVwYhWP6/s1600/Untitled-1.jpg" width="550" />
<span class="top"><h3>
Rangga photo</h3>
Rangga in the Clock Tower Bukitinggi West Sumatera</span>
</a></li>
<li class="BUS-sliderImage">
<a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3tAea3stPj79ZlwwpHLdMCJTi-oUEfWU5Lri_4anRHTeFHYPTZXPtRCsR54MlggF0i56CZ8-LPs26CFUOysmhCsrn0tjubH8vJO5JLYpeGgwDSqDur0Q9RpcvMSMlpNSkR1id6dQ4FbY/s1600/Untitled-1.jpg" width="550" />
<span class="bottom"><h3>
Rangga Photo</h3>
Rangga posing overpass Kelok sembilan west sumatera</span>
</a></li>
<li class="BUS-sliderImage">
<a href="http://blog-rangga.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitEDPK3sw_-5VzsEJjUae0edf-wOOBKEMsdUUeojN28U_aL76pHQpa4mothvZk6Arfp1FsU5emz3lrnYOxB7dW0B9G2dhj0jV9cWhbOcqu8EEIwAL3v7b3_MQE1K4XNbilyAfH57xMlvC1/s1600/Untitled-2.jpg" width="550" />
<span class="bottom"><h3>
Rangga , Father and Mother</h3>
Rangga with beloved family</span>
</a></li>
<div class="clear BUS-sliderImage">
</div>
</ul>
</div>
<br />
- Kode yang berwarna Orange atau kuning adalah URL yang bisa sobat ganti dengan URL blog sobat.
- Kode warna merah adalah URL Gambar , ganti dengan URL blog yang mau sobat tampilkan
- Tulisan warna hijau atau green Ganti dengan judul yang sobat inginkan kan
- Tulisan warna biru ganti dengan deskripsi

Judul: membuat slidsow pada artikel
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 21.09
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 21.09
