Saturday, July 4, 2015

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

There are 7 comments.
Please post another comment..

  1. makasih tutorialnya
    dulu saya tidak bisa tapi sekarang sudah bisa

    ReplyDelete
  2. Somebody essentially lend a hand to make seriously posts I might state.
    This is the first time I frequented your website page and thus
    far? I amazed with the research you made to make this particular
    post amazing. Fantastic task!

    my website :: replica omega seamaster planet ocean review

    ReplyDelete
  3. Nice answers in return of this query with genuine arguments and explaining all about that.



    Here is my web-site swiss replica rolex yachtmaster

    ReplyDelete
  4. Right here is the perfect website for anyone who wants to find out about this
    topic. You understand a whole lot its almost tough to argue with you (not that I really would want to…HaHa).
    You definitely put a new spin on a subject which has been discussed for ages.
    Great stuff, just wonderful!

    my homepage replica rolex watch faces

    ReplyDelete
  5. If some one needs expert view concerning blogging after that i
    propose him/her to pay a visit this webpage, Keep up the fastidious job.



    Here is my web blog Nathaniel Hearnen

    ReplyDelete
  6. Just wish to say your article is as surprising.
    The clearness in your post is simply spectacular and i can assume you're an expert on this subject.
    Fine with your permission allow me to grab your feed to keep updated with forthcoming post.
    Thanks a million and please continue the enjoyable work.


    Feel free to visit my site omega speedmaster professional x-33 replica

    ReplyDelete