Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Super Animated CSS3 Navigation Menu

Membuat navigasi menu horizontal ini amatlah mudah dan cepat. Yah ... ini semua karena hanya kode CSS yang digunakan. Kode tak seberapa banyak tapi coba sampeyan lihat bentuk hasil akhirnya. Wuh ... nggak ngira, dah, klo navigasi menu ini tanpa jQuery, motool atau javascript yang lain. Animasinya, mbul ... Sangar, kata orang. Gimana? Mo lihat tampilannya? Ho ... ho ... Jangan lewatkan pokoknya. Nih, buka link demonya dan cermati sensasionalnya si menu.

D E M O

Kode CSS Super Animated CSS3 Navigation Menu

Kode CSS :
.GRsuperAnima{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden; 
        margin:0; 
        float:left;
        padding:0;
        background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{ 
        width:599px;
        margin:10px 0 20px; 
        padding:0; 
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#superAnima li{
        margin:0; 
        padding:0; 
        overflow:hidden; 
        float:left; 
        height:40px; 
}
ul#superAnima li a.anima{
        padding:10px 10px;
        font:10px Arial; 
        float:left; 
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px; 
        background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x; 
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out; 
        -ms-transition:all 1.2s ease-in-out; 
        font-weight:bold; 
        border:1px solid #999;
}   
ul#superAnima li a.anima:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px); 
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}  
ul#superAnima li a.anima span{
        padding:10px 9px; 
        color:transparent; 
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out; 
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out; 
        -ms-transition:all 1.6s ease-out; 
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -o-transform:scale(8.0) rotate(0deg) translate(0,-10px); 
        -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}  
ul#superAnima li a.anima span:hover{ 
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px; 
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -o-transform:scale(1.0) rotate(0deg) translate(0,0);
        -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0; 
        border:2px solid #000;
        background:#555; 
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px; 
}
ul#superAnima li{
        border:1px solid transparent;
        background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}   
ul#superAnima li:hover{ 
        background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif); 
        border:1px solid #777;
}

]]></b:skin>

xHTML Super Animated CSS3 Navigation Menu

<div class="GRsuperAnima">
<ul id="superAnima">
<li><a class="anima" href="http://gubhugreyot.blogspot.com">Tutorial BloGGeR<br /><br /><span>Tutorial BloGGeR</span></a></li>
<li><a class="anima" href="http://gubhugreyot.blogdetik.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://tantytm.blogspot.com">jQuery<br /><br /><span>jQuery</span></a></li>
<li><a class="anima" href="http://bloggerstuars.blogspot.com">CSS3<br /><br /><span>CSS3</span></a></li>
<li><a class="anima" href="http://gubhugreyot.blogspot.com">Adobe<br /><br /><span>Adobe</span></a></li>
<li><a class="anima" href="http://gubhugreyot.blogspot.com">Image Gallery<br /><br /><span>Image Gallery</span></a></li>
</ul>
</div>

Cara Membuat Super Animated CSS3 Navigation Menu

  1. Login to BloGGeR dengan cara menuliskan User Name (Nama Pengguna) atau Email Address, kemudian tuliskan juga Password baru lanjutkan KLIK "Login".
  2. Setelah login maka di hadapan sampeyan akan terlihat halaman Dasboard. KLIK link "Design (Rancangan).
  3. Ketika terlihat Page Element (Elemen Laman), KLIK "Edit HTML".
  4. Di sinilah kode CSS akan di simpan. Cari kode ]]></b:skin>. Supaya mudah mencarinya, gunakan Ctrl+F. KLIK secara bersamaan, baru lakukan pencarian kode.
  5. Letakkan seluruh kode CSS tepat di atas kode ]]></b:skin> seperti yang terlihat pada kode CSS di atas.
  6. KLIK SAVE Template (Simpan Template).
  7. Simpan xHTMl melalui penambahan widget. Sampeyan ikuti seperti langkah di atas (login), hanya setelah masuk di Page Element (Elemen Laman), KLIK Add Gadget (Tambah Gadget) yang di bagian header atau di bawah header, baru kemudian KLIK "HTML/Javascript". Copy x-HTML dan pastekan di box penambahan widget.
  8. KLIK SAVE/Simpan. Setelah proses penyimpanan selesai, bukalah blog untuk melihat hasilnya.
  9. Sesuaikan width dengan jumlah menu dan lebar ruang yang ada dengan mengatur width pada syntax ul#superAnima {width: 590px;}
  10. Posisi navigasi menu dapat diatur melalui perubahan nilai margin di syntax .GRsuperAnima {margin: 15px 0 0 10px;}
  11. Secara berurutan dari 15px 0 0 dan 10px digunakan untuk mengatur jarak dari sebelah atas, kanan, bawah dan kiri. Margin juga bisa bernilai negatif.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «

4 komentar:

  1. TQ ilmunya.......... dah dipraktekkan dblog aq

    BalasHapus
  2. gmana cara buat nya berurutan horizontal,,
    ne dia koq sebagiannya k bawah

    BalasHapus
  3. dah bisa bg..
    ternyata mesti di setting lebar ul nya

    BalasHapus
  4. kok horizontal ini menu ini tdk bisa bekerja dgn baik d blog sy ya?
    tolong solusinya...

    BalasHapus

 
GR | Edited by | gubhug reyot