Home » » Membuat Simple Menu

Membuat Simple Menu




Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :
/* Buble Image with jQuery
----------------------------------------------- */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}

8. Selanjutnya simpan java script berikut diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
9. Jika sudah, sekarang simpan kode berikut tepat diatas kode </body> :

<script src='http://kangdadang.googlecode.com/files/imgbubbles.js' type='text/javascript'>
</script>
<script type='text/javascript'>

jQuery(document).ready(function($){
    $(&#39;ul#orbs&#39;).imgbubbles({factor:1.75}) //add bubbles effect to UL id=&quot;orbs&quot;
    $(&#39;ul#squares&#39;).imgbubbles({factor:2.5}) //add bubbles effect to UL id=&quot;squares&quot;
})

</script>
10. Save

11. Cara Pemakaian

Misalkan pada Rancangan, Tambah Gadget, Html/Java Script :
<h4>Contoh 1</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="#"><img src="https://lh3.googleusercontent.com/-oD0uNs-QHXk/TXGC8jiDbCI/AAAAAAAAATA/1d_NCCNRFvg/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-Y3ccfdZGdpw/TXGCwECXrVI/AAAAAAAAASs/I6UTfM8u-hc/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-336bl0qpyX8/TXGCsPT3CRI/AAAAAAAAASk/LoxpjpvHMHM/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-KA8ApJ8PTSc/TXGDA8N0-EI/AAAAAAAAATI/k9M1LRQJUlU/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://lh4.googleusercontent.com/-ldqJuBEohZ4/TXGC2a_1JRI/AAAAAAAAAS4/l7p45z-yBQw/s1600/rss.png" /></a></li>
</ul>
<h4>Contoh 2</h4>
<ul id="squares" class="bubblewrap">
<li><a href="#"><img src="https://lh3.googleusercontent.com/-6RLs8k_CMWc/TXGCxXNotZI/AAAAAAAAASw/UfMBlK_v2VI/s1600/facebook1.png" /></a></li>
<li><a href="#"><img src="https://lh3.googleusercontent.com/-WE4EW8nogOU/TXGCo60OvNI/AAAAAAAAASg/0XabxkxN4vA/s1600/delicious.png" /></a></li>
<li><a href="#"><img src="https://lh3.googleusercontent.com/-uCHr4TvChGU/TXGCtcAEWVI/AAAAAAAAASo/qGfv0qlmpMs/s1600/digg1.png" /></a></li>
<li><a href="#"><img src="https://lh5.googleusercontent.com/-BuCwCHiEAZQ/TXGC-FarPmI/AAAAAAAAATE/dlJky6IT1IY/s1600/stumbleupon1.png" /></a></li>
<li><a href="#"><img src="https://lh6.googleusercontent.com/-uymYxw9mAHI/TXGC3ssqKTI/AAAAAAAAAS8/9zs6frqKDXI/s1600/rss1.png" /></a></li>
<li><a href="#"><img src="https://lh3.googleusercontent.com/-VjpQgs75frU/TXGDBwfCmTI/AAAAAAAAATM/ZrFNYXENws8/s1600/twitter1.png" /></a></li>
</ul>
NB:
Sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js  ini sudah ada pada template anda, anda tidak perlu lagi menambahkan script tadi pada template yang dipakai
Share
Related Post

1 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .