Stylish Expandable - Collapsible content box


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 = '&#8722;'; 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; ">&#8722;</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.

You may also want to check out these posts :


14 comments on "Stylish Expandable - Collapsible content box"

Add your comment. Please don't spam!
Subscribe in a Reader
azarre on Thursday, 09 July, 2009 said...

Pertamaxx By Admin... hehhee...

Bayu The Maniac on Thursday, 09 July, 2009 said...

mantab nih postingannya ..
hehehe ..
ada yang baru d blogku .. d koment yah ..

Lala on Thursday, 09 July, 2009 said...

Wah keren nich hasilnya ...
Musti dipraktekin tuch

Susy Ella on Thursday, 09 July, 2009 said...

keren.....tapi ella males nyobanya hehehhe

tapi makasih loh infonya....mungkn lain kali ella praktekin

Henny Y.Caprestya on Thursday, 09 July, 2009 said...

mantap!!!!

azarre on Friday, 10 July, 2009 said...

@ all : thanks yah udah baca... tengiyu...:D:)

attayaya on Friday, 10 July, 2009 said...

wah patut dicoba neh
tengkyu sob

black_id on Friday, 10 July, 2009 said...

waduh penjelasannya pake bahasa bule neh, ntar deh diraba2 sapa tahu bisa ngerti, thanks infonya y...

neilhoja on Friday, 10 July, 2009 said...

wah... mangstebh.. tapi males nyobanya, hehehe.. :D

kapan2 aja.. dicoba

oiya, salam kenal... buleh tukeran link?

buwel on Friday, 10 July, 2009 said...

Waaahh makasih neh tutor nya.....siiiipppp

♥ Neng Aia ♥ on Friday, 10 July, 2009 said...

hmm... nice! ;)

mocca_chi on Friday, 10 July, 2009 said...

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

Ramdhan on Saturday, 11 July, 2009 said...

keren Azzare! cuman untuk Ramdhan sekarang belum tau untuk apa digunakan. Ramdhan posting bukan artikel tutorial kayak gini...

tapi bener2 mantap!!

puluth® on Tuesday, 22 March, 2011 said...

Terima Kasih Ne Infonya,

Saya Mau Terpakan pada Kolom Komentar Bisa Gak?

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

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

previous Next home
 

azarre zarre | Copyright © 2009