Cara pasang tab menu accordion di sidebar


Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba tab menu yang berefek accordion seperti yang boleh dilihat di sini(sila klik). Pada tab accordion tersebut, terdapat 3 widget iaitu Recent Comments, Top Commentators dan Popular Posts. Untuk pergi ke ruangan yang berkaitan, hanya perlu klik pada title tab tersebut.

Untuk memasang tab accordion beserta widget Recent Comments, Top Commentators dan Popular Posts, sila ikut beberapa langkah dibawah.

p/s: Sila backup script template anda terlebih dahulu.

Langkah 1

Log in blog=> Dashboard=> Layout=> Edit HTML.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl dan F secara serentak. Bar Find akan muncul. Seterusnya, taip atau paste kod ]]></b:skin> pada ruang Find dan kemudian tekan Enter.


Langkah 3

Salin kod biru di bawah dan paste sebelum atau diatas kod ]]></b:skin>
Ada boleh edit kod biru yang dibold dengan menggantikannya dengan kod warna yang sesuai. Kod warna boleh anda pilih disini.(sila klik)

dl {
width: 95%;}
dl,dd {
margin: 0px 10px;}
dt {
background: #e5e5e5;
font-size: 12px;
padding: 2px 20px;
margin: 2px;
border:2px solid #888888;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px; 
}

Langkah 4

Sekali lagi, pada ruang Find, taip atau paste kod </head> . Seterusnya tekan Enter

Langkah 5

salin kod merah dibawah dan paste diatas atau sebelum kod </head>

<script src='http://sites.google.com/site/defaultjssite/jquery1.js'/>
    <script>
    $(document).ready(function(){
        $(&quot;dd:not(:first)&quot;).hide();
        $(&quot;dt a&quot;).click(function(){
            $(&quot;dd:visible&quot;).slideUp(&quot;slow&quot;);
            $(this).parent().next().slideDown(&quot;slow&quot;);
            return false;
        });
    });
    </script>

Seterusnya klik Preview dan jika tiada mesej Error yang terpapar, klik Save.

Langkah 6

Salin kod hijau dibawah dan paste pada notepad. Gantikan kod yang di bold dengan URL blog dan nama anda. Kemudian salin kod yang telah siap di edit ini ke dalam Add A Gadget => HTML/Javascript

<dl>
    <dt><a href="/">Recent Comments</a></dt>
    <dd>
        <ul>
<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://URL disini.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
    </ul>
        </dd>

    <dt><a href="#">Top Commentators</a></dt>
    <dd>
        <ul>
<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "")  var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2FURL disini.blogspot.com&num=10&filter=nama anda disini" type="text/javascript"></script>
    </ul>
        </dd>

    <dt><a href="#">Popular Posts</a></dt>
    <dd>
    <ul>
<script language="JavaScript">
aBold = false;
numposts=1000;
maxshowresult=10;
home_page = "http://URL dsini.blogspot.com/";
</script>
<script src="http://sites.google.com/site/testingsahaja/toppost.js" type="text/javascript"></script>
    </ul>
        </dd>
</dl>

Akhir sekali klik Save.

{ 45 comments.. read them below or add one }

farenova farenova 11:51 AM
thanks for sharing, nama pun dah best, tab accordian huhuhu.
محمد فردوس سعد محمد فردوس سعد 1:05 PM
salam..nk tny..langkah 6 tu just past n save kt notepad je ke?
:: Feez_Mior :: :: Feez_Mior :: 2:09 PM
sory.. nk tnye jgk.. langkah 6 tu nk letak kt mane? add a widget ke? atau paste kt html?
:: Feez_Mior :: :: Feez_Mior :: 2:18 PM
ok.. da taw.. letak jek kt page element..
Wan Perlis Wan Perlis 3:16 PM
wah menarik2. jimat ruang di blog
Nescafeais Nescafeais 5:16 PM
@Feez

Kat Add A Gadget
Admin Admin 4:28 AM
slm Nescafeais..kenapa still xkuar apa-apa pun pass saya ikut tutorial ni menu recent comment,top commentator & popular pos tu ada keluar kt blog saya..tp kandungan-nya tiada..

tolonglah saya nk selesaikan-nya.

cuba awk check tgk kt http://senjata8@blogspot.com
Admin Admin 3:12 PM
yahoo! dah menjadi..terima kasih byk2 cikgu krn buat tutorial ini.

terbaikk.
KIDbrush® KIDbrush® 3:57 AM
Haku suspek ko broo... haku linkkan blog ko kat blog hampehh haku... buleh kaaa (dh link pon keh keh )
lassiegewdix lassiegewdix 9:36 AM
lngkah 6 wat widgets :))
AnonymousAnonymous 11:57 PM
saya sudah try langkah6 kat page element dia keluar error laa di page!

mcam mana yer?

nak selesaikan masalah itu?
Nescafe ais Nescafe ais 1:43 AM
@Anony

Langkah 6 tu paste di HTML/Javascript (Add A Gadget)
Iza Iza 2:36 PM
aku nk try la.....
Kalau kat Teratak Usang, blh guna tak benda ni? Sbbnya aku guna disqus, blh masuk ke?sesuai tak?
Iza Iza 3:14 PM
Yessz.....dah jadi la.
http://akuiza.blogspot.com
Tq.
Halizayana Halizayana 12:16 PM
warna border sy dh ubah tpi still tak bertukar pun knape ye?dia jd sama warna dgn background je

http://malaywifelife.blogspot.com
Halizayana Halizayana 1:10 PM
warna border sy dh ubah tpi still tak bertukar pun knape ye?dia jd sama warna dgn background je

http://malaywifelife.blogspot.com
Halizayana Halizayana 10:53 PM
en.nescafe,msalah sy msih xblh ubah...tak faham la nape
☺[ai][sUmi]☺Chan ☺[ai][sUmi]☺Chan 8:40 PM
thanks.. tapi kan kat part top commentor tu xjadik la.. bila klik xde pape jadik..

http://quirkybutterfly.blogspot.com/
Salahuddin Harith Salahuddin Harith 4:27 PM
ada masalah nescafe...dah jadi cuma tak cantik sebab popular post n top commentators bercampur...tolong tengok nes

http://solaharith.blogspot.com
Iza Iza 9:36 AM
Aku buat kat Teratak Usang...napa top commentators x keluar apa2? Tlg tgkkan....

http://azilas.blogspot.com.

tq.
Along25 Along25 2:12 PM
da try, nape yg berfungsi popular post jer? tolong saya huhuhu...
Along25 Along25 2:20 PM
boss da ok da, tapi top commentator tak fungsi.. sbb pe ek?
Shuk Shuk 8:25 PM
salam.tab menu nie memang cantik, jimatkan space.saya dah try, memang jadi. tapi cuma bahagian recent comments tak dapat keluar ape2. top comment dgn popular post ok je takde problem. harap en nes boleh tgk2kan ^_^

http://syukur86.blogspot.com/
pinjaman semalaysia2u pinjaman semalaysia2u 1:10 PM
salam
rasa susah la nak wat...dah cuba dah
Hafizul_izzana Hafizul_izzana 10:28 AM
salam, cikgu nes, cmna nak cari html/javascript tu??tak jumpa pon lepas add gadget..
baem baem 8:36 PM
salam... terime kasih atas tips2 yang berguna utk rookies cm sy nie...
Pert Doherty Pert Doherty 2:39 PM
saya boleh wat smpi 3 menu je.. sy cuba tambah.. jadi 6.. tpi yang terpapar cuma 3..

otakdanjantung.blogspot.com
Kie-yu Kie-yu 9:06 AM
bro yg top xommentator tu monthly ke semua
anDi anDi 12:08 AM
kalau nak tukar content camne ek? cth, nk tukar 'top commentator' kpd 'link list'
fatin hanani fatin hanani 1:47 PM
thnks fatin dah berjaya :)
fby_arts fby_arts 6:24 PM
erm..sy ade masalah sikit..blog sy xleh nak tukar template la..just leh gune yg "templete desiner jer"nape erk..tolong la sy cikgu...
tq
Nescafe ais Nescafe ais 6:28 PM
@fby_artsBoleh. Cuba download template dari btemplates.com. Lepas tu cuba upload script tu.
fby_arts fby_arts 10:05 PM
dah dowlandn upload tp xleh jgk..camane nie...
Nescafe ais Nescafe ais 11:04 PM
@fby_artsKalau tak boleh juga, saya tak dapat nak tolong apa-apa lagi. Cuba buat satu lagi blog guna template designer, lepas tu upload template yang dah download dari btempletes.com tu. Boleh ker tak.
Ummi Hanie Ummi Hanie 4:19 PM
jadi dah..suke bangat :)
tp nk tanye,boleh kan kita tambah widget lagi...dan mcmmane nk tambah widget recent posts ? sy dah try byk kali xmnjadi
ikhwan idris ikhwan idris 6:26 AM
sama seperti soalan cik Ummi kat atas ni .

dah banyak kali cuba nak letak kan widget tambahan kat 'tab accordian' ni, tapi tak menjadi .. boleh tolong ?

1. nak tambah widget Twitter (yg leh direct Tweet tu)

2. nak hide kan Blog Archieve (letak dalam tab accordian ni)

http://www.blogbiarbetul.blogspot.com
dean dean 10:38 PM
sya da buat yang langkah ke 6 tuh..tapi xkuar kandungannya..yang kaur hanya tjuk jew..mcm mana yer nk selesaikn?
Shahazrin Shahazrin 7:48 AM
nak paste kod hijau dimana?
Nescafe ais Nescafe ais 8:20 AM
@Shahazrin

Dalam Add A gadget=> HTML/Javascript
mzhany mzhany 2:35 PM
boleh tolong tak, sy dah try buat, tp bila dah add gadget semua tuh, yang keluar semua nya statik. takleh hide. ada yg bile klik tak slide keluar pun. kenapa eh....dah byk kali try tak jadi jugak...sedeyyyy
GeminiGurlz GeminiGurlz 6:25 PM
nape utk top comentor xdapat?
GeminiGurlz GeminiGurlz 6:36 PM
dah dapat da..! thanks!! =))
Ieta Mat Sa'ad Ieta Mat Sa'ad 12:07 AM
As salam. sy dh buat, dah keluar diblog sy semua tu tapi bila klik satu satu, apa pun tak keluar... tolong tengok... http://www.ieta.my