Saturday, September 4, 2010

Membuat Tombol Multi Fungsi Tanpa Loading

Posted by bob
Membuat tombol multi fungsi ? apa yah yang di maksud ?
Tombol multi fungsi bisa di ibaratkan sekali klik semua nya ada di dalamnya tanpa loading, Tidak percaya ?
contoh tombol nya seperti ini.

Setelah di klik akan muncul gambar seperti ini:


didalam nya anda bisa pasang navigasi, contact, about me, dll. Tinggal disesuaikan dengan selera anda. Bagaimana tertarik ?
Jika tertarik mari memulai membuatnya.

1. Login dulu ke blog anda, Masuk ke Rancangan > Edit HTML.
2. Jangan lupa centang Expand Template Widget. Lalu letakan kode di bawah ini tepat di atas kode ]]></b:skin>
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

3 Lalu letakan kode di bawah ini tepat di bawah kode ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>
4. Anda bisa menyimpan nya terlebih dahulu lalu melanjutkan nya lagi.
5. Sekarang cari kode </body> , letakan kode di bawah ini tepat di atas kode tersebut.
<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Welcome</p>
<h3>About Me</h3>
<p>Saya adalah seorang pelajar dari jakarta yang ingin terus belajar sampai cita cita tercapai. Saya tidak akan takut mengambil resiko untuk kedepannya. Karna Semua materi di dunia ini tercipta oleh kekuatan pikiran manusia, maka arahkan pikiran dengan baik dan benar, karena apa yang Anda pikir itulah yang akan terjadi.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Gecok</h3>
<ul>
<li><a href='http://gecokk.blogspot.com/'>Home</a></li>
<li><a href='http://gecokk.blogspot.com/2010/06/pertanyaan-untuk-gecok.html' target='_blank'>Pertanyaan</a></li>
<li><a href='http://gecokk.blogspot.com/2010/06/laporan-bug.html' target='_blank'>Laporan Bug</a></li>
<li><a href='http://gecokk.blogspot.com/2010/07/update-status-via-gecok.html' target='_blank'>Update Status via Gecok</a></li>
</ul>
</div>

<div class='colright'>
<h3>Contact</h3>
<ul>
<li><a href='http://twitter.com/barbozzz' target='_blank'>Twitter</a></li>
<li><a href='http://gecokk.blogspot.com/' target='_blank'>Facebook</a></li>
<li><a href='http://indotwit.com/barbos' target='_blank'>Indotwit</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>About</a>
 Untuk contoh meletakan nya lihat di bawah ini.
<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Welcome</p>
<h3>About Me</h3>
<p>Saya adalah seorang pelajar dari jakarta yang ingin terus belajar sampai cita cita tercapai. Saya tidak akan takut mengambil resiko untuk kedepannya. Karna Semua materi di dunia ini tercipta oleh kekuatan pikiran manusia, maka arahkan pikiran dengan baik dan benar, karena apa yang Anda pikir itulah yang akan terjadi.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Gecok</h3>
<ul>
<li><a href='http://gecokk.blogspot.com/'>Home</a></li>
<li><a href='http://gecokk.blogspot.com/2010/06/pertanyaan-untuk-gecok.html' target='_blank'>Pertanyaan</a></li>
<li><a href='http://gecokk.blogspot.com/2010/06/laporan-bug.html' target='_blank'>Laporan Bug</a></li>
<li><a href='http://gecokk.blogspot.com/2010/07/update-status-via-gecok.html' target='_blank'>Update Status via Gecok</a></li>
</ul>
</div>

<div class='colright'>
<h3>Contact</h3>
<ul>
<li><a href='http://twitter.com/barbozzz' target='_blank'>Twitter</a></li>
<li><a href='http://gecokk.blogspot.com/' target='_blank'>Facebook</a></li>
<li><a href='http://indotwit.com/barbos' target='_blank'>Indotwit</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>About</a>
</body>
6. Simpan dan Lihat Hasilnya.

Semoga bermanfaat !
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)