Sidebar on Slick Mode

Cara membuatnya:
1. Login ke Blogger.
2. Cari ]]></b:skin> dan copy paste kode berikut diatasnya:

<!-- Slick Call -->
#slick_area {
 border:1px solid #585858;
 background-color:#141414;
 padding:5px;
 margin:10px 0;
 line-height:18px;
}
#slick_area a{
 color:#000;
 text-decoration:none;
}
.slick_area a:hover{
 color:#FF0000;
}
ul.slick {
 margin:2px 2px 8px 0;
 padding:0px;
}
ul.slick li {
 list-style:none;
 display:inline;
 background-color:#fff;
 padding:5px 5px;
 text-decoration:none;
 font-size:10px;
 font-weight:bold;
 text-transform:uppercase;
 cursor:pointer;
 border:;
color:#3D72C0;
}
ul.slick li:hover {
 color:#264778;
border:1px solid #585858;
}
ul.slick li.active {
 background-color:;
color:#264778;
 border:1px solid #585858;

}
.content-slick {
 background-color:;
 border-bottom:3px solid #585858;
 color:#000;
 min-height:40px;
 padding:2px;
 text-align:justify;
}
.content-slick ul {
 margin:2px;
 padding:0;
}
.content-slick ul li {
 list-style:none;
color:#3D72C0;
 border-bottom:1px solid #585858;
 padding:4px;
}
.content-slick ul li:last-child {
 border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
 display:block;
color:#000;
 background-color:#3D72C0;
}
.content-slick ul li a {
 text-decoration:none;
 color:#264778;
 display:block;
}
<!-- Slick End -->

3. Next, cari kode </head> dan copypaste kode berikut ini tepat diatasnya:

<!-- Slick Call -->
<script type='text/javascript'>
$(document).ready(function(){
 $(&#39;#komentar, #terkait&#39;).hide();
 $(&quot;ul.slick li&quot;).click(function () {
  $(&quot;.active&quot;).removeClass(&quot;active&quot;);
  $(this).addClass(&quot;active&quot;);
  $(&quot;.content-slick&quot;).slideUp();
  var content_show = $(this).attr(&quot;title&quot;);
  $(&quot;#&quot;+content_show).slideDown();
 });
});
</script>
<!-- EndSlick Call -->

4.Terakhir masukan sebuah widget dan masukkan kode berikut ini:

 <ul class="slick">
<li title="terbaru" class="slick active">Recent</li>
<li title="komentar" class="slick">Link Back</li>
<li title="terkait" class="slick">Comment</li>
</ul>

<div id="terbaru" class="content-slick">
<ul>
<script src="http://suparyanto.fileave.com/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://masphecorel.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
</ul>
</div>

<div id="komentar" class="content-slick">
<ul>
<center><a href="http://masphecorel.blogspot.com/" target="_blank"><img border="0" src="http://i575.photobucket.com/albums/ss198/suparyanto/iconmasphecorelblack.gif" /></a><center>
<textarea name="textarea" cols=&quot;20"><a href="http://masphecorel.blogspot.com"><img src="http://i575.photobucket.com/albums/ss198/suparyanto/iconmasphecorelblack.gif" width="90" height="17" border="0" /></a></textarea></center></center>

<a href="http://topofblogs.com/education_training"><img border="0" src="http://stats.topofblogs.com/send/43345" alt="TopOfBlogs" /></a><br />

<script type="text/javascript" src="http://widgets.amung.us/small.js"></script><script type="text/javascript">WAU_small('4eqh7gjytaco')</script>
<br />

<!-- Site Meter XHTML Strict 1.0 -->
<script type="text/javascript" src="http://s33.sitemeter.com/js/counter.js?site=s33masphecorel">
</script>
<!-- Copyright (c)2009 Site Meter -->
<br />

<script language="JavaScript">
<!--

  // Start hit counter code for BlogPatrol.com
  var data = '&r=' + escape(document.referrer)
    + '&n=' + escape(navigator.userAgent)
    + '&p=' + escape(navigator.userAgent)
    + '&g=' + escape(document.location.href);

  if (navigator.userAgent.substring(0,1)>'3')
    data = data + '&sd=' + screen.colorDepth
    + '&sw=' + escape(screen.width+'x'+screen.height);

  document.write('<a target="_blank" href=" http://www.blogpatrol.com" alt="BlogPatrol free blog counter" title="Free Blog Counters, Stats and Widgets">');
  document.write('<img border=0 hspace=0 '+'vspace=0 src=" http://www.blogpatrol.com/counter.php?i=132410' + data + '">');
  document.write('</a>');
  // End hit counter code for BlogPatrol.com

// -->
</script>
<br />


<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=5564533;
var sc_invisible=0;
var sc_partition=60;
var sc_click_stat=1;
var sc_security="1698520a";
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a title="blogger web statistics" class="statcounter" href="http://www.statcounter.com/blogger/"><img class="statcounter" src="http://c.statcounter.com/5564533/0/1698520a/0/" alt="blogger web statistics" /></a></div></noscript>
<!-- End of StatCounter Code --><br />

<a href="http://www.pagerankwidget.com/pagerank-display.php"><img src="http://www.pagerankwidget.com/pagerank-display.php?a=getCode&amp;s=vgsun" title="Free PageRank Display Code" border="0px" alt="PageRank" /></a><br />

</ul>
</div>

<div id="terkait" class="content-slick">
<ul>
<script style=text/javascript src=http://hermanblog.googlecode.com/files/recent-comments.js ></script><script style=text/javascript >var a_rc=4;var m_rc=false;var n_rc=false;var o_rc=100;</script><script src=http://masphecorel.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script> <style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style>
</ul>
</div>

5. You have a finish.