Menu "Slide out effect"

Berikut langkah - langkah pembuatannya.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin> , Jika Sudah Ketemu, letakkan Kode CSS berikut tepat diatasnya.

/* NavMenu */
ul#navigation {position:fixed; margin:0px;padding:0px;top:0px; right:10px;list-style:none;z-index:999999;width:820px;opacity:0.9;font:normal 12px Century Gothic;-webkit-animation:2s fxhompinav ease-in-out;-moz-animation:2s fxhompinav ease-in-out;-ms-animation:2s fxhompinav ease-in-out;animation:2s fxhompinav ease-in-out;}
ul#navigation li {width:103px;display:inline;float:left;margin:0 0 0 2px;}
ul#navigation li a {display:block; float:left;margin-top:-78px;width:100px;height:22px;background-color:#303030;background-repeat:no-repeat;background-position:50% 150px;border:3px solid #CC0000;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);-moz-border-radius:0px 0px 10px 10px;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;-khtml-border-bottom-right-radius:10px;-khtml-border-bottom-left-radius:10px;border-radius:0px 0px 10px 10px;color:#ccc;text-decoration:none;text-align:center;font-weight:bold;text-shadow:2px 2px 4px #000, 0px -1px 3px #000, 2px 2px 2px #000;padding-top:85px;-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;}
ul#navigation li a:hover {margin-top:-3px;background-position:50% 10px;color:#fff; position:relative;background-color:#CC0000;border:3px solid #303030;}
ul#navigation li a:hover:after {content:""; width:0px;height:0px;position:absolute; top:100%;left:45%;margin-top:-10px;border-width:5px;border-style:solid;border-color:transparent transparent #e6e6e6 transparent;}
ul#navigation li:nth-child(1) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3oY1sMWt8AdjzBZdXCkkajuYzXfqDQELZKUhZTzfEhPNYSLlBlvlfoWFgGWHZ7D8lLYLjIH6bvuojRs1IHUc_OClfwkJVn5_EUP0AhiEW1DEqXn78Ebv7BMclUNBoqnSspJHKtO9XLI/s1600/home.png);}
ul#navigation li:nth-child(2) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeRUXxwP6tbvavHBKY6NdukHzx76Nqs58is71z2oivX75yngwGZXKJYK9pf7lCh4ZqNQGdcEGminFzhdsCOy-j9eRbCBePD3SFDOvr7hHpf8MFXTF40_zxzpKnyWP3r10fHO5W8TzG4g/s1600/user.png);}
ul#navigation li:nth-child(3) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpjrRbQoWm5SW96pIw6Sr19w171k3Xenvrc8ivajFcLtAXEOOtIv_1LMMpLuvUFYndJ3_HLMmsOQcHcib_Pn5KqFfsmP7RdzJamgWhLe6WeTz-uxy1D5o8S-V1y5ZgIUGGjx9RNrnhPg/s1600/mail.png);}
ul#navigation li:nth-child(4) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPv62nYBn2ter_5ig9JQdsTomUlQcHxJ6m0fPvysaMsh9qfziYi_rHaO4vRei9F-cPZHmPxiF5ssRetoZJR3OipUr53Vca_o-x-eVdcJtbtxGI47ZWBNijEby5ZdsfBWZDBZO5FUCjNDY/s1600/rss.png);}
ul#navigation li:nth-child(5) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYcvYFPKSB3x8Pu5BFDzDiJ7NSNiLbRr3R6ez9VvbW4VayJdpDCwPMcqarrt-kdlY7bNMbOgqFKXKl9zVLfIOjhYIeVCIuUI-XrueQ7rAUp0GeNUEt2IUJY8NvF0UCTcdq09zxDYMZ-Fs/s1600/link.png);}
ul#navigation li:nth-child(6) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEBITACPW8ZBFZlb7kVFsaesyfDX1_6OsezN_Lb7T-3eo36a_Xhx7o7chhvw_zR4L3jrvQWJUl8XZwX__E3QU7e6bQockxqFiaaMbFD8G7pXIl4uj1n0J4JCKBFCNvCbVVRAZ30loZnI/s1600/color.png);}
@-webkit-keyframes fxhompinav {from{margin-right:-1000px;} to {margin-right:0px;}}@-moz-keyframes fxhompinav {from{margin-right:-1000px;} to {margin-right:0px;}}@-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}}@keyframes fxhompinav { from{margin-right:-1000px;}

5. Taruh kode dibawah ini sebelum atau diatas kode <body> /bisa juga ditaruh "Tambah Gadget" pada bagian sidebar blog anda.

<ul id='navigation'><li><a href='http://goblogger-go.blogspot.com '>Home</a></li> 
<li><a href='#URL'>About Me</a></li> 
<li><a href='#URL'>Contact</a></li> 
<li><a href='#URL'>Rss Feed</a></li> 
<li><a href='#URL'>Link Exchange</a></li> 
<li><a href='#URL'>Color Tools</a></li> 
</ul>

Ganti url dengan link dari blog anda. Selamat mencoba.