Ditutorial sebelumnya telah dibahas
bagaimana membuat foto slideshow yang diletakan di sidebar. Kali ini kita akan
bahas bagaimana caranya membuat foto slide show berada didalam postingan. Langkahnya
adalah sebagai berikut:
1.
Login Ke Blogger
2.
Selanjutnya Masuk Ke Menu tata Letak
3.
Kemudian Pilih Widget HTML/Javascript, letakan di bagian atas postingan
4.
Selanjutnya Paste Code Dibawah ini
<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: 500px;
/* Keep it 20px-40PX greater than ACTUAL Image size */
height: 300px;
position:
relative;
overflow:
hidden;
margin-left: 0;
}
#BUS-sliderContent
{
width: 500px;
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="300"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMk0Rrvv573PELai2eKCkiKcw6zaaP_9mw1AM6_RnlIRYKjcS5ypX3CCAMVxhaS00K610gAwrZ4EllvIpln2QZcu_IDuMkyBBz5FriaUCHC6APE7CMymP1G_Dp3TP6QMjg0_t-TA62qUG/s1600/01.+di+padepokan+IT+Course.jpg
" width="500" /><a
href="http://padepokan-it.blogspot.com/"><span
class="top"><h3>Training
IT</h3>
Training, Kursus, Private IT Di
Bandung</span></a><span class="short_text"
id="result_box"
lang="en"><span
class="hps"></span></span>
</li>
<li class="BUS-sliderImage">
<img
height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLy2Y3NuUnlmzA38KQUVCGuJtH5rduxws2aEmEbR16IGQBpGOoiYxpxXNwp-uiykVcDxsUwWRcZxzsVb5lHfHYLCSjH6Kq1vu9jew__qx8KH1DUF17lyyaBKh-_NAA-QTk_twtBSDKc2Y/s1600/training+jaringan+dan+mikrotik.jpg"
width="500" /><a
href="http://padepokan-it.blogspot.com/"><span
class="top"><h3>
Training Jaringan Dan Mikrotik</h3>
Training Jaringan Dan Mikrotik Di Padepokan IT
Courses</span></a><span
class="short_text" id="result_box"
lang="en"><span class="hps"></span></span>
</li>
<li class="BUS-sliderImage">
<a
href="http://padepokan-it.blogspot.com/"><img
height="300"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUWXIWFFUm6xdHtujvA638909e8G8XP8iJ4KLCu5Kl2oH7_UsIAWhc4BYOOfGYuW42CTN0rZDad6KpEC7H_FX0c3uFHdBAXKV-aCks-fjL_vtlGeruGjd2P9Mu_xY16pz-bjNxIt998dMp/s400/user+web+programming.jpg"
width="500" />
<span
class="top"><h3>
Training Web Programming</h3>
Training Web Programming di Badan Geologi
Bandung</span>
</a></li>
<li class="BUS-sliderImage">
<a
href="http://padepokan-it.blogspot.com/"><img
height="300"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikATrPGWzvVMRSjIRoCJ2v702Dteb9zox6Fllu1ERcrl8tv3psS_cXCvtcVRD15MLZLtDTn5hYwPW337NvvfA54ASAURWUPAaJsAR-r3RInGFROZnJVSq8vw5k-YhONYDLySfTLt7g68Bw/s400/user+vito.jpg"
width="500" />
<span
class="bottom"><h3>
Training Mikrotik</h3>
Training Mikrotik Membahas Setting Gateway, Bandwidth
Manajemen, Firewall, dan Hotspot</span>
</a></li>
<li class="BUS-sliderImage">
<a
href="http://padepokan-it.blogspot.com/"><img
height="300"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGDX-6GjSSM_BuocU9j-N8vhLIv-fa1Ru7CQ_tPNWhgIvnja2jR-WxEMIxHvS0eSFMSLwRVXFTe73vYU49vUYh-xlVydtWhtQXz-aVs_HatgtweXFKYx981EPiFJ4C6e-WPJZeh95eDGs/s400/foto+user+Erika+SMAK+BPK+Penabur.jpg"
width="500" />
<span
class="bottom"><h3>
Training Internet Marketing</h3>
Membahas Blog Marketing, Youtube Marketing, dan Social Media
Marketing</span>
</a></li>
<div class="clear BUS-sliderImage">
<a
href="http://padepokan-it.blogspot.com/"><img
height="300"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEJLlwDWE4JpmHWC_XG6dktbiN7d6ugXtbkz7y2kqyQZGOHFQ5A46E8CBuJuwtGMQKHGYpkZmKx1O5oJxOK8N6ETLs7hjMsvPtPR7NNrxSFoj8xngOo10nSY8U86LJO77HBzRBjW9E9Yf5/s400/Training+IT+Support.jpg"
width="500" />
<span
class="bottom"><h3>
Training IT Support</h3>
Membahas Pekerjaan IT Support di Level teknis dan Skill Yang
Harus Dikuasai</span> </a>
<div class="clear
BUS-sliderImage">
</div>
</div></ul></div>
<br />
Output dari script ini adalah Memasang
menampilkan foto-foto secara bergantian berbentuk
slide hingga tampak seperti menonton sebuah video.
5.
Pada Script diatas Ganti url Link URL Image
sesuai link gambar anda Script yang dikasih warna kuning
6.
Anda bisa menambahkan sebanyak mungkin foto
yang anda mau, tinggal menambahkan saja kode HTML URL FOTOnya.
7.
Anda bisa mengedit tinggi & lebar dari
foto tersebut. Kode HTML yang saya berikan cocok untuk sidebar blog berukuran 300 x 500 . Anda dengan mengganti kode HTML berwarna pink dengan
ukuran yang anda mau sesuai dengan ukuran sidebar blog Anda.
8.
Hasilnya akan Tampak Seperti Gambar dibawah
ini
 |
| TAMPILAN SLIDE SHOW FOTO DALAM POSTINGAN BLOG |
Selamat Mencoba
No comments:
Post a Comment