Mirip dengan trik hide/show artikel kali ini yang akan Beben si bloglang anu ganteng kalem tea beberkan. Pokoknya ada artikel bisa sembunyi lalu muncul lagi, akan dipostingkanlah :D Ingat!!! konten yg bisa ditanamkan dengan trick ini tidak hanya terbatas pada buku tamu saja yak sob ;) Mungkin kotak komentar, list friend, dll. Oke secara singkat menurut weblog yg Beben temukan ini, begini cara membuat show/hide secara sederhana dengan menggunakan javascript! Kalau disimak hide/show, toggle/display kayaknya sama saja yah :P
Good luck \m/ :-h
Begitulah kira-kira jika sobat ingin membuat culang (muncul ilang) :D Sekarang mari kita lanjutkan membuat slide-in panel effect with jQuery. Singkat penjelasan mengenai .slideToggle() dari web resmi Jquery bisa menuju halaman berikut jQuery API. Ingat pada template sobat sudah harus memiliki script jQuery inti jika akan memakai tutorial berikut :)<script type='text/javascript'>
function toggleDisplay(id) {
var obj = document.getElementById(id);
if(obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
<div id="UNIQUE-ID">Konten yang akan dihilangkan dan dimunculkan kembali !!!</div>
<a href="#" onClick="toggleDisplay('UNIQUE-ID'); return false;">Show/Hide</a>
Ramuan Ajaib
<script type='text/javascript'>
var slidePanel = 0;
$(document).ready(function() {
$("#panel-tab").click(function(e) {
e.preventDefault();
$("#panel").animate({top: slidePanel}, 800, 'linear', function() {
if(slidePanel == 0) {slidePanel = -460;}
else {slidePanel = 0;}
});
});
});
</script>
<style>
#panel {
width: 237px;
height: 457px;
position: absolute;
top: -457px;
right: 0px;
z-index: 100;
background-color: #333333;
}
#panel-tab {
width: 110px;
height: 21px;
position: absolute;
bottom: -21px;
left: 0px;
text-align:center;
background-color: #333333;
text-decoration: none;
color: #FFFFFF;
/* Mozilla */
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
</style>
<div id="panel">
<a href="#" id="panel-tab">Click for Cbox</a>
CONTENT YG MAU DISEMBUNYIKAN
</div>
Kalau mau cara instant, masukan seluruh kode diatas pada Add a Gadget ► HTML/Javascript Kalau mau step by step perhatikan kode yg dibedakan warna tulisannya yah!var slidePanel = 0;
$(document).ready(function() {
$("#panel-tab").click(function(e) {
e.preventDefault();
$("#panel").animate({top: slidePanel}, 800, 'linear', function() {
if(slidePanel == 0) {slidePanel = -460;}
else {slidePanel = 0;}
});
});
});
</script>
<style>
#panel {
width: 237px;
height: 457px;
position: absolute;
top: -457px;
right: 0px;
z-index: 100;
background-color: #333333;
}
#panel-tab {
width: 110px;
height: 21px;
position: absolute;
bottom: -21px;
left: 0px;
text-align:center;
background-color: #333333;
text-decoration: none;
color: #FFFFFF;
/* Mozilla */
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
</style>
<div id="panel">
<a href="#" id="panel-tab">Click for Cbox</a>
CONTENT YG MAU DISEMBUNYIKAN
</div>
- Warna merah Letakan diatas/sebelum tag </body>
- Warna biru Masukan sebelum kode ]]></b:skin>
- Warna ungu Masukin di body template (<body> ... </body>)
Save
Resource by: http://www.ultramegatech.com/blog/Good luck \m/ :-h
Loading... |
7 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...