Rabu, 06 November 2013
Cara membuat Elemen Box Melayang
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/AVvXsEiGJNTatAYor1CANK6ZIiSDkzD-QGatP2boT27WdNW90ErEnEY-M-vPIRQiEANn2Q6gHx41Q9OA0TYcRpHmE8ALholmp5nh6Xz2uOynbr6Lb6SUrZLQm4Ek-i84dF3O3Pkqbsy0Yb7Xe7Hq/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(){$('.notification').hover(function(){$(this).css('cursor','auto');});$('.notification span').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
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar