Membuat Right/left Menu cantik di Blogger

Demo click disini
Untuk membuat tampilan menu seperti di atas, step-stepnya cukup mudah, hanya memerlukan beberapa langkah copy paste saja.....
untuk lebih jelas silahkan lihat di bawah......
   
Langkah pertama, buka blogger, masuk ke menu perancangan, edit HTML, centang pada expand
template widget.
pastekan kode CSS di bawah ini:

#navigationMenu li{
 list-style:none;
 height:39px;
 padding:2px;
 width:40px;
}

#navigationMenu span{
 /* Container properties */
 width:0;
 left:38px;
 padding:0;
 position:absolute;
 overflow:hidden;

 /* Text properties */
 font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
 font-size:18px;
 font-weight:bold;
 letter-spacing:0.6px;
 white-space:nowrap;
 line-height:39px;
 
 /* CSS3 Transition: */
 -webkit-transition: 0.25s;
 
 /* Future proofing (these do not work yet): */
 -moz-transition: 0.25s;
 transition: 0.25s;
}

#navigationMenu a{
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK49jW49VEBvzUTKh9aiX-Jz7b-w7sb-VxTVWnotps27TOTD5vqhu5aHqoCh-3OuqTrBmz4BUHCQKP6c7L1WWSKoQFX5HpSUel6sfQAxr-2XD9HvGaY2biXBCz4UCVdAEp5g94_AvIzFO5/') no-repeat;
 height:39px;                   /*link gambar bisa di ganti*/
 width:38px;
 display:block;
 position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
 text-decoration:none;
 
 /* CSS outer glow with the box-shadow property */
 -moz-box-shadow:0 0 5px #9ddff5;
 -webkit-box-shadow:0 0 5px #9ddff5;
 box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
 background-color:#7da315;
 color:#3d4f0c;
 text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
 background-color:#1e8bb4;
 color:#223a44;
 text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
 background-color:#c86c1f;
 color:#5a3517;
 text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
 background-color:#d0a525;
 color:#604e18;
 text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
 background-color:#af1e83;
 color:#460f35;
 text-shadow:1px 1px 0 #d244a6;
}

di bagian atas kode ini:

body {

untuk mempermudah menemukan kode ini gunakan CTRL+f  di keyboard
selanjutnya save template.......

kemudian masuk ke edit elemen laman,
pada left/right sidebar, klik add gadget,
pilih HTML/Javascript

setelah itu pastekan kode ini di bagian isi:

<ul id="navigationMenu">
    <li>
     <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>
    
    <li>
     <a class="about" href="#">
            <span>About</span>
        </a>
    </li>
    
    <li>
      <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>
    
    <li>
     <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>
    
    <li>
     <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

note: anda dapat mengganti Tanda pagar "#" sesuai dengan link tujuan anda.
untuk mengganti icon pada menu, anda dapat mendownload gambar nya di: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK49jW49VEBvzUTKh9aiX-Jz7b-w7sb-VxTVWnotps27TOTD5vqhu5aHqoCh-3OuqTrBmz4BUHCQKP6c7L1WWSKoQFX5HpSUel6sfQAxr-2XD9HvGaY2biXBCz4UCVdAEp5g94_AvIzFO5/
setelah di modif, upload kembali dan ganti link gambar di kode css tadi dengan link gambar yang baru.
silahkan mencoba......