Menu Slide Out Dengan CSS

Selamat siang sobat blogger,, postingan kali ini membahas bagimana Cara Memasang Menu Slide Out Dengan CSS, menurut saya Menu ini sangat menarik. di samping unntuk mempercantik blog sobat, menu Slide out ini tidak memberatkan template sobat bloger semua dan menu ini letaknya di atas header atau logo blogger.

Ok langsung aja gan, Berikut cara pemasangan Coding nya

1. Login ke Blogger
2. Pilih Edit HMTL
3. Copy Code di bawah ini di atas Code ]]></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:#555; 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(http://www.web-air.co.uk/layout/images/home_icon_small.png); } ul#navigation li:nth-child(2) a { background-image:url(http://www.thecreativeit.com/image/admin.png); } ul#navigation li:nth-child(3) a { background-image:url(http://elearninglikecrazy.com/wp-content/themes/ctr-themes-1.2/skin/dark/images/icon-facebook.png); } ul#navigation li:nth-child(4) a { background-image:url(http://img.labnol.org/di/feeds6.png); } ul#navigation li:nth-child(5) a { background-image:url(http://www.craigbailey.net/wp-content/uploads/64/link-exchange_64.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;} }

      4.Selanjut nya copy Code di bawah ini di atas code </body>

<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'>Facebook</a></li>
<li><a href='Alamat Url'>Rss Feed</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
</ul>

Ganti tulisan ( Alamat Url ) warna Merah dengan link sobat
Simpan template sobat kemudian Lihat Hasil nya..!!

Gimana tutorial ya`gampangkan kan ?