Tips Blog : Membuat Tombol Multi Fungsi Tanpa Loading

Hahahha.... Akhirnya DG berhasil kali ini mempercantik Blog!

Mau tau apa yang udah DG pelajarin hari ini? Pastinya Mau donk! Oke deh DG akan kasi tau pada kalian yang sedang dilanda rasa penasaran. coba perhatikan Blog dunia-guee.blogspot.com. Ada yang berubah gak? Yup, DG berhasil membuat Tombol Multifungsi Tanpa Loading, Nah itu semua berkat bantuan si GECOK. Dengan mantra2 yang dia berikan, Blognya DG udah jadi lebih keren dari yang sebelumnya.

Oke, Dari pada ngomong mulu yang gak bakal mungkin kelar-kelar, sekarang waktunya DG kasi tau Cara Membuat Tombol Multifungsi Di Blog Tanpa Loading, Mumpung ini perut masih bisa di ajak kompromi soalnya belum sarapan dari tadi pagi! Hehehhehehe.

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 ataskode ]]></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 !

<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(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

Klik button "Tutup" untuk menghilangkan area ini

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

Klik button "Tutup" untuk menghilangkan area ini

Berlangganan posting via RSS FEED

Atau berlangganan posting via email:

Description: Tips Blog : Membuat Tombol Multi Fungsi Tanpa Loading Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Blog : Membuat Tombol Multi Fungsi Tanpa Loading Hot News!!! "Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda"