Cara Membuat Tooltip Otomatis di Blog

Kali ini ane akan posting tentang Cara Membuat Tooltip Otomatis di Blog. Demo ya bisa anda lihat di blog ini oke Langsung aja Kita bahas tutorial ya!! Cekidot

Berikut Langkah-Langkah  Cara Membuat Tooltip Otomatis di Blog 

1. login ke akun blogger sobat.

2. Masuk ke Rancangan - Edit HTML

3. Centang Expand Template Widget.

4. Copy kode dibawah ini dan letakkan di bawah kode <body>.

 <script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Princexells Seyka (Princelling Saki)</a><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:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></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'>
 

5. Copy Lagi kode di bawah ini dan letakkan di atas kode </body>

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

6. Klik Simpan Template & Saya Saran Kan sobat pertinjaukan dulu...

Read More ->>

Auto Zoom Image dengan CSS

Auto Zoom Image dengan CSS membuat gambar memperbesar secara otomatis ketika dilalui oleh crusor. Tutorial ini yaitu Membuat Efek Zoom Pada Gambar Dengan jQuery bagian ini lebih simpel dari yang sebelumnya dan tanpa script jQuery namun dalam penerapannya harus manual.

Preview

Untuk melihat preview nya, tekan tombol preview diatas
Penerapannya pada blog kita ataupun dalam postingan dapat dilihat dibawah ini :

CSS

.zoom img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}
.zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

Penerapannya:
Gunakan HTML dibawah ini untuk memanggil CSS diatas

HTML

 <div class="zoom">
<img src="URL GAMBAR SOBAT" /></div> 

Semoga tutorial saya bermanfaat bagi sahabat Blogger...
Salam Blogger

Read More ->>

Efek Tumpukan Kertas dengan CSS

CSS

/*
---------------------------------------------------------
Sesuaikan lebar kertas dan penampilan.
Pastikan pengurangan/penambahan lebar sesuai dengan perbandingannya
---------------------------------------------------------
*/

.paper1 {
  width:730px;                  /*(730 + 0)*/
  background:#fff;
  border:1px solid #ccc;
}

.paper1:before {
  width:749px;                 /*(730 + 19)*/
  background:#fafafa;
  border:1px solid #ccc;
}

.paper1:after {
  width:756px;                 /*(730 + 26)*/
  background:#fafafa;
  border:1px solid #ccc;
}


/*
---------------------------------------------------------
Jangan mengedit bagian ini jika belum yakin
---------------------------------------------------------
*/

.paper1 {
  padding:15px;
  height:100%;
  position:relative;
  -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  box-shadow:0 0 2px hsla(0,0%,0%,.2);
}

.paper1:after, .paper1:before {
  content:'';
  bottom:-3px;
  height:100%;
  left:1px;
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
}

.paper1:before {
  bottom:-5px;
  left:5px;
}

.paper1:hover:after {
  -webkit-transform:rotate(-3deg) translate(-20px,0);
  -moz-transform:rotate(-3deg) translate(-20px,0);
  -ms-transform:rotate(-3deg) translate(-20px,0);
  -o-transform:rotate(-3deg) translate(-20px,0);
  transform:rotate(-3deg) translate(-20px,0);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
}

.paper1:hover:before {
  -webkit-transform:rotate(3deg) translate(20px,0);
  -moz-transform:rotate(3deg) translate(20px,0);
  -ms-transform:rotate(3deg) translate(20px,0);
  -o-transform:rotate(3deg) translate(20px,0);
  transform:rotate(3deg) translate(20px,0);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
}

Elemen Objek

<div class='paper1'>
     KONTEN DI SINI
</div>

Demo

Read More ->>