Cara Membuat Gambar Melayang Di Facebook (Javascript Opera)

 

Cara nya :
1.login ke www.facebook.com pake browser Opera
2.copy dan paste kode di bawah di address bar opera

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

 CLICK GAMBAR UNTUK MEMPERBESAR

Cara Membuat Spoiler di Blog

Spoiler merupakan suatu teknik untuk menyembunyikan teks yang panjang, gambar, atau video. Spoiler dapat pula kita terapkan dalam membuat suatu artikel di Blogger. Dengan membuat spoiler ini kita dapat menghemat tempat atau ruang di halaman posting.

Cara Membuat Spoiler di Blog

Berikut cara membuat spoiler dihalaman postingan :
Cara Membuat Spoiler di Blog

<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;">

<b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">

Letakkan konten Anda di sini.

</div>

</div>

</div>

• Untuk tulisan Spoiler merupakan judul spoiler, Anda dapat menggantinya sesuai keinginan.
• Tulisan Open dan Close dapat diubah sesuai keinginan Anda.
• width: 55px; menunjukkan lebar spoiler.
• font-size: 11px; menunjukkan ukuran huruf dalam spoiler.
• Ganti tulisan Letakkan konten Anda di sini dengan konten yang ingin Anda masukkan ke spoiler.
• Bila Ingin Memasukan Gambar di dalam Spoiler anda tinggal mengganti tulisan Letakkan konten Anda di sini  dengan kode berikut <img src="URL-Gambar-Anda"/>.

 kodenya diletakkan di edit HTML , lihat gambar berikut

Cara Membuat Spoiler di Blog

Spoiler:

Letakkan konten Anda di sini.

Cara Membuat Energy Saving Mode Di Blog Dengan CSS3

assalamualaikum sobat,
apa kabar kalian semua..mohon maaf kalo blog ini jarang di update.. :D
insya allah sekarang saya akan mengupdate nya terus, kali ini postingan saya membahas tentang blog lagi ni, yaitu Cara membuat energy saving Mode pada blog,
yang seperti tergambar pada blog saya,
energy saving mode ini di buat dengan CSS jadi tidak akan memberatkan blog sobat..
Cara Membuat Energy Saving Mode Di Blog Dengan CSS3

pingin blog sobat ada energy saving mode nya ??
ikutin aja langkah saya dibawah ini.. :D

Cara Membuat Energy Saving Mode Di Blog Dengan CSS3

• Login ke Blog sobat.
• Pilih menu design/Rancangan
• lalu klik Add gadget
• trus pilih HTML/javascript

Sekarang tinggal copy code dibawah ini

<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.80;filter: alpha(opacity=80);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";background: #000;border-bottom: 3px solid transparent;z-index: 999999;-o-transition: all 3s ease-in-out 10s;-moz-transition: all 3s ease-in-out 10s;-webkit-transition: all 3s ease-in-out 10s;}body:hover .saving {opacity: 0.0;height:0.001%;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";background:url(http://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif);border-bottom: 5px solid #333;-o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;-moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;}body .saving p.esm1{margin: 0;padding: 0;width: 92%;background: transparent;font-size: 100px;font-family: "Serif", Chiller;color: #FF0000;text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40,   2px -10px 10px #f10;position: relative;margin-top: 200px;line-height: 20px;font-weight: bold;text-align: center;border: 30px solid transparent;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;-moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;-webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;}body:hover .saving p.esm1{font-size: 10px;color: red;width: 25%;margin: 340px 0 0 300px;padding: 25px;background: #aaa;border: 20px solid #888;border-radius: 170px;-moz-border-radius: 170px;-webkit-border-radius: 170px;-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;}.saving p span.esm2{font-size: 18px;opacity: 0.5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display: block;text-align: center;width: 300px;margin: -10px auto; font-weight: normal;padding: 2px 8px;background:url(http://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif);border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family: Chiller, Chiller, sans-serif;-o-transition: 1s ease-out;-moz-transition: 1s ease-out;-webkit-transition: 1s ease-out;}.saving:hover p span.esm2{font-size: 10px;width: 200px;padding: 0;}.saving p span.esm3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background:url(http://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif) left center repeat-x;background: -moz-linear-gradient(top,#666,#111);background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));opacity: 0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width: 250px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_Tejahtc {margin-left: 30px;text-align: center;color: #015828;font-size: 12px;font-weight: normal;position: absolute;bottom: 30px;width: 100%;height: 20px;left: 0;}.saving .by_Tejahtc span.esm4 {color: #aaa;font-style:italic;font-size:14px;font-weight:bold;text-transform:uppercase;}#recpost {width:210px;overflow: hidden;height: 327px;float: right;margin-top: 10px;padding: 4px 2px;background: transparent;border: 1px solid transparent;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-webkit-transition: all 1.5s ease-out;}</style>

<div class='saving'>
<p class='esm1'>Myhafiezers<br/>
<br/><br/>
<span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p>
<div class='noochii'>
</div></div>

Keterangan : Tulisan yang berwarna Hijau ganti dengan kata" sobat.. dan tulisan yang berwarna Merah adalah URL gambar nya. sobat ganti dengan gambar sobat sendiri.

atau gunakan cara ke 2

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut di atasnya

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
<script>jQuery.noConflict();</script>

7. Simpan Template jika sudah selesai.

• Lalu di save dan lihat hasil nya di blog sobat.. :D

Terima kasih.. :D

Cara Membuat Search Box atau Kotak Pencari di Blog

Saya yakin para netter pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.

Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari.

Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

1. Login ke Blogger. Klik menu Design -> Page Elements. Lalu klik pada Add a Gadget.

2. Klik Add a Gadget -> HTML/Java script
3. Masukkan kode dibawah ini kedalam kotak dan klik Save

<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>NAMA KOTAK<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://www.hermanblog.com dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari artikel disini, Cari disini, dan lain-lain.

4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.

Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut.

Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.