Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Senin, 10 Januari 2011

Flashing Message Box using JQuery

Kategori : , ,

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
    Rancangan
  3. Setelah itu tambahkan sebuah gadget (untuk tempat pilih dimana saja)
    Gadget
  4. lalu pilih yang HTML/Javascript dan masukan kode di bawah ini kedalamnya
    HTML/javascript
    <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
    Simpan
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

5 Komentar untuk Flashing Message Box using JQuery

oke gan, semoga berhasil y ^_^

mantap bro blognya

salam sejahtera dari http://sayalogan.blogspot.com/

wah bneran nih bnyk trik disini...slam sobat...

maaf ni sob bru smpt knjungannnya...

gpp sob, yang pentingkan berkunjung :)