Trick Untuk Blogger

Terkadang beberapa widget menyita banyak tempat di blog kita, hal ini juga berpengaruh terhadap loading blog. Kali ini ane ingin share tentang membuat widget menu tersembunyi. Mungkin saja widget ini bisa memuat beberapa kategori untuk menampung widget lainnya....ok Langsung saja gan....nih langkahnya

Sama seperti biasa Log in ke blog ente sampai ke Edit HTML, lalu masukkan kode berikut di atas ]]></b:skin>

#sidemnu {
background: transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/CircleBlueKilatH77V82.png) right top no-repeat;
padding: 0;
position: absolute;
left: 0;
width: 480px;
margin-left: -400px;
margin-top: 150px;
-o-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
opacity: 0.4;
}
#sidemnu:hover {
opacity: 1.0;
-o-transform: translate(400px);
-moz-transform: translate(400px);
-webkit-transform: translate(400px);
}
.GRmouseover {
font: 19px Arial Narrrow;
font-weight: bold;
float: right;
margin: 30px 10px 0 0;
color: #FF0000;
text-shadow: 0.01em 0.01em 0.2em #fff;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.GRmouseover:hover {
-o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);
color: #0000FF;
text-shadow: 1px 1px 2px #000;
background: #d3020c; padding: 0 8px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 1px solid #777;
}
#sidemnu .boxdalam {
padding:10px 5px;
border: 1px solid #333;
background: #bbdce9;
width: 380px;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
}
#sidemnu .boxdalam2 {
width: 355px;
color: #000066;
font: 12px Arial;
padding: 20px 10px;
}
#sidemnu .boxdalam ul, #sidemnu .boxdalam li{list-style: none;margin: 0;padding: 0;}
#sidemnu .boxdalam h3 {
font: 18px Droid Serif;
font-weight: bold;
color: #914c03;
text-shadow: 0 1px 1px #fff;
border-bottom: 1px dotted #555;
border-top: 1px dotted #555;
background: #a0cbdc;
text-align: center;
}
#sidemnu .boxdalam li {
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/RedArrowH12V10.png) top left no-repeat;
background-position: 0px 3px;
border-bottom: 1px dotted #666;
}
#sidemnu .boxdalam li:hover {
background: none;
}
#sidemnu .boxdalam li a{
padding-left: 20px;
font: 12px Arial Narrow;
color: #000;
text-shadow: 0px 1px 1px #fff;
text-decoration: none;
}
#sidemnu .boxdalam li a:hover{
color: #eee;
background: #222;
padding: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 0px 1px red;
line-height: 20px;
margin:0 10px;
}
#sidemnu .boxdalam img {
padding: 2px;
border: 6px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transition: all 3s ease;
-moz-transition: all 3s ease;
-webkit-transition: all 3s ease;
opacity: 0.5;
}
#sidemnu .boxdalam img:hover {
opacity: 1.0;
}

Masukkan Kode berikut di bawah ]]></b:skin>

<!--[if IE]>
<style type="text/css">
#sidemnu{filter: alpha(opacity=50);}
#sidemnu:hover {filter: alpha(opacity=100);margin-left:0px;}
</style>
<![endif]-->

Simpan Template dan Langkah Selanjutnya
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya

<div id="sidemnu">
<div class="GRmouseover">MENU</div>
<div class="boxdalam">
<div class="boxdalam2" style="height:370px;overflow-y:auto;">

<h3>Tutorial Blogger</h3>

<ul>
<li><a href="Link-1" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-2" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-3" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-4" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-5" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-6" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-7" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
</ul>

<h3>Tips - Trik Blogger</h3>

<ul>
<li><a href="Link-8" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-1" title="">Tuliskan Link Title di sini! </a></li>
<li><a href="Link-9" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-10" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-11" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-12" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-13" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
<li><a href="Link-14" title="">Tuliskan Link Title di sini! Tuliskan Link Title di sini!</a></li>
</ul>

<h3>Awas Bisa Merusak Mata...Terutama Mata Pencaharian</h3>

<img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/3c6eae935ee89291d7aab06.jpg" style="margin:15px auto; width:300px;" />

<h3>sebuah percobaan yang harus di coba-coba</h3>

sebuah percobaan yang di coba-coba itu merupakan cobaan yang perlu dicoba, karena dengan mencoba anda akan tahu apa arti dari percobaan yang sedang anda coba dan akan mengetahui hasil dari percobaan itu akan membuahkan sebuah percobaan berikutnya untuk menjawab percobaan sebelumnya. jadi silahkan mencoba percobaan yang perlu anda coba walau itu hanya coba-coba. selamat mencoba.

</div>
</div>
</div>

Terima kasih kepada : gubhug reyot atas scriptnya