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/AVvXsEhsfrtW5nuZ8t-vZYhmiKT6nYeKn2bvHlXQZMHFUgfb55RNX4bMDKx8qTSpfH1NRjNUMsPGxYlnVJARKGt-LFFpjEv7rb-lkn3ZDhMOFJ-IBrp3LRUZWtiD-VQq0pcM5JxsMn3eKekLRVo/s1600/home.png);}
ul#navigation li:nth-child(2) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihS8vYvLZKXKvlj9mudhG2-8KRfRc4UHh2u6iHIdeW99EyjYiqIB7LpKNvcWv47jz0mQN0YTJPh2I4vR6qG9_NMr-LE9tbji5mYlPQ-YNEVZ3qk66tf9NKXxhmarP38-5NpHeotCcMbUk/s1600/user.png);}
ul#navigation li:nth-child(3) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYOqg1QP_ru-DcPIJmEuz2a2OXWay3o4TfwP9cU1smwn2931OGdLwxlmXubcfLGEUu9zG5sOugMXCJ4KiK4g5b_3swe7_1V4ZUg_8695daLmhXKVdJ0Cps5NdU0JIM1u5bu5UWLZYSoi8/s1600/mail.png);}
ul#navigation li:nth-child(4) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhiKbNcwPXrtdN5QFLqfjNXeKTDaHzutkpwwh9GHfF1q-9RWWutDLSSQqDSavdaZJF_xuegDeulwAZ4IqwvRa8UgJ-f_8eSqVwOd6mxtXGlZBa9ZlMb4_n49mGUthg580bMjCVn1btB0Y/s1600/rss.png);}
ul#navigation li:nth-child(5) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIzi69qP_Wis8oYsrqUzUxUoudXxWtnzUDLziQLnq4YZqtVVe572Vmuz8lPPpQVKNmHjP_MrpDGOwHcUkwmE555yNS_dZdwq0s5NZCN6aRQArcM5IpX11ryar1AS5kyLpQxjAE2zRZJU/s1600/link.png);}
ul#navigation li:nth-child(6) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4dfFzCFdlOdKwbmW_sw_Am647RrmODhbkSGCf2Ypv_HCfR79XFT7xpBDkFhkTXq1Foa4A_OrsWppuAX7P25Q6al851dFfX59GbfWoiO-SKAHRAkx2bcSGIZjzegXpOgL9AuFwukphvso/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.