Cara membuat Elemen Box Melayang
Ditulis oleh :
Unknown
- Hari:
Selasa, 03 Juli 2012
-
Jam
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/AVvXsEhH0eGgw-AZ_dIg9UpFxLK5oImvQl_9uU5NMv_CHS7gzHmEX9VE4mkJ6Bi2PPcCQWeQt6SQXA5_r5aNVvmV4qQ7nXjKRqCsAzCvyaT4aKiRa7gw7dGfPLS_F22r30kx4coI6NDI3a8UJq0R/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
Reviewer: Unknown - Itemreviewed: Cara membuat Elemen Box Melayang
Description Cara membuat Elemen Box Melayang » Rating: 4.5
atau seandainya ada Link yang rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
Artikel Terkait Menarik Lainnya :
,
wew keren sob, ijin praktek...^_^
BalasHapussilahkan itulah tujuan kita berbagi :y
Hapus