Menambahkan Widget Choose Background

Hai, Gifta balik lagi dengan tutorial yang direquest oleh Najwa! Kali ini Najwa tanya cara menambahkan widget choose background. Kayak apa sih itu? Read more aja ya...

Jadi kayak gini, lho...

 

CREDIT IMAGE AND CODE: TIARA

Mau? Yuk ikuti stepnya!

1. Pergi ke Blogger > Dashboard > Layout / Tata Letak

2. Klik Add a Gadget, lalu pilih HTML/JavaScript

3. Copy dan paste kode di bawah pada kotak Content

<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>

4. Save!

Nah, sekarang, sudah ada widget choose background di blog kalian!

Keterangan:
Merah: URL background kalian 
Biru: tooltip background kalian
Tooltip itu yang "blue polkadot" pada gambar,
cara menghias dan memasang tooltip di blog, klik sini