Postingan

Menampilkan postingan dengan label CSS

Membuat background berganti sesuai waktu

S elamat malam netter (pas bikin artikel pas malam), kali ini gue mau berbagi cara bikin background web atau blog kalian berganti-ganti warna, disini gue memanfaatkan library jquery, seperti semboyan dari jquery sendiri yaitu write less do more , ini gue dapatkan dari beberapa cara yang ada di jQuery sendiri, yaitu dengan serInterval, fadeIn, fadeOut, addClass, dan lain-lain. Langsung aja caranya yaitu, Buat Javascriptnya <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ setInterval(function(){ var e = new Date, a = e.getSeconds(); if(a < 30){ $('body').removeClass('bg2').addClass('bg1'); }else{ $('body').removeClass('bg1').addClass('bg2'); } },1000); }); </script> Buat CSSnya <style> .bg1{background:url(URL GAMBAR 1);} .bg2{background:url(URL GAMBAR 2);} </style> Terakhir HTMLnya <bo...

Slide Dengan Jquery,

Hai pembaca semua, pada kali ini saya akan menuliskan yang baru nambahin isi otak ku tentang jQuery lagi kali ini, membuat slide untuk link yang kita tunjuk. apa maksudnya, ketika sebuah link kita tunjuk, maka disuatu tempat berbeda akan memunculkan, gambar mungkin atau apalah, yang ingin kita tampilkan. langsung aja scriptnya pertama masukan library script dari jQuery itu sendiri <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> nah langsung aja kita mulai codingya <script> $(document).ready(function(){ $("#link1").mouseover(function(){ $("#slide2").fadeOut(100); $("#slide3").fadeOut(100); $("#slide1").fadeIn(300); }); $("#link2").mouseover(function(){ $("#slide1").fadeOut(100); $("#slide3").fadeOut(100); $("#slide2").fadeIn(300); }); $("#link3").mouseover(function(){ $("#slide1").fadeOut(100); $("#slide2...

Selector, Event, dan Effect jQuery

Setelah beberapa waktu yang lalu saya posting sedikit tentang jQuery ( Belajar jQuery ), serta contoh jQuery yang menggunakan selector document, #show, #s, #hide dan eventnya adalah ready, click, dan effectnya show, hide, maka dengan saya sebuakan seperti itu, pasti kalian tahu mana event, selector, maupun effectnya, dimana selector adalah bagian yang akan di eksekusi, event adalah cara pengeksekusian selector, sedangkan effect adalah hal yang dikerjakan ketika selector dieksekusi.. Contoh <script> $(document).ready(function(){ $("#show").click(function(){ $("#s").show(600); }); $("#hide").click(function(){ $("#s").hide(600); }); }); </script> Selector * = Semua elemen menjadi selector #selector = id dengan nama selector .selector = class dengan nama selector selector = elemen dengan nama selector Event $(document).ready(function) $(selector).blur(function) $(selector).change(function) $(selector).click(function) ...