Flashing Message Box using JQuery

Setelah kemarin menjelaskan tentang Message menggunakan juery, sekarang pun saya akan menjelaskan cara pemasangan Message namun berbeda tampilan, kalau pada kesempatan sebelumnya Message-nya terletak diatas atau di bawah kalau yang sekarang terletak di pojok kiri atas blog kamu. Lihat saja demonya pada postingan ini.

Setelah melihat demonya sekarang kita lihat cara memasangnya.

1. Seperti biasa Login ke blogger
2. Masuk ke Rancangan >> Elemen Halaman
   
   
3. Setelah itu tambahkan sebuah gadget (untuk tempat pilih dimana saja)
   
   
4. lalu pilih yang HTML/Javascript dan masukan kode di bawah ini kedalamnya
   
   
   <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.pack.js"></script>
   <script type="text/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()
   {
   //first slide down and blink the message box
   $("#object").animate({
   top: "0px"
   }, 2500 ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
   
   //close the message box when the cross image is clicked
   $("#close_message").click(function()
   {
   $("#object").fadeOut("slow");
   });
   });
   </script>
   <style type="text/css">
   .message{
   border:1px solid #CCCCCC;
   position:absolute;
   width:270px; /*kamu dapat menyesuaikannya dengan pesan kamu, dengan merubah nominal angka*/
   border:1px solid #c93;
   background:#ffc;
   padding:5px;
   left:0px;
   top : -170px;
   }
   
   
   </style><div id="object" class="message"><img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
   
   <strong>Tulis Judul Pesan Disini</strong>
   <p >Isi dari pesan kamu tulis disini</p>
   </div>
5. Setelah itu simpan dan lihat hasilnya
   
   

Mudah dan sangat simple, yup begitulah oketrik selalu memberikan trik dan tips yang simple tapi keren dan berguna untuk kalian semua. Mungkin itu saja yang bisa saya sampaikan. Sampai ketemu di kesempatan selanjutnya ya. Terima kasih dan Happy Blogging.

Demo Flashing Message Box using JQuery

Oketrik adalah blog yang berisikan tentang Tutorial, tips, tricks, Free Download, Cheats dan lain-lain.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg