Sidebar Slide Panel - Mungkin ini sama halnya dengan Accordion, hanya saja ini lebih cocok digunakan untuk template yang menggunakan konsep satu kolom yang memiliki banyak widget sehingga tampilan blog tidak terlalu terlihat tinggi. Tutorial ini hasil modifikasi dari tutorialnya mas Taufik DTE "Widget Slide Panel dengan JQuery dan CSS3" , dan saya coba merubahnya agar bisa diisi dengan widget dua kolom yang hasilnya cocok ditempatkan diarea footer pada blog, jadi persis dengan Footer Toggle yang sudah ada dibeberapa template diluar, seperti templatenya dari MKR-Site yang menggunakan Footer Toggle..
Langkah pemasangan Sidebar Slide Panel
1. Login akun blogger kalian masing-masing
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>

<style>
/* sidebarnya */
#sidebar-slide-main {
  width:100%;
  display:block;
  }
#sidebar1 {
  width:50%;
  float:left;
  padding:5px;
}
#sidebar2 {
  width:50%;
  float:right;
  padding:5px;
}
#sidex1 h2,
#sidex2 h2 {position:relative;margin:0 0 5px}
#sidex1 h2 {
  background-color:#0070b0;
  text-align:center;
  font-size:150%;
  font-weight:bold;
  color:white;
  padding:10px;
}
#sidex2 h2 {
  background-color:#0070b0;
  text-align:center;
  font-size:150%;
  font-weight:bold;
  color:white;
  padding:10px;
}
#sidex2 h2:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:100%;
  left:50%;
  border-width:10px;
  border-style:solid;
  border-color:#0070b0 transparent transparent transparent;
  display:block;
}
#sidex1 h2:after {
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:100%;
  left:50%;
  border-width:10px;
  border-style:solid;
  border-color:#0070b0 transparent transparent transparent;
  display:block;
}
#sidex1 .widget {
  padding:0;
  list-style:none;
}
#sidex1 .widget-content {
  margin:0 auto;
  overflow:auto;
  list-style:none;
}
#sidex1 ul li a:hover {
  color:#AD3000;
  list-style:none;
}
#sidex2 .widget {
  padding:0;
  list-style:none;
}
#sidex2 .widget-content {
  margin:0 auto;
  overflow:auto;
  list-style:none;
}
#sidex2 ul li a:hover {
  color:#AD3000;
  list-style:none;
}

/* slidenya */
#sidebar-slide {display:block}
#sidebar-slide-content {
  background-color:#eee;
  height:auto;
  overflow:auto;
  margin:0;
  padding:0;
  color:#333;
  display:none;
}
.sidebar-slide-button {
  position:relative;
  cursor:pointer;
  text-shadow:1px 1px 2px #000;
  padding:7px 15px;
  background-color:#0070b0;
  color:white;
  text-align:center;
}
.sidebar-slide-button:hover {
  background-color:green;
  color:white;
}
@media only screen and (max-width:490px){
#sidebar1,
#sidebar2 {
width:100%
float:none;
margin:0 auto; 
}
}
</style>

4. Kemudian Letakkan kode HTML berikut ini diarea Footer

<div id='sidebar-slide-main'>
<div id='sidebar-slide'>
  <div id='sidebar-slide-content'>

<div id='sidebar1'>
  <b:section id='sidex1'/>
    </div>
<div id='sidebar2'>
   <b:section id='sidex2'/>
    </div>

  </div>
  <div class='sidebar-slide-button'>
    <span class='intext'>Tampilkan Sidebar</span>
    <span class='intext' style='display:none;'>Tutup Sidebar</span>
  </div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('.sidebar-slide-button').click(function() {
        $('#sidebar-slide-content').slideToggle('slow');
        $('.sidebar-slide-button span.intext').toggle();
    });
});
//]]>
</script>
</div>

Mungkin bagi kalian yang belum begitu paham dengan markup HTML template kalian mencari area footer mungkin agak sulit, mungkin bisa diletakkan diatas kode </footer> atau kalian bisa mencarinya sendiri sampai ketemu kode </div> penutup element yang membungkus halaman posting dan sidebar contoh umumnya adalah kode #outer-wrapper.. jadi saya tidak bisa menentukan dimana kalian harus meletakkan kode HTMLnya karena saya belum tau markup HTML template kalian.. :-s
yang lainya tinggal disesuaikan sendiri...
Jika sudah selesai silahkan Simpan Template..
Selamat Mencoba dan berkreasi.