Cara pasang tab menu accordion di sidebar

Posted on

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 thoughts on “Cara pasang tab menu accordion di sidebar

  1. saya sudah try langkah6 kat page element dia keluar error laa di page!

    mcam mana yer?

    nak selesaikan masalah itu?

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

Leave a Reply

Your email address will not be published. Required fields are marked *