Cara Membuat Efek Gempa di blog

Gempa adalah sesuatu yang menakutkan bagi manusia..Di jogja gempa mengakibatkan ratusan jiwa meninggal, sarana- prasaran rusak berat dan ringan. Nah, bagaimana kalau terjadi gempa di blog kita??
okey mari kita mulai membuatnya.
Langkah-langkah pasang efek gempa bumi pada blog:
1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4.  Selanjutnya cari kode </head>,
5. Jika sudah ketemu letakkan kode CSS didalam kotak ini tepat sebelum atau diatas kode </head> tersebut:

<script type="text/javascript"> function Shw(n) {if (self.moveBy) {for (i = 77; i > 0; i--) {for (j = n; j > 0; j--) {self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0); } } }} Shw(14) </script>

Selesai dan terjadilah gempa diblog kita..hehehehhe

Cara Membuat Gambar Berjalan Dengan Jquery dan Css3

Membuat gambar animasi dengan Jquery dan Css3 mungkin sudah tidak asing lagi bagi temen-temen dan pada saat ini saya akan mempostingkan bagaimana cara membuat Gambar Berjalan Dengan Jquery dan Css3
Inilah langkah-langkahnya:
1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4.  Selanjutnya cari kode ]]></b:skin>
 Jika kode sudah ketemu masukkan kode dibawah ini di dalam kotak

#photos,#mulai,#stop { background: -moz-linear-gradient(top, #2F2727, #1a82f7); -webkit-box-shadow: 0px 5px 10px #000; -moz-box-shadow: 0px 5px 10px #000,0px 10px 20px #000; -moz-border-radius:10px; -webkit-border-radius:10px; } #mulai:active,#stop:active{ background: -moz-linear-gradient(bottom, #2F2727, #1a82f7); } #photos { background:url(Masukan-url-gambar:fungsi-gambar-yg-muncul)no-repeat center; margin:3px; width:448px; height:218px; position:relative; left:0px; top:10px; display:none; } #photos.photohover{ background:url(masukan-url-gambar:fungsi-gambar-aktif-kembali)no-repeat center; } #mulai { cursor:pointer; text-shadow:0px 1px 2px #000; color:#bbb; font-size:15px; margin-bottom:10px; padding:8px;width:20%; } #stop { cursor:pointer; text-shadow:0px 1px 2px #000; color:#bbb; font-size:15px; padding:8px;width:20%; }

Kemudian Cari Kode Letakkan Kode di bawah ini Tepat di atas kode

<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $("#mulai").click(function () {$("#photos").show("slow");$("#photos").animate({left:'+=900'},5000);$("#photos").queue(function (){$(this).addClass("photohover");$(this).dequeue();});$("#photos").animate({left:'-=900'},1500);$("#photos").queue(function (){$(this).removeClass("photohover");$(this).dequeue();});$("#photos").slideUp(); });$("#stop").click(function () {$("#photos").clearQueue();$("#photos").stop(); }); </script>

Dan ini kode Html untuk memanggilnya masukan di bagian Edit HTML

<div id="wrap"> <div id="mulai">Mulai !</div> <div id="stop">Berhenti !</div> <div id="photos"></div></div>

Selesai....

Cara Membuat Buku Tamu Show/Hide dari Atas part II

Cara membuatnya seperti ini:

1. Login Blogger
2. Rancangan
3. Tambah Gadget, Html/Java Script
4. Dan simpan kode dalam kotak ini
"

<style type="text/css"> #at{ position:fixed; right:450px; z-index:+1000; } * html #at{position:relative;} .attab{ height:100px; width:30px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:2px solid #999; background: #000; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; -moz-box-shadow: 0px 2px 5px 0px #f8f9b9; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:#000;"> <b><strike><!-- Simpan Kode cbox atau shoutmix nya disini --></strike> </b> </div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56z3pjEv4mOdI59Vk-NYqsJZ2Q6UGv2xWDSZPzos3n6iYFzjJtprXR9GS6QcNOuLPtjL4MFiSxw_K2kd7GDAb4NWTZyBu7UiOMWNGDVdYRmoK0le7Bbg72ZaAvlX90xANco07SXkhS8Gd/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div> </div></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script> <center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

zFPmenu

zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.
Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan).dan ada tobol buat scroll top.

 Contohnya seperti ini

cara buatnya seperti ini:
masukan script di bawah ini di atas tag kode </body>

<!-- zFPmenu START --> <div id="zfpm_div" style="display:none;"> <div id="zfpm_upperBox"> <!-- masukan kata-kata di sini --> </div> <ul id="zfpm_ul"> <li><a href="">Daftar</a></li> <li class="dir"><a href="#">cheat</a> <ul> <li class="dir"><a href="#">jQuery</a> <ul> <li><a href="#">widget</a></li> <li><a href="#">facebook</a></li> </ul> </li> <li><a href="#">trik blogger1</a></li> <li><a href="#">java script</a></li> </ul> </li> <li><a href="">css</a></li> <!-- Your menus end --> </ul> </div> <script type="text/javascript"> var zfpm_colorTheme = 'light' var zfpm_shareBox = 'yes'; </script> <script type="text/javascript" src="http://pandet-pandet.googlecode.com/files/sroll-menu.php"></script> <!-- zFPmenu END -->

ket: Penggunaan / Konfigurasi menu Ganti menu dengan menu Anda sendiri. Class place = "dir" atribut dalam tag li dimana Anda ingin menambahkan submenu. Mengatur / Variabel Anda dapat mengubah warna tema dan berbagi pengaturan tombol visibilitas. var zfpm_colorTheme = 'light' Mengatur warna tema untuk widget menu. 'light' atau 'dark' Var zfpm_shareBox = 'yes' ini untuk menampilkan tombol 'Retweet' Twitter, Facebook jadi kalau sobat tidak mau menampilkan tombol nya sobat tinggal ganti dari "yes"menjadi "no"

Cara Membuat Gambar Berputar Seperti Jam Pada Blog

Sering kita menjumpai di blog atau website ada gambar yang berputar seperti jam, nah kali ini saya akan memberikan kodenya untuk membuat gambar berputar di blog.

Langkah- langkahnya seperti ini:

1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..

2. Jika sudah buatlah nama pada widget yang baru ini lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi:

<style type="text/css"> <br /> <br /> * {margin: 0;padding: 0;}#clock {position: relative;width: 300px;height: 300px;margin: 10px auto 0 auto;background: url();list-style: none;}#sec, #min, #hour {position: absolute;width: 331px;height: 220px;top: 0px;left: 100px;}#sec {background: url();z-index: 3;}#min {background: url();z-index: 2;}#hour {background: url();z-index: 1;}p {text-align: center; padding: 10px 0 0 0;} <br /> <br /> </style><script src="http://generation-platinum.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"> <br /> <br /> </script><script type="text/javascript"> <br /> <br /> $(document).ready(function() {setInterval( function() {var seconds = new Date().getSeconds();var sdegree = seconds *<span style="color: #444444;"> 6</span>; <br /> <br /> var srotate = "rotate(" + sdegree + "deg)";$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});},<span style="color: #274e13;"> 1000</span> );setInterval( function() {var hours = new Date().getHours();var mins = new Date().getMinutes();var hdegree = hours * 30 + (mins / 2);var hrotate = "rotate(" + hdegree + "deg)";$("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate}); <br /> <br /> }, 1000 );setInterval( function() {var mins = new Date().getMinutes();var mdegree = mins * 6;var mrotate = "rotate(" + mdegree + "deg)";$("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});}, 1000 );}); <br /> <br /> </script><ul id="clock"><li id="sec"><div class="details"> <br /> <br /> <img src="<span style="color: #4c1130;">MASUKAN URL GAMBAR</span>" /></div> <br /> <br /> </li> <br /> <br /> </ul>

3. Ganti kode dengan url gambar anda dan simpan.