Membuat Fly Out Menu Ala Yaqindlive di Blog

Have a nice dream bagi sobat yaqindlive yang sudah tidur bagi yang belum selamat menjalankan aktivitas deh. hehe. kali ini saya akan share cara memasang atau membuat fly out menu seperti di blog saya. silahkan lihat diatas header dan arahkan mouse anda kesitu. pasti akan tampak menu dari blog ini. Kurang lebih seperti gambar dibawah ini screenshotnya 

klik gambar untuk memperbesar

Bagaimana tertarik untuk memasangnya di blog sobat. langsung saja ke tekape :

 1. Masuk ke akun blogger sobat.
 2. Pada menu klick Rancangan ➨ Edit HTML.
 3. CentangExpand Template Widget ➨ Backup dulu templatenya untuk berjaga-jaga bila terjadi  kesalahan.
4. Cari kode ]]></b:skin> atau </style>: (jika kesulitan mencarinya tekan Ctrl + F kemudian paste kode yang akan anda cari dikotak tersebut)
5. Jika sudah ketemu letakkan kode dibawah ini di atas kode ]]></b:skin>

ul#navigation {
  position:fixed;
  margin:0px;
  padding:0px;
  top:0px;
  right:10px;
  list-style:none;
  z-index:999999;
  width:735px;
  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:#111;
  background-repeat:no-repeat;
  background-position:50% 150px;
  border:2px solid #e6e6e6;
  -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://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
  background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
  background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);
}
ul#navigation li:nth-child(4) a {
  background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);
}
ul#navigation li:nth-child(5) a {
  background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);
}
ul#navigation li:nth-child(6) a {
  background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);
}
ul#navigation li:nth-child(7) a {
  background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.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;}
}

NOTE :
Warna hijau adalah url icon gambar, ganti lah sesuka sobat jika kurang berkenan dengan gambar sobat sendiri (pasang url gambar sobat). hehe.

6. Masih dalam mode edit HTML, sekarang cari kode </body>. jika sudah ketemu pastekan kode dibawah ini tepat dibawah kode </body>.

         
          
         <ul id='navigation'>
         <li><a href='#'>Home</a></li>
         <li><a href='#'>About</a></li>
         <li><a href='#'>Search</a></li>
         <li><a href='#'>Photos</a></li>
         <li><a href='#'>Rss Feed</a></li>
         <li><a href='#'>Podcasts</a></li>
         <li><a href='#'>Contact</a></li>
         </ul>

 NOTE :

• ganti warna merah (#) dengan url link tujuan anda
• warna biru merupakan nama menu yang akan tampil di blog silahkan anda isi dan sesuaikan.

7. save template anda dan lihat hasilnya
Bagaimana mudah bukan. jika ada kendala dalam memasangnya silahkan tinggalkan komentar. Semoga bermanfaat.!!

Sumber : <a href="http://otowebsite.blogspot.com/2012/06/css3-fly-out-menu.html" target="_blank">CSS3 Fly Out Menu</a>

..: Selamat Mencoba :..