Cara Membuat Menu Navigasi Red Slide Out di Blog

Ini Caranya :
1. Login account blogger kamu
2. Masuk rancangan lalu pilih edit HTML
3. Jangan lupa centang expland template
4. Kemudian itu cari kode berikut

]]></b:skin>

5. Setelah ketemu kode ]]></b:skin>, lalu sisipkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>

ul#navigation {
position:fixed; margin:0px;
padding:0px;
top:0px; right:10px;
list-style:none;
z-index:999999;
width:820px;
font:normal 11px Arial,Sans-Serif;
-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:#9E242C;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-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;
text-shadow:0 1px 1px #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;
}
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/AVvXsEj1lUMM86X8-sfoFZ8bFc_FC62iR6A5ieVaWd-acjbeQhWoL8bYtohKLUgrQQvLMWrkVW6ZrG1C52MGvozSJEkJ1fZhH0U5-gp8s4ex3jITp39ziI93rx2KUaEyXXlaLlYLf6b0YJHN_Cc/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ5dSSGJhIAcvKEjVBoQgyZPWTf2iItVqva24Lc1Rlz7jUWSEECss-VKmQnQxm1bTd0oVnfEOj2ta90Z5bv29fMOUxCms8rqo59d-Blb-ME-j8sHZYnetv329g0EnDW9o-rNvjzIJckKw/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QdClwOw1TtNDq-8iJaV9A6YK0Xk01qEEar0BE9vd8CvcTYI8z6KsXdqmfcE_4YIdcoMwH0i0x68BXtSmhL-7PFczpOKzC7a62bjlMWXyJm-XL4n-_DGB2OrJULwbStx0I2eUvdu1fGA/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9rSwRW_zqSQDpr0mokKaDrb08JILnoR3Azcx-Zg0T8A5zm94-7MsX_0aSAwR4LZESl4jp7u4yfUhSIB2-IKetPXiCJJcBGy-ECLBDuOoVRbbWHy3iW08XakE021SXQz4-LqLB346_fdo/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmh5PzKIHbueJVXc9Os1Nk3xdGqfH08eKxR3szks9bdw2L_K4EOPLJnK8_UhUIkrsiGz64sgLxz4hhAopchdp16e7Q-crCC5GlY8SDTnjQVHgbAE6T0TXzB2sYqz4XC_F6Tp1Egb3e1-Y/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnx2IsFwe4NOSLo_OZUC1jl5w3shkfml_xkFaj97x2MO6oRyVtkoCvfDMQp72RM2MQ8Z3G4Ut5L10-prkwdoMX7UxraoAE36tBQ34lvewqqxn4HipPeq52KM1tbiJmLW7g1G2ClBCMik/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;} to {margin-right:0px;}
}

6. Selanjutnya cari kode dibawah ini

</body>

7. Kemudian letakkan kode dibawah ini tepat diatas kode yang kita cari pada langkah 6

<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>About Me</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Rss Feed</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Color Tools</a></li>
</ul>