Cara membuat Scrolling Image

Scrolling images adalah gambar bergerak yang pergerakannya ditentukan oleh kita sendiri. Scrolling image ini boleh diletakkan pada bagian mana pun dalam blog, header, footer, sidebar ataupun ruang post..

Anda berminat? Ikuti langkah berikut:
- Berikut adalah kode untuk scrolling image:



<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="Link Yang dituju" target="_blank"><img src="url gambar" /></a>
<a href="Link Yang dituju" target="_blank"><img src="url gambar" /></a>
</marquee>



Keterangan:
up - arah pergerakan gambar. Anda bisa mengganti dengan left, right, up atau down
2 - kelajuan pergerakan gambar
Link Yang dituju - url blog Anda atau bisa saja link yang ingin Anda buka
url gambar - url gambar yang ingin di buat Scrolling

EFEK ANIMASI SAAT CURSOR MENYENTUH LINK

Caranya:

1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode: a:hover
4) Kemudian copy paste kode di bawah selepas kode a:hover tadi:

color:#FF6699; background:url(URL IMAGE) ;background-repeat: repeat;
text-decoration:underline;

http://i603.photobucket.com/albums/tt117/misdollymie/rainbowhover.gif

 http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif

CARA MEMBUAT EFEK SLIDESHOW PADA GAMBAR (WITH JQUERY)

Untuk cara membuatnya :
1.Login blogger
2.Rancangan, Edit Html
3.Cari kode ]]></b:skin> lalu letakkan kode berikut diatas kode tadi :

/*--------Slide show-------------*/
.coin-slider {
overflow: hidden; zoom: 1;
position: relative;
}
.coin-slider a{
text-decoration: none; outline: none;
border: none;
}
.cs-buttons {
font-size: 0px;
padding: 10px; float: left;
}
.cs-buttons a {
margin-left: 5px;
height: 10px; width: 10px; float: left;
border: 1px solid #B8C4CF; color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #B8C4CF; color: #FFFFFF;
}
.cs-title {
width: 563px;
padding: 10px;
background-color: #000000;
color: #FFFFFF;
}
.cs-prev, .cs-next {
background-color: #000000;
color: #FFFFFF;
padding: 0px 10px;
}
Selanjutnya cari kode </head> lalu letakkan kode di bawah ini diatas kode tadi :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>
Simpan template..........

Selanjutnya simpan kode berikut Pada edit Html postingan kawan atau pada Gadget Html/ Java script Sesuai kebutuhan..


<div id="coin-slider">

<a href="Link target gambar" target="_blank">
<img src="Url Gambar" />Keterangan gambar</a>
<a href="Link target gambar" target="_blank">
<img src="Url Gambar" />Keterangan gambar</a>
<a href="Link target gambar" target="_blank">
<img src="Url Gambar" />Keterangan Gambar</a>
</div>

Yang berwarna biru silahkan ganti sesuai kebutuhan.....
namun terkadang cara ini tidak cocok pada sebagian Template,,, jadi coba saja dulu...

Selamat mencoba

CARA MEMBUAT PAGE PEEL JOIN US ON FACEBOOK

Page peel blog adalah halaman yang melipat pada blog anda dan akan terbuka lebar lipatannya apabila anda mengarahkan mouse anda diatas efek tersebut, contohnya seperti yang ada pada gambar diatas.

penasaran bagaimana membuatnya? Ikuti langkah berikut ini:

1. Login ke blogger
2. Masuk ke Design --> Klik Edit HTML
3. Cari kode </head>
4. Letakan script dibawah ini diatas kode </head>

<script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/rizkyvanhalen&#39;</script>
<script src='https://sites.google.com/site/ivennuary/script-ivennuary/page-peel-effect/page_peel_effect.js/' type='text/javascript'/>

5. Ganti kode berwarna merah dengan url halaman facebook anda.
6. Simpan template dan lihat hasilnya.