Sabtu, 13 September 2014

Choose One Background

Kali ini aku mau share cara membuat choose one background.Jadi nanti kalian punya pilihan background di blog yang bisa mengganti background blog kalian tanpa membuka PS.Tinggal klik gambar aja.Simple kan?

Menuju step....

Blogskins : Cari kode sidebar
Simple/Denim template : Tata Letak >>Add Gadget >>HTML/Java Script

1.Copy code dibawah ya...
<style>#background a img{width:50px;height:50px;display:inline;margin-right:10px;margin-top:0px;border: 1px solid #C4E1FF;}#background a:hover img{border: 1px solid #C4E1FF;}</style><div id="background"> <script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script> <script> $(document).ready(function(){ $("#bgcolor1").click(function(){ $("body").css({"background":"url(URL Background 1)"}); }); }); $(document).ready(function(){ $("#bgcolor2").click(function(){ $("body").css({"background":"url(URL Background 2)"}); }); }); $(document).ready(function(){ $("#bgcolor3").click(function(){ $("body").css({"background":"url(URL Background 3)"}); }); }); </script> <div style="text-align:center;"><a href="javascript:void(O)" id='bgcolor1' title="Judul Background 1"><img alt='Tooltips Background1' src="URL Background 1" width="50"height="50" /></a> <a href="javascript:void(O)" id='bgcolor2' title="Judul Background 2"><img alt='Tooltips Background 2' src="URL Background 2" width="50" height="50"/></a> <a href="javascript:void(O)" id='bgcolor3' title="Judul Background 3"><img alt='Tooltips Background 3' src="URL Background 3" height="50" width="50" /></a></div></div>
Hijau : Judul Background
Merah : URL Background
Ungu :Tooltips Background

2.Save deh!

Tidak ada komentar:

Posting Komentar