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/AVvXsEgrrLfJuKzAWFLPoeKVaDqti4Hl3RgM6jvGCuM_GwEFN9KUZava0BDcuSFnMx-TKfGRIZG1VuUj-9oRLz3uN43MJGiz3kRq3dLasERLRxEwBx4FlwgmMGCV3aZqk9Vl_RAMK0YEP91Gh4A/s1600/home.png);}
ul#navigation li:nth-child(2) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrP_JhzbmKShpwNFJCAu2cit9vVK7qv9BsMfXqXoNHQu-UwonCtJsH1YryZa9vAbbwDn90ZCTdHULoxKLv9Sw7Mo1bkePSlad22uBt_of8LaV21jxGOEtevDlkZnw7rHkNlMPk8hWhqo/s1600/user.png);}
ul#navigation li:nth-child(3) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAwtdSEBToL5QdRffNSL6z4yAY48jOnZaCXB3jNQTNLpbKF7CluMuD9a7UzKjz97Q2yyKVWkI-MGsuWfs-jStbQDNhWqlmL4P3FLB-ptpQRHjH4X5X-RWJEtMW0OT8amd-jzmf4GBnzkY/s1600/mail.png);}
ul#navigation li:nth-child(4) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCgMPW6GmXBaDS-f6dkiXyrhmYbCjZK4g5_VBzxqAYBoIGL-lsO6mBfTO_W75xML9As1KsnmMfh4t8NHIAhzDiogwnQewLn89uevNbsnILc7IRvkOvo30gDgqNoBDL4fB-mZjuT4DAC0Y/s1600/rss.png);}
ul#navigation li:nth-child(5) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiemMHISTPGddfefqC78dwWJlAUCyKk-S5AM5n4CW1PvwLXswjQsJLYJc6TwX-8IDCf1MbqLD7wevksn2v6d4C3yV6ofqHAxmskWqSmFGXBCMN4TVRd_4TNN2H1_xAmVCfhS4YMz9mosAw/s1600/link.png);}
ul#navigation li:nth-child(6) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ97izGyLLMnXgEseCLZipRBQ28xMb6SkId0fvK_ZdoOSXSvQpgSdDSftJUf5Vz-9KPssnqsZH_k_3jBi39vSmBT5IfBYsNGXXbYxCMEg6WF_Z_xZ7eGCfTSJd3Z_8l72WuMS4kHquAK0/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.