Selasa, 11 Januari 2011

Message Welcome Like Notification

Kalau membicarakan trik apa saja yang bisa dihasilkan dari jQuery PlugIn ini tidak akan ada habisnya sob. Ada saja yg gaya punya kalau melihat ke web-web developer :D Fungsi dari trik yg akan Beben si bloglang anu ganteng kalem tea paparkan kali ini mungkin fungsinya mirip dengan artikel sebelumnya mengenai Display Message Modal Window with jQuery Plugins. Kalau sekarang menampilkan message welcome, tampil diatas window browse. Sesaat akan muncul tulisan pesan diatas lalu hilang lagi deh ;)) Walau judul aslinya dari web yg Beben baca yaitu "Cool notification bar just like twitter" Ingat trik ini memakai jQuery script yah!!!

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
flash('Welcome to my blog my friends, happy enjoy yaw!!!')
});
function flash(message) {
$('#flash').html(message).slideDown("slow").delay(2000).slideUp("slow");;
}
//]]>
</script>
Gantilah tulisan pada script yg diberi warna merah, dan letakan diatas/sebelum tag </body>

Kode CSS

.hidden {
display:none;
}
.flash {
border-bottom: 3px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-bottom-left-radius:15px;
font-size:25px;
text-align:center;
position:fixed;
top:0;
left:15%;
color:#000000;
background:#FF0000;
width:800px;
padding:10px;
text-shadow:#555 0px 1px 1px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#FFFFFF');
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FFFFFF));
background: -moz-linear-gradient(top, #FF0000, #FFFFFF);
-moz-box-shadow:-1px -1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.flashs {
width:100%;
margin:0 auto;
}
Letakin diatas/sebelum kode ]]></b:skin> Setelah itu masukin juga kode HTML berikut didalam tag <body> template sobat.<div class="flashs">
<div id="flash" class="flash hidden">
</div>
</div>

Save

Lihat hasilnya berhasil apa tidak :)

 DEMO 


Resource by: http://dailytricks.tumblr.com/
di

Tidak ada komentar:

Posting Komentar