CARA MEMBUAT EFEK SHADOW PADA BLOCKQUOTE

Efek kotak bayang-bayang akan muncul apabila cursor menyentuh Blockquote. Penasaran? Ikuti langkah-langkah dibawah ini:

1) Sign in akaun blogger
2) Dashboard > Design > Edit HTML
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode .post blockquote { ataublockquote:hover {
4) Copy kode di bawah ini dibawah kode pada nomor 3 tadi


border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-box-shadow: 0 0 18px #FF3399 ;
-webkit-box-shadow: 0 0 18px #FF3399 ;
}

Keterangan:
000000 - warna garis border. Tukar kepada warna yang Anda suka. Cek kode warna disini
FF3399 - warna bayang-bayang efek shadow

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