Jumat, 24 Juni 2011

Floating Message Bottom With jquery

  1. Login ke Blogger
  2. Masuk ke Rancangan >> Elemen Halaman 
  3. lalu tambahkan sebuah gadget (untuk tempat pilih di mana saja) lalu pilih yang HTML/javascript 
  4. setelah itu masukan kode di bawah ini kedalamnya

<style media="all" type="text/css">
#message_box {
position: absolute;
left: 0px;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
width:99%;
display:none;
color:#0000FF;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

</style>
<script type="text/javascript" language="javascript">
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
$(document).ready(function()
{
if(getCookie('show_message')!='no')
{
var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
$('#message_box').css("top",pos-28+"px");
$('#message_box').show(); //display the message box

//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
$('#message_box').animate({top:pos-26+"px" },{queue: false, duration: 500});
});
}
//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
//the messagebox gets scrool down with top property and gets hidden with zero opacity
$('#message_box').animate({ top:"-=15px",opacity:0 }, "slow");
setCookie('show_message','no',1); //cookies is set to no value
});
});

//function to set the cookie name, values and expiry time in hours
function setCookie(c_name,value,expireHours)
{
var exhour=new Date(); //create the current date object
exhour.setHours(exhour.getHours()+1);
document.cookie=c_name+ "=" +escape(value)+
((expireHours==null) ? "" : ";expires="+exhour.toGMTString());
}

//function to get the value from cookie name
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

</script>
<div id="message_box"><img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />PESAN/LINK IKLAN KAMU DISINIjquery</div>


5.selesai dan lihat hasil nya
Floating Message Bottom With jquery 9out of 10 based on 10 ratings. 9 user reviews.
 

Dafatr Isi

Label Blog

japarus
Template | copyright@2011 | Design by : DiM4sHDiM4sH