So buddy, you've been looking for a trick to make an "Expandable-Collapsible content box" ??? Here is where you'll get it. You can even make it more stylish as your own preferences with only a bit of touch (changing) to make it look more stylish. I've appllied it on my blog. And it looks better than the plain one. Now are you ready?? So let's go on right away with the tutorial. Juzz follow The instruction arranged below.
NOTE : Klik tanda [ + ] untuk membuka kontent!!!
1.) Seperti biasa anda harus Log in Ke Blogger, Lalu di dashboard Klik Layout > Edit HTML.
2.) Jangan lupa centang "Expand widget template".
3.) Ikuti Langkah2 berikut.
| Here's the code | [−] |
Step 1 : Add this code between <head>.......</head>
<!-- flooble Expandable Content header start -->
<script language="javascript">
// Expandable content script from flooble.com.
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end -->
<!-- EXPANDABLE CONTENT BOX START -->
<div style="border: 1px solid #000000; padding: 0px; background: #D2A52E; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td>Show / Hide Content</td><td align="right">
[<a title="show/hide" id="exp1246752708_link" href="javascript: void(0);" onclick="toggle(this, 'exp1246752708');" style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table>
<div id="exp1246752708" style="padding: 3px;">ISI TEXT DI SINI</div>
</div>
<script language="javascript">toggle(getObject('exp1246752708_link'), 'exp1246752708');</script>
<!-- EXPANDABLE CONTENT ENDS -->
Note :
:: background: #D2A52E adalah warna background content.
:: background: #000000 adalah warna background title-bar nya.
:: Show / Hide Content adalah Text untuk title-bar.
:: ISI TEXT DI SINI adalah untuk menempatkan konten. Bisa berupa text, gambar, atau keduanya.
<!-- flooble Expandable Content header start -->
<script language="javascript">
// Expandable content script from flooble.com.
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end -->
::=================:::================::
Step 2.) Add this code in the part of oyur post where you want to use this.<!-- EXPANDABLE CONTENT BOX START -->
<div style="border: 1px solid #000000; padding: 0px; background: #D2A52E; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #000000; color: #FFFFFF; "><tr><td>Show / Hide Content</td><td align="right">
[<a title="show/hide" id="exp1246752708_link" href="javascript: void(0);" onclick="toggle(this, 'exp1246752708');" style="text-decoration: none; color: #FFFFFF; ">−</a>]</td></tr></table>
<div id="exp1246752708" style="padding: 3px;">ISI TEXT DI SINI</div>
</div>
<script language="javascript">toggle(getObject('exp1246752708_link'), 'exp1246752708');</script>
<!-- EXPANDABLE CONTENT ENDS -->
Note :
:: background: #D2A52E adalah warna background content.
:: background: #000000 adalah warna background title-bar nya.
:: Show / Hide Content adalah Text untuk title-bar.
:: ISI TEXT DI SINI adalah untuk menempatkan konten. Bisa berupa text, gambar, atau keduanya.
4.) Save template dan lihat hasilnya.
14 comments on "Stylish Expandable - Collapsible content box"
Subscribe in a Reader
Pertamaxx By Admin... hehhee...
mantab nih postingannya ..
hehehe ..
ada yang baru d blogku .. d koment yah ..
Wah keren nich hasilnya ...
Musti dipraktekin tuch
keren.....tapi ella males nyobanya hehehhe
tapi makasih loh infonya....mungkn lain kali ella praktekin
mantap!!!!
@ all : thanks yah udah baca... tengiyu...:D:)
wah patut dicoba neh
tengkyu sob
waduh penjelasannya pake bahasa bule neh, ntar deh diraba2 sapa tahu bisa ngerti, thanks infonya y...
wah... mangstebh.. tapi males nyobanya, hehehe.. :D
kapan2 aja.. dicoba
oiya, salam kenal... buleh tukeran link?
Waaahh makasih neh tutor nya.....siiiipppp
hmm... nice! ;)
ohhh rumit bgt copasan di body postingannya oee... kek njlimet padahal aku pengen tau begimana caranya make yg begituan. tak simpen ah dulu, kapan kapan dipake
eh ya azzare, iseng nanya. gimana caranya rubah file extension mp4 jadi 3gp, hii jangan diketawain yaa :P
keren Azzare! cuman untuk Ramdhan sekarang belum tau untuk apa digunakan. Ramdhan posting bukan artikel tutorial kayak gini...
tapi bener2 mantap!!
Terima Kasih Ne Infonya,
Saya Mau Terpakan pada Kolom Komentar Bisa Gak?
Post a Comment
Note >> Comment Blog ini adalah DoFollow
Check status do follow suatu blog. Caranya :
1. Install NoDoFollw firefox addons ke browser firefox anda.
2. Setelah ter-install klik kanan pada salah satu sembarang link di halaman yang ingin anda check status dofollow-nya. Klik tulisan nodofollow. Seluruh link di halaman yang anda check akan terhighlight.
3. Indikatornya, jika terhighlight warna biru maka link dofollow. Jika merah bukan dofollow.
PLEASE DON"T BE ANONYMOUS