You must enable Javascript in your browser to run or open this site.

Tutorial Run Message on Top Jquery

Dulu saya pernah mebagi bagikan tutorial tentang tombol yang mengeluarkan text alert dengan tujuan untuk mengeluarkan tulisan dalam bentuk alert (kotak pemberitahuan). Kotak pemberitahuan tersebut akan muncul di tengah layar komputer. Dengan pemberitahuan alert itu, pengunjung menjadi paham apa yang diminta oleh si Admin tersebut.
Contoh :

Dalam Tutorial kali ini sangat sama tujuannya, tetapi penyajiannya yang sangat berbeda. Tutorial kali ini menggunakan keistimewaan Script Jquery yang biasanya sulit dimengerti. Ketika sobat mengeklik tombol itu, maka yang keluar adalah butiran butiran informasi yang keluar dengan Effect Jquery (Smooth) dari atas layar Komputer sobat ditambah Effect Opacity.
Contoh : Blog Temen Sini

Nah, sudah mengerti bukan? Sekarang tahap pembuatannya!
• Buka Blog Sobat dengan Pass dan ID

• Buka Dashboard → Edit HTML → Centang Expand Widget

• Letakan kode berikut setelah kode <head>
<script src='https://sites.google.com/site/farixsan/script-1/RunMessage.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.run&quot;).click(function(){
$(&quot;#box&quot;)
.animate({opacity: &quot;0&quot;}, 1)
.animate({opacity: &quot;1&quot;, top: &quot;50&quot;}, 500)
.animate({top: &quot;50&quot;}, 5000)
.animate({opacity: &quot;0&quot;, top: &quot;-158&quot;}, 500)
return false;});
});
</script>
• Setelah itu Buat kode CSS, Letakan kode berikut sebelum kode ]]></b:skin>
#box {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF7MwqNFJs3u2cWWNUq67W_IA3X7Hm3twuA2ccsHloazmtA-p2XjLj8SlDAFV2GuUzwzwiSU5lFo50IG189W00vGrj1pco1QfYk9FvbXagO4a7-AsBrHWxecDxPRCYVWrRjKFcj-CjmMM/s1600/warning.png) no-repeat;
padding: 45px 10px 10px 10px;
height: 100px;
width: 400px;
font:100% Comic Sans MS;
color: #000;
border: 1px solid #ccc;
position: relative;
-moz-box-shadow: inset 0 0 5px #000;
-webkit-box-shadow: inset 0 0 5px#000;
box-shadow: inner 0 0 5px #000;
}
• Letakan kode Berikut sebagai isi kotak pemberitahuan ini di bawah kode </body>
<div id='box' style='display:scroll; position: fixed; top:-158px;'>
Jika Ingin Copy Paste Blog Ini melalui Page Source, mohon Izin di CBOX terlebih dahulu! Sedangkan yang Copy Paste dari Artikel di Blog ini, diharap agar mencantumkan Link beserta namanya, Terima Kasih!
</div>
• Kemudian Letakan kode berikut (Tombol Message) ini dimana saja boleh, kalau mau meletakannya sebagai widget ya klik Page Element → Add Gadget → Javascript → Copy Paste kode berikut
<a class="run" href="#">Run Message!</a>
Ganti kode merah sesuai kemauan.
• Save deh. Apa yang terjadi akan mejadi seperti saya di pojok kanan bawah blog ini.
Kalau mau share, harus cantumkan link blog ini di postingan mu!

11 comments

  1. gila mantap banget tutor-nya bozz,
    sukses slalu ya . . ,
    :D

    BalasHapus
  2. Thanks all untuk komentar komentar yang sudah kalian bagikan kesini :)

    BalasHapus
  3. nice share om :) salam kenal

    BalasHapus
  4. To secom : Salam kenal juga bang secom :)

    BalasHapus
  5. salam sob thanks sharenya.
    oh iya sob kok blog inisemakin berat loadingnya sob why...
    thanks

    BalasHapus
  6. To Kisah Abu Nawas : sama sama sob :) Hah berat sob? di loadnya atau apa? kalo load maklum ada music box nya... saya mau copot nih

    BalasHapus
  7. ooh , kereen nih tutorialnya sob :)

    BalasHapus
  8. wah ,bagus ni ,thank you :)

    BalasHapus
  9. kenapa tidak keluar background nya yang berwarna putih seperti sobat punya ?

    BalasHapus
  10. keluar kok warnanya sudah saya test..., udah bisa di blog temen saya

    BalasHapus