Membuat Sajian Kafetaria Blogger Efek Flying With Css3

Cara Membuat Menu Bar Blogger Efek Flying With CSS3

Membuat Efek Flying Dengan Css3 Pada Menu Navigation Blogger.

Share lagi animation sajian kafetaria / sajian navigation pada blogger, pada postingan sebelumnya mas tamvan share Menu Bar Blogger Effect Whirling [ menubar 3d dengan pengaruh memutar pada sub menunya ]. Nah kali ini tidak jauh beda dengan sajian kafetaria sebelumnya, namun di sajian kafetaria flying ini hanya menciptakan sajian berdenyut dikala di short pointer dan menciptakan sajian pada sub menunya merjalan / tiba dari arah kanan dengan kecepatan yang berbeda. Menu ini dibentuk dengan CSS.

Jangan lupa mampir ke postingan yang lainnya.

Tutorial Blogger Lainnya :

• Membuat Sidebar Navigation Responsive Di Blog

• Cara Membuat Tombol Button Efek Jiggle Dengan CSS

• Membuat Sidebar Accordion With Jquery di Blog

Untuk tutorial cara pemasangannya sangat mudah, silahkan simak tutornya dibawah.

Membuat Menu Bar Blogger Efek Flying With CSS3

• Login ke Blogger.com

• Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.

• Contoh, Lihat gambar dibawah!!

• Setelah diklik / dibuka HTML/Javascriptnya, Masukan Script Widget Random Post dibawah ini ke dalam HTML/Javascript.

 /*Mulai CSS Mmenu Flying*/  <style type='text/css'> #nav,#nav ul {     list-style: none outside none;     margin: 0;     padding: 0; } #nav {     font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;     font-size: 13px;     height: auto;     list-style: none outside none;     margin: 40px auto;     text-shadow: 0 -1px 3px #202020;     width: 980px;      /* border radius */     -moz-border-radius:4px;     -webkit-border-radius:4px;     border-radius:4px;      /* box shadow */     -moz-box-shadow: 0px 3px 3px #cecece;     -webkit-box-shadow: 0px 3px 3px #cecece;     box-shadow: 0 3px 4px #8b8b8b;      /* gradient */     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);     background-color:#5f5f5f; } #nav ul {     left: -9999px;     position: absolute;     top: -9999px;     z-index: 2; } #nav li {     border-bottom: 1px solid #575757;     border-left: 1px solid #929292;     border-right: 1px solid #5d5d5d;     border-top: 1px solid #797979;     display: block;     float: left;     height: 34px;     position: relative;     width: 105px; } #nav li:first-child {     border-left: 0 none;     margin-left: 5px; } #nav li a {     color: #FFFFFF;     display: block;     line-height: 34px;     outline: medium none;     text-align: center;     text-decoration: none;      /* gradient */     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);     background-color:#5f5f5f; }  /* keyframes #animation1 */ @-webkit-keyframes animation1 {     0% {         -webkit-transform: scale(1);     }     30% {         -webkit-transform: scale(1.3);     }     100% {         -webkit-transform: scale(1);     } } @-moz-keyframes animation1 {     0% {         -moz-transform: scale(1);     }     30% {         -moz-transform: scale(1.3);     }     100% {         -moz-transform: scale(1);     } } #nav li > a:hover {     /* css3 animation */     -moz-animation-name: animation1;     -moz-animation-duration: 0.7s;     -moz-animation-timing-function: linear;     -moz-animation-iteration-count: infinite;     -moz-animation-direction: normal;     -moz-animation-delay: 0;     -moz-animation-play-state: running;     -moz-animation-fill-mode: forwards;      -webkit-animation-name: animation1;     -webkit-animation-duration: 0.7s;     -webkit-animation-timing-function: linear;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: normal;     -webkit-animation-delay: 0;     -webkit-animation-play-state: running;     -webkit-animation-fill-mode: forwards; } #nav li:hover > a {     z-index: 4; } #nav li:hover ul.subs {     left: 0;     top: 34px;     width: 150px; } #nav ul li {     background: none repeat scroll 0 0 #838383;     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);     opacity: 0;     width: 100%;      /*-webkit-transition:all 0.3s ease-in-out;     -moz-transition:all 0.3s ease-in-out;     -o-transition:all 0.3s ease-in-out;     -ms-transition:all 0.3s ease-in-out;     transition:all 0.3s ease-in-out;*/ }  /* keyframes #animation2 */ @-webkit-keyframes animation2 {     0% {         margin-left:185px;     }     100% {         margin-left:0px;         opacity:1;     } } @-moz-keyframes animation2 {     0% {         margin-left:185px;     }     100% {         margin-left:0px;         opacity:1;     } } #nav li:hover ul li {     /* css3 animation */     -moz-animation-name: animation2;     -moz-animation-duration: 0.3s;     -moz-animation-timing-function: linear;     -moz-animation-iteration-count: 1;     -moz-animation-direction: normal;     -moz-animation-delay: 0;     -moz-animation-play-state: running;     -moz-animation-fill-mode: forwards;      -webkit-animation-name: animation2;     -webkit-animation-duration: 0.3s;     -webkit-animation-timing-function: linear;     -webkit-animation-iteration-count: 1;     -webkit-animation-direction: normal;     -webkit-animation-delay: 0;     -webkit-animation-play-state: running;     -webkit-animation-fill-mode: forwards;      /*-webkit-transition:all 0.3s ease-in-out;     -moz-transition:all 0.3s ease-in-out;     -o-transition:all 0.3s ease-in-out;     -ms-transition:all 0.3s ease-in-out;     transition:all 0.3s ease-in-out;*/ } /* animation delays */ #nav li:hover ul li:nth-child(1) {     -moz-animation-delay: 0;     -webkit-animation-delay: 0; } #nav li:hover ul li:nth-child(2) {     -moz-animation-delay: 0.05s;     -webkit-animation-delay: 0.05s; } #nav li:hover ul li:nth-child(3) {     -moz-animation-delay: 0.1s;     -webkit-animation-delay: 0.1s; } #nav li:hover ul li:nth-child(4) {     -moz-animation-delay: 0.15s;     -webkit-animation-delay: 0.15s; } #nav li:hover ul li:nth-child(5) {     -moz-animation-delay: 0.2s;     -webkit-animation-delay: 0.2s; } #nav li:hover ul li:nth-child(6) {     -moz-animation-delay: 0.25s;     -webkit-animation-delay: 0.25s; } #nav li:hover ul li:nth-child(7) {     -moz-animation-delay: 0.3s;     -webkit-animation-delay: 0.3s; } #nav li:hover ul li:nth-child(8) {     -moz-animation-delay: 0.35s;     -webkit-animation-delay: 0.35s; }  </style> /*Akhir CSS Mmenu Flying*/  /*Mulai HTML Mmenu Flying*/  <ul id="nav">     <li><a href="http://mastamvan.blogspot.com/">Home</a></li>     <li><a class="hsubs" href="#">Menu 1</a>         <ul class="subs">             <li><a href="http://mastamvan.blogspot.com/">Blogger</a></li>             <li><a href="http://mastamvan.blogspot.com/">CSS</a></li>             <li><a href="http://mastamvan.blogspot.com/">HTML</a></li>             <li><a href="http://mastamvan.blogspot.com/">Javascript</a></li>             <li><a href="http://mastamvan.blogspot.com/">Tools</a></li>         </ul>     </li>     <li><a class="hsubs" href="#">Menu 2</a>         <ul class="subs">             <li><a href="http://mastamvan.blogspot.com/">Submenu 2-1</a></li>             <li><a href="http://mastamvan.blogspot.com/">Submenu 2-2</a></li>             <li><a href="http://mastamvan.blogspot.com/">Submenu 2-3</a></li>             <li><a href="http://mastamvan.blogspot.com/">Submenu 2-4</a></li>             <li><a href="http://mastamvan.blogspot.com/">Submenu 2-5</a></li>             <li><a href="#">Submenu 2-6</a></li>             <li><a href="http://mastamvan.blogspot.com/">Submenu 2-7</a></li>             <li><a href="http://mastamvan.blogspot.com/">Submenu 2-8</a></li>         </ul>     </li>     <li><a class="hsubs" href="#">Menu 3</a>         <ul class="subs">             <li><a href="#">Submenu 3-1</a></li>             <li><a href="#">Submenu 3-2</a></li>             <li><a href="#">Submenu 3-3</a></li>             <li><a href="#">Submenu 3-4</a></li>             <li><a href="#">Submenu 3-5</a></li>         </ul>     </li>     <li><a href="#">Menu 4</a></li>     <li><a href="#">Menu 5</a></li>     <li><a href="#">Menu 6</a></li>     <li><a href="http://mastamvan.blogspot.com/">Back</a></li> </ul> /*Akhir HTML Mmenu Flying*/ 

KETERANGAN
Silahkan Ganti link http://mastamvan.blogspot.com/ Dengan link yang mau kalian tuju sehabis sajian kafetaria itu di klik.

• Kalau sudah, tinggal di save dan lihat hasilnya.

Cukup sekian artikel wacana cara Membuat Menu Bar Blogger Efek Flying With CSS3 ini, agar bermanfaat.
Seperti biasa bila ada yang tidak dimengerti silahkan bertanya dikolom komentar.

Salam Tamvan :)