Greetings to all bloggers.
Kali ini saya mau update postingan di blog O.W alias Oto Website dan kali ini judul atau temanya adalah CSS3 Fly Out Menu.
Bagi sobat yang suka dengan menu melayang dengan tampilan slide pasti suka dengan CSS3 Fly Out Menu ini.
Kali ini saya tidak bisa bicara banyak-banyak kalo temanya tentang menu navigasi,hehehe . . . Kalo sobat Oto Website masih belum paham dengan postingan atau articles yang saya bahas kali ini ,sobat bisa lansung aja melihat demonya sendiri.

Oke sudah pahamkan? sekarang mari kita bahas Cara memasang CSS3 Fly Out Menu di blogger sobat.

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. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> atau </style>: Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Jika sudah ketemu sekarang sobat copy kode Css berikut dan paste atau letakkan di atas kode tadi.

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;}
}

NB;
Warna hijau adalah url icon gambar, jika kurang suka silahkan sobat ganti, ok!

5. Masih di dalam Edit Template, sekarang sobat cari kode </body> 

6. Jika sudah ketemu sekarang sobat copy kode berikut dan paste ata letakkan di bawah kode tadi..

<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>

NB;
  • Ganti warna merah(#) dengan link atu url tujuan.
  • Warna biru adalah menu, silahkan sobat ganti dengan menu yang sobat inginkan.
7. Simpan template.

Sekarang sobat lihat sendiri hasilnya!

Saya rasa cukup untuk kali ini, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top