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.
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 */5. Taruh kode dibawah ini sebelum atau diatas kode <body> /bisa juga ditaruh "Tambah Gadget" pada bagian sidebar blog anda.
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/AVvXsEieaZoTiVs2cg9wbUw1TV9OzljJ0QbgT8Hytxn_4HwAYS-RK7JKo81NqlX-PC1DQF_Tw1VZkiG4djsCoMQhv8lM5lYSe8EpceIhPUQgB2QGRzR8v8LYKXK2fdqpRiQM6FykpmhYghyphenhyphen9OiQ/s1600/home.png);}
ul#navigation li:nth-child(2) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTohg7JUcY9ryM5_miCcplQsy55rd291sAIplxu-zQESRblC9yJ-xHxDsdXZ0DcMvGydtYbcQK-h2-eL_okZZz0VBhPJHP4eliAe6ImNC2TFAKMus0z2ONBA_PXT2t3iWF2Z3rHuzUfU/s1600/user.png);}
ul#navigation li:nth-child(3) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6IWDt47WsIc309dGCXRAK3uL_hSzkN_z0Rpuy6TLiHtdgYcZTOrBuejUQoVLTyw1Pg3pjrjCu-IA4luck0ilIanYXwp7EwNf94BCYQK3-2Jh0e50RD8QNPW9ql5tw8OO3mIGqfWYwvk0/s1600/mail.png);}
ul#navigation li:nth-child(4) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmKxHpuIj_SjS3LokKfJyosXzf1h0s27IsXejcwjFyM-EW1FjtQEwDUVpj-CznPoOMH_nDm_RyOKubyn8IF4njG_ZTt2lZG0vR_GQ1pWs5hI4DHQn0QxzA5MP1FkO4zZ6r7NP9IuyWNwE/s1600/rss.png);}
ul#navigation li:nth-child(5) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7rbAqy3wVQlfiHj9eTunz1Z2vc6MbZXgXn5cAnT0UGpxxoUEGpIQ1aogIzK_1aWcAL6NsFCgaiH2d_U7cxUDcYia23PPQlq03IPuuwaa1reEUoZm1_wjpfoXWGWueLj4AhYCdixEBdcI/s1600/link.png);}
ul#navigation li:nth-child(6) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNN7bOsQiyjIi17BUXh7XWgJRhc9F24ummbPpc1E8R0ZlPeEytDzbQL8CsYse9ZasNne3AgGz6293B2AQyO_ZvrE0DwGv51L4vCFb7YF_YkTrU5anf8Ai-fnk7TJPXIAsROrYqBYMe4GM/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;}
<ul id='navigation'><li><a href='http://goblogger-go.blogspot.com '>Home</a></li>Ganti url dengan link dari blog anda. Selamat mencoba.
<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>
menunya bagus sob izin copy dulu ya buat koleksi
BalasHapustips bagus nih
BalasHapus