Agar Blog anda tampil menarik seperti layaknya sebuah website profesional, tidak ada salahnya anda coba tambahkan slide gambar yang berisi tentang posting blog anda atau apapun yang akan anda informasikan. Untuk membuat slide gambar seperti pada DEMO INI anda harus menggunakan jquery javascript, berikut panduannya.
1. Masuk ke Rancangan lalu Edit HTML
2. Terlebih dahulu backup template anda dengan klik Download Template Lengkap
3. Gunakan Ctrl F untuk memudahkan mencari kode script
4. Letakkan kode berikut DIATAS kode </head>
<script src='http://infobege.googlecode.com/files/jquery-1.4.4.js' type='text/javascript'/>
<script src='http://infobege.googlecode.com/files/s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>
Ganti warna Merah dengan durasi berapa lama sebuah gambar ingin anda tayangkan (dalam hitungan milidetik)
5. Masukkan kode berikut didalam rangkaian kode CSS anda (letakkan antara kode <head> dan kode </head>)
#slider1 {
width:525px; /* To be same as image width */
height:237px; /* To be same as image height */
position: relative;
overflow: hidden;
border:1px solid #eee;
margin:0 auto;
}
#slider1Content {
width:525px; /* To be same as image width or wider */
position: absolute;
top: 0;
list-style:none;
margin:0;
padding:0;
}
.slider1Image {
float: left;
position: relative;
display: none;
}
.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width:550px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
bottom:0;
}
.clear {
clear: both;
}
.slider1Image span strong {
font-size:14px;
}
Ganti warna Merah dengan ukuran yang sesuai dengan selera anda
6. Save Template
7. Berpindah ke Elemen Halaman, Tambahkan Gadget lalu pilih HTML/Java Script
8. Masukkan Kode berikut pada isi HTML anda:
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<a href='http://PostingBlogAnda.html'>
<img alt="my image" src="http://LokasiGambarAnda.jpg"/>
</a>
<span>
<strong>Title</strong>
<br/>
Teks Keterangan anda
</span>
</li>
<li class="slider1Image">
<a href='http://PostingBlogAnda.html'>
<img alt="some image" src="http://LokasiGambarAnda.jpg"/>
</a>
<span>
<strong>Title</strong>
<br/>
Teks Keterangan anda
</span>
</li>
<div class="clear slider1Image"></div>
</ul>
</div>
Ganti warna Merah dengan deskripsi yang sesuai dengan Blog anda
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar