Cara Membuat Menu Navigasi Red Slide Out di Blog

MalvinShare-Pada kesempatan sebelumnya, MalvinShare sudah ngasih tutorial tentang Cara Membuat Kotak Circle Banner di Blogger, yang komponennya murni menggunakan kode CSS. Sama seperti pada postingan sebelumnya tadi, pada postingan kali ini, saya akan ngasih tutorial mengenai Cara Membuat Menu Navigasi Red Slide Out di Blog yang komponennya juga murni menggunakan CSS. Seperti pada namanya yaitu Navigasi Red Slide Out, navigasi ini berwarna merah dan memiliki efek slide out yang melayang. Navigasi ini sangat cocok untuk teman-teman yang ingin blognya tampil elegan dan tentunya profesional. Seperti yang saya tuturkan diatas, teman-teman tidak usah khawatir tentang loadingnya, karena Navigasi Red Slide Out ini menggunakan pure CSS, maka sudah barang tentu loadingnya ringan dan cepat.

Untuk demonya teman-teman bisa melihatnya di page halaman ini tepat di pojok kanan atas atau lihat screenshotnya di bawah ini. Berikut akan saya jelaskan mengenai tutorial cara membuatnya.

Tutorial Membuat Menu Navigasi Red Slide Out di Blog
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/AVvXsEgzZxfwc8YT3eN7g8K1Be3-RotNVLSu1KJgzpcsVdsNO46ouX01FghdIevzJWqGD3axGD5_cmqiJj3as97JLB9Y-t7bgH_FckixGJCsodbswZxVXP_TMR1PCJci5nYELbhd5DCmrofzyTY/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwOliHjSeA7D2IS_rUO10bB9tuddtT4jPq8uzaiu5npgigLCm5vrVCi0RmJFW8ahp8Heiipr2A0rl50cfh9fsjUHTxh7tbi_MkjiRRge9V2VVtI3lp7nVdQqQ1-mElKzFQu9UbcroxnQ/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lpj848EG-k26BEwUy7CHsYqjM5E5Jh5XxT61ryJ6Mb8M1nu6hMmPL6RMBaTjkLroLosfMijjCB5uE7Jp0FIKLJb1iozBKd880rSDiao7CtTUIq5-K7312SjKISGa66icIw_GI0sWFus/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDyWVNV6j2Gf9LCdYpYFJi-MK8pPxXgJj1xjzhj3t64quTrlqjk_ySgo1LrV5DO3a5mIO69PNMeOWSk2RtuC3FlmZ0S3-gEWSUYw5Ezh9Muq5BLKYKxyV2hpeD83uM-KgMaIx1KOMtcpI/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGo9DS7Sb5xT6RgXh6Lkjuo_Bo5QZvKkjbXSuJlgtCC-v2SIUTS-ttfl4mTw8PkeOwdxBF9tXzyflbi5onqcsPBDi1mjyMQxNh_19kjRK-VfxUzgUj-fiikrhgnfRodclgtk46VbmYNoY/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGb2picoWKbzMYttdKN_VDNh5XMQLJgD0ZSRYgpI9nkC3AGsCrJoWJy4MZOffEDHNiB7TJcBARMun6Q7p-vwxZ80LutzNlr1Qzh9qUXeDjB1gzroZg0cYoYcZc_G0FaTDah-r76Oxn3Y/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>

8. Simpan
9. Selesai

Keterangan :
a. ganti tulisan alamat URL dengan alamat URL tujuan
b. Home ganti dengan nama komponen URL tujuan

• Home
• About Me
• Contact
• Rss Feed
• Link Exchange
• Color Tools