1News Online:
Home » » Tutorial Blog - Cara pasang tab menu accordion di sidebar

Tutorial Blog - Cara pasang tab menu accordion di sidebar

Wednesday, October 31, 2012 | 3:22 AM


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

Kongsi artikel ini : :

Post a Comment

 
Copyright © 2012. 1News Online - All Rights Reserved
Proudly powered by Blogger