Widget Choose Background

Hai guys, I'm back! Aku dah lama, ya, gak ngepost? Hehehe, soalnya sibuk ngedit blog ini. Nah, aku bakal ngasih tutorial lagi, nih. Kalian, tau, kan, widget choose background itu? Nah, sekarang aku bakal ngepos gimana caranya bikin widget itu. Biar gak penasaran, ayo readmore!

Credit: Kak Gifta

• Log in ke blogger masing-masing
• Layout >> Add gadget >> HTML/Javascript
• Copy dan paste kode ini:

<style>
#background a img{
width:50px;
height:50px;
display:inline;
margin-right:10px;
margin-top:0px;
border: 2px solid #C4E1FF;
}
#background a:hover img{
border:2px solid #C4E1FF;
-moz-border-radius: 35px;
border-radius: 35px;
}
</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 bg 1)"}); }); }); $(document).ready(function(){ $("#bgcolor2").click(function(){ $("body").css({"background":"url(url bg 2)"}); }); }); $(document).ready(function(){ $("#bgcolor3").click(function(){ $("body").css({"background":"url(url bg 3)"}); }); }); </script> <div style="text-align:center;"><a href="javascript:void(O)" id='bgcolor1' title="tooltips bg 1"><img alt='tooltips bg 1' src="url bg 1" width="50"height="50" /></a> <a href="javascript:void(O)" id='bgcolor2' title="tooltips bg 2"><img alt='tooltips bg 2' src="url bg 2" width="50" height="50"/></a> <a href="javascript:void(O)" id='bgcolor3' title="tooltips bg 3"><img alt='tooltips bg 3' src="url bg 3" height="50" width="50" /></a></div></div>

• Merah: Url background yang kamu mau
• Biru: Tooltips (misal: background hitam polkadot)

Nah, itu dia. Usahain sesuai sama warna tema blog kamu, ya. Ok, thanks!

---

Thanks for reading my post! Don't forget to comment ^^

---