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>
• 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!
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'/>• Setelah itu Buat kode CSS, Letakan kode berikut sebelum kode ]]></b:skin>
<script type='text/javascript'>
$(document).ready(function(){
$(".run").click(function(){
$("#box")
.animate({opacity: "0"}, 1)
.animate({opacity: "1", top: "50"}, 500)
.animate({top: "50"}, 5000)
.animate({opacity: "0", top: "-158"}, 500)
return false;});
});
</script>
#box {• Letakan kode Berikut sebagai isi kotak pemberitahuan ini di bawah kode </body>
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;
}
<div id='box' style='display:scroll; position: fixed; top:-158px;'>• 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
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>
<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!
keren bang :D
BalasHapusgila mantap banget tutor-nya bozz,
BalasHapussukses slalu ya . . ,
:D
Thanks all untuk komentar komentar yang sudah kalian bagikan kesini :)
BalasHapusnice share om :) salam kenal
BalasHapusTo secom : Salam kenal juga bang secom :)
BalasHapussalam sob thanks sharenya.
BalasHapusoh iya sob kok blog inisemakin berat loadingnya sob why...
thanks
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
BalasHapusooh , kereen nih tutorialnya sob :)
BalasHapuswah ,bagus ni ,thank you :)
BalasHapuskenapa tidak keluar background nya yang berwarna putih seperti sobat punya ?
BalasHapuskeluar kok warnanya sudah saya test..., udah bisa di blog temen saya
BalasHapus