Floating Message Bottom With jquery

Setelah beberapa hari g online di kerenakan g ada biaya koneksi mengakibatkan saya tidak update blog ini selama 3 hari namun setelah mempunyai cukup uang akhirnya saya update blog ini. Maaf untuk pengunjung blog ini apabila kecewa karena saya tidak mengupdate blog ini, bukannya saya malas namun karena tidak ada biaya, Nah biar saya mempunyai biaya koneksi, saya harapkan teman - teman semua mengklik iklan yang ada di blog ini.

Demo Floating Message Bottom With jquery

Cukup curhatnya sekarang kita kembali ke tema yaitu Floating Message bottom With jquery. Apa maksud dari tema di atas? Jadi kita bisa memberikan pesan ataupun iklan dalam bentuk teks dengan menggunakan jquery. Mengertikah kamu? kalau tidak mengerti di postingan ini saya buat demonya yang letaknya ada di bawah browser kamu. Bagaimana sekarang mengertikan? oke kita lanjut ke tahap pemasangannya.

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. setelah semua di lakukan dengan benar, Klik tombol Simpan
   
   

Mudah bukan cara membuat dan memasangnya? oiya dalam kode tersebut terdapat kode CSS yang bisa sobat modifikasi sesuai template sobat, apa tujuannya? agar trik ini macing dengan template sobat. Mungkin hanya sekian saja yang bisa saya sampaikan kurang lebihnya mohon maaf. Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg