468x60 Ads

Cara membuat Elemen Box Melayang

Unknown | 17:00 | , ,
Sebelumnya saya pernah memposting Cara Membuat Elemen melayang yang bisa di Close maupun tidak bisa di Close [ini khusus untuk Back to Top] kalau kawan ingin membacanya  disini yang pada dasarnya sangat sederhana :i; tapi yang sekarang ini saya tambahkan sedikit polesan biar kelihatan lebih keren :y maka jadilah hasilnya seperti yang kawan lihat di Blog Demo saya disini :x; 
Cara Membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template
  • Cari </body> kalau pada Template saya letaknya paling bawah sekali sebelum </HTML> 
  • Copas script berikut dibawah </body> atau diatas </HTML>

<style type='text/css'>
.notification{width:310px;height:250px;padding:10px;display:block;position:fixed;bottom:130px;left:660px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 30px #000;-webkit-box-shadow:2px 2px 30px #000;box-shadow:2px 2px 30px #000}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCiWYEVyg6RRn5xh5JsaeBqJKPwoZ1GMQ7LXsbWRT2_RlJh1evk9D0jn151IDeX4rX9gePxsVZYyeUQmO5x0c7iiO0vrGNPjVccZE-hsm6iEwcuZQd6fE42Llav6ARlRGIs4GWOs8Jnt4/s1600/Close.png) no-repeat right top;cursor:pointer;display:block;width:22px;height:22px;position:absolute; top: 2px;right: 2px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border:1px solid #FFF;/*Background Gradients*/background:#FFF;background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#FFF),to(#95CAFF))}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>

<center>
SIMPAN DISINI SCRIPTNYA</center>
</div>
  • Teks yang saya beri warna merah paling atas adalah ukuran Box dan posisinya, kawan bisa merubahnya [Edit] agar sesuai keinginan :q;
  • Simpan disini Scriptnya, kawan bisa menaruh Iklan, Like Box FB dan lain sebagainya
  • Simpan Template kawan dan lihat hasilnya


0 Kommentare:

Kommentar veröffentlichen