Thursday, 26 January 2012

Cara Membuat Gambar Bergerak di Blog


Cara Membuat Gambar bergerak di postingan blog atau pun di halaman blog lain akan membuat tampilan blog sobat lebih menarik, nah langsung cekidot aja :

Berikut adalah kode serta penjelasan nya :

Cekidooooot..
<center><marquee align="center" behavior="alternate" direction="right" scrollamount="18" width="200px"><img src="Masukan alamat url gambar sobat disini" style="width: 190px;" /></marquee></center>

nah tulisan warna merah silahkan di ganti dengan url gambar sobat. Mudah kan!


Untuk membuat Gambar Auto Slider/ Gambar bergerak otomatis pada blog carannya sangat mudah dan nggak butuh waktu lama untuk mengerjakannya.

Nih langsung saja praktik Masbroo

1. Login dengan akun blogger anda.
2. Pilih Rancangan
3. Pilih Edit HTML
4. Cari kode ]]></b:skin> lalu copas kode CSS berikut tepat diatasnya.

Liat disini...
/* CSS easySlider */ #containerSlider { width:175px; height:120px; margin:0 0px; padding:0; position:relative; } #prevBtn, #nextBtn { display:block; margin:0; overflow:hidden; padding:0; text-indent:-8000px; } #slider ul, #slider li { list-style:none; margin:0; padding:0; text-indent:0; } #slider, #slider li { overflow:hidden; width:175px;height:120px; margin:0 auto; } #slider { margin-left:0; background:#ccc; border:1px solid #999; } #prevBtn, #nextBtn { display:block; height:34px; left:-20px; position:absolute; top:38px; width:31px; } #nextBtn { left:200px; } #prevBtn a, #nextBtn a { background:transparent url() no-repeat scroll 0 0; display:block; height:34px; width:31px; } #nextBtn a { background:transparent url() no-repeat scroll 0 0; } #slider img { background:#ccc; padding:0px; width:175px; height:120px; }


*Perhatikan untuk teks yang berwarna merah dapat anda ganti ukurannya sesuai kebutuhan anda

5. Kemudian cari kode </head> lalu copas kode berikut tepat diatasnya.

Liat disini...
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/easySlider1.5.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

6. Klik SAVE
7. Selanjutnya buatlah widget baru dengan cara klik Page Element lalu Add Widget baru dan
pilih HTML/Javascript dan masukkan kode berikut:

Klik disini...
<div id="contentSlider">
<div id="slider">
<ul>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 1" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 2" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 3" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 4" /></a></li>
<li><a href="#" target=_blank"><img alt="1" src="url gambar 5 dst" /></a></li>
</ul>
</div>
</div>

8. Untuk Url dapat ditambah sesuai keinginan.
9. save & Selesai..

1 comment:

  1. bingung gan,maklum maseh newbie

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...
One Piece Logo One Piece Logo Blacy Smiley - Exciting