Membuat Menu Floating Slide Out Vertical Blog

tutorial ini aslinya harus memasukkan script ke html kemudian menmbah widget tp kemudian saya edit sendiri biar hanya dijadikan widget saja, agar lebih mudah diedit kalo terjadi kesalahan dan tdk beresiko, ne caranya

1.Log in ke Blogger.
2.pilih tambah  gadget HTML/JavaScript
3.copy paste code script di bawah ini

<style type="text/css">
ul#navigation { position:fixed; margin:0px; padding:0px; top:-20px; left:130px; list-style:none; z-index:999999; width:12705px; font:normal 16px Electrolize,Sans-Serif bold; -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:95px; display:inline; float:left; margin:0 0 0 2px; } ul#navigation li a { display:block; float:left; margin-top:-74px; width:95px; height:28px; background-color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, 0.6); background-repeat:no-repeat; background-position:50% 150px; border:2px solid #b9b9b9; -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:#333333; text-decoration:none; text-align:center;color:#f1f1f1; text-shadow:0 1px 1px #000; padding-top:95px; -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% 25px; color:#7b7b7b; position:relative; } ul#navigation li a:hover:after { content:""; width:0px; height:0px; position:absolute; top:100%; left:45%; margin-top:2px; border-width:5px; border-style:solid; border-color:transparent transparent lime transparent; }

ul#navigation li:nth-child(1) a {background-image:url(Url Gambar Menu ke 1); }

ul#navigation li:nth-child(2) a { background-image:url(Url Gambar Menu ke 2); }

ul#navigation li:nth-child(3) a { background-image:url(Url Gambar Menu ke 3); }

ul#navigation li:nth-child(4) a { background-image:url(Url Gambar Menu ke 4); }

ul#navigation li:nth-child(5) a { background-image:url(Url Gambar Menu ke 5); }

ul#navigation li:nth-child(6) a { background-image:url(Url Gambar Menu ke 6); }

ul#navigation li:nth-child(7) a { background-image:url(Url Gambar Menu ke 7); }

ul#navigation li:nth-child(8) a { background-image:url(Url Gambar Menu ke 8); }

@-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;}
</style>

 <ul id="navigation">

<li class="nav1"><a href="url">Menu</a></li>

<li class="nav2"><a href="url">Menu</a></li>

<li class="nav3"><a href="url">Menu</a></li>

<li class="nav4"><a href="url">Menu</a></li>

<li class="nav5"><a href="url">Menu</a></li>

<li class="nav6"><a href="url">Menu</a></li>

<li class="nav7"><a href="url">Menu</a></li>

<li class="nav8"><a href="url">Menu</a></li></ul>

silahkan kamu edit sendiri script di atas sesuai selera , mainkan kreatifitasmu, semoga berhasil.:)

Membuat Menu Floating Slide Out Vertical Blog

Posted by: Risalahati Dedic Ahmad Updated at: 00:31