Buat Widget Melayang

Haloo mas/sis,, kembali lagi nie ane kasih desain blog yang cukup menarik yaitu "Buat sesuatu melayang" atau bisa disebut widget melayang, widget ini bisa buat apa aja, buat gambar bisa, link bisa, pokonya apa aja deh.. klo mau liat demonya ada tuh, udah ane pasang di atas,, liat ke atass.......

gmna keren gak,, mau nyoba..?? nie caranya :

• Login ke blogger > Rancangan > Elemen laman > Tambah Gadget > Html/JavaScript
• Copy-paste kode di bawah ini :

<style type='text/css'>.tejahide {z-index: 1000;height: 15px;width: 500px;border: 2px solid #666666;background: #D11717 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));border-radius: 12px;-moz-border-radius: 12px;-webkit-border-radius: 12px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;padding: 5px 5px;margin: 15px auto;font: 11px Arial;color: #003366;overflow: hidden;box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.tejahide:hover {min-height: 305px;border: 2px solid #333333;background: transparent;box-shadow: 0 1px 15px #000;-moz-box-shadow: 0 1px 15px #000;-webkit-box-shadow: 0 1px 15px #000;color: #000; text-shadow: 0 1px 1px #888;}.tejahide h3, .isiteja h3 {font-size: 14px;font-family: Droid Serif;font-weight: bold;color: #ffffff;text-align: center;text-shadow: 0px 1px 1px #fff; margin: 3px 5px;background: #000;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #999;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;}.tejahide h3:hover {box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.tejahide img.mini, .tejahide img.minianima {width: 500px;border: 4px solid #666;padding: 3px;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;float: left; margin: 0 10px 5px 0;background: #222;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.tejahide img.mini:hover, .tejahide img.minianima:hover {box-shadow: 1px 1px 15px #000;-moz-box-shadow: 1px 1px 15px #000;-webkit-box-shadow: 1px 1px 15px #000;border: 4px solid #CCCCCC;background :#666;-o-transform: scale(1.4);-moz-transform: scale(1.4);-webkit-transform: scale(1.4);margin-top: 20px;margin-left: 15px;}.tejahide img.minianima:hover {-o-transform: scale(1.4) rotate(360deg) translate(0px);-moz-transform: scale(1.4) rotate(360deg) translate(0px);-webkit-transform: scale(1.4) rotate(360deg) translate(0px);}.isiteja {margin-top: 15px;height:305px;overflow: auto;padding: 0 5px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out; background:#ddd -moz-linear-gradient(top,#ddd,#000);background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));}.isiteja:hover {background: #333;color: #eee;text-shadow: 0 0px 1px #fe0303;}.isiteja h3 {margin: 20px 0;max-width: 380px;margin-left:10px;background: #000;box-shadow: 0 1px 12px #eee;-moz-box-shadow: 0 1px 12px #eee;-webkit-box-shadow: 0 1px 12px #eee;}.columns{clear:both;line-height:22px;padding:0 0 20px;width:380px}.colleft{float:left;line-height:22px;width:120px}.colright{float:center;line-height:22px;width:120px}.isiteja h3:hover {background: #888;border: 1px solid #666;box-shadow: 0 1px 12px #fff;-moz-box-shadow: 0 1px 12px #fff;-webkit-box-shadow: 0 1px 12px #fff;}.isiteja ul {padding: 0;margin: 0;list-style: none;}.isiteja li {padding: 0;margin: 0;list-style: none;border-bottom:1px dotted #777;}.isiteja li a{color: #FF0000;padding: 0;margin: 0;text-decoration:none;font-size: 12px;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.isiteja li a:hover {-o-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);color: red;text-shadow: 0 1px 1px #000;margin-left: 20px;}.tejahide {height: 17px; float:center ;margin-top:0px;z-index: 10000;position: fixed;top:0px;margin-left:235px;} .tejahide h3, .isiteja {font-size: 13px;}</style>
<div class='tejahide'>
<h3>Judulnya!</h3>
KODE GADGET ANDA DISINI
</div>

• Simpan lalu lihat hasilnya.......... 

|| Demo ||

READ MORE - Buat Widget Melayang

Tooltip Keren (link,Gambar)

Dapet tutor lagi nie dari mbah googling... mengenai tooltip yang bisa di pake ke semua gambar,link,title di blog. nie contohnya :

Gmana keren kan...
Klo gitu langsung pasang aja di blog kalian.. nie caranya :

• Login Ke Blogger > Rancangan > Edit Html
• Cari code <body> dan pastekan kode berikut di bawahnya 

<script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com/' id='wb_ttauth'/><script type='text/javascript'>//<![CDATA[

wb.tooltip_setting =

{

func : "Tooltip",

top : 5,

left : 5,

maxw : 300,

speed : 20,

timer : 40,

endalpha : 95,

alpha : 0,

style_plus : "#tt{border:2px double #FF0000;background:#000000;-moz-border-radius: 10px;border-radius:10px;}#ttcont{background:#000000;color:#ffffff;-moz-border-radius: 5px;border-radius: 5px;}"

};

//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/><script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'> 

• Setelah itu cari kode </body> dan pastekan kode berikut di atasnya

</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>

• Simpan dan lihat hasilnya.....

Ane dapet dari cyber-jm.....

READ MORE - Tooltip Keren (link,Gambar)

Tulisan Terbalik (FlipTextGenerator)

Tulislah sesuka hatimu......... :)




Tulis Disini

Hasil?

Mau buat sama seperti ini...
Silahkan copy kode berikut...

<script src="http://sites.google.com/site/farixsan/script-1/Fliptext.js" type="text/javascript"></script>
<center>Tulis Disini</center>
<form name="f" action="post">
<center><textarea rows="3" onkeyup="flip()" cols="30" name="original"></textarea></center>
<br />
<center>Hasil?</center>
<center><textarea rows="3" cols="30" name="flipped"></textarea></center></form>

READ MORE - Tulisan Terbalik (FlipTextGenerator)