NIFTY DYNAMIC SHADOW WITH JQUERY
Kali ini kita akan membahas bagaimana membuat bayangan yang sangat bagus dan dinamis,juga gambar nya bisa juga dipindah2kan,ini efek yg sangat bagus tapi sayang nya saya gak tau mo di pasang dimana..kwokwok,rencana nya sich pengen bgt masang di blog ini,tapi blom kepikiran mo di tempatkan dimana??oke langsung aja..ini masih original code dari si nara sumber nya..belom saya apa2in...^_^
*-Untuk pMbuatannya,Ikuti Langkah-Langkah berikut ini....
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4. Selanjutnya cari kode: ]]></b:skin>
<blockquote>#infobox {
position:absolute;
width:300px;
bottom:20px;
left:50%;
margin-left:-150px;
padding:0 20px;
background:rgba(0,0,0,0.5);
-moz-border-radius:15px;
-webkit-border-radius:15px;
z-index:999;
}
#infobox p {
display:block;
color:#D1D8DF;
font:bold 15px/10px Tahoma, Helvetica, Arial, Sans-Serif;
text-align:center;
}
#switch {
position:absolute;
bottom:50px;
left:50px;
width:80px;
height:120px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8cQt_lP1r1kIM9gJLwYQDCkCunJl9cwSEHFZDAj4LqyBHBtI0zL5NwfRQzQ7uAq_IoEwxdTClkBPjcIW4L7LGz2z-kqgAur6inBTYTgOdlgaFx4GGeV9KOaIvwZ3wc__QjHhmPU7Tws/s1600/light-switch.png) -80px 0 no-repeat;
cursor:pointer;
z-index:100;
}
#light-bulb {
position:absolute;
top:20%;
left:70%;
width:150px;
height:150px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjDy8OrzqGKzPc9XagaVcYTPGiCzaewZXaBXA9ZnDHPSoMvszmERDbrvk4FJVxIBfsSGDpUwmhgFAK6q25S1Rgnta56U-xXELvC9CrXM7BuPS8kG2W5e-spHKZKeRf7t8C05hw7zyR1EE/s1600/lightbulb.png) -150px 0 no-repeat;
cursor:move;
z-index:800;
}
#light-bulb2 {
width:150px;
height:150px;
display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjDy8OrzqGKzPc9XagaVcYTPGiCzaewZXaBXA9ZnDHPSoMvszmERDbrvk4FJVxIBfsSGDpUwmhgFAK6q25S1Rgnta56U-xXELvC9CrXM7BuPS8kG2W5e-spHKZKeRf7t8C05hw7zyR1EE/s1600/lightbulb.png) 0 0 no-repeat;
}
#logo {
position:absolute;
top:40%;
left:20%;
width:778px;
height:170px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxl2CG84Mn1MoFVgL7oFQ5pAw47ddUCtbo46zrU1mmIYex9CqdYqI7jJTyDMt1CxLm5eA2tGOQrOQ9MX78Z3MSi6xJlPLS-d2qriP1UG0hyYYL6dc3XDMyBLTCQ5gj1ZT_HBuaekkJ5OQt/s1600/logo.png) 0 0 no-repeat;
cursor:move;
z-index:700;
}
#logosh {
position:absolute;
width:770px;
height:400px;
display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxl2CG84Mn1MoFVgL7oFQ5pAw47ddUCtbo46zrU1mmIYex9CqdYqI7jJTyDMt1CxLm5eA2tGOQrOQ9MX78Z3MSi6xJlPLS-d2qriP1UG0hyYYL6dc3XDMyBLTCQ5gj1ZT_HBuaekkJ5OQt/s1600/logo.png) 0 -150px no-repeat;
z-index:600;
} </blockquote>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script><script src="http://generation-platinum.googlecode.com/files/script2.js" type="text/javascript"></script>Dan ini kode Html,sobat bisa memasukan di Edit HTML / tambah gadget,atau di bawah kode: <body>
<div id="switch"></div>
<div id="light-bulb" class="off"><div id="light-bulb2"></div></div>
<div id="logo"></div>
<div id="logosh"></div>
<div id="infobox"><p>Please activate JavaScript!</p></div>
tQ sob....!!! :))