Cara Membuat Menu Navigasi Horisontal CSS3

Cara Membuat Menu Navigasi Horisontal Animasi CSS3 - Tutorial kali ini saya pastikan akan membuat tampilan blog sobat lebih bergairah, setelah beberapa waktu yang lalu menerbitkan artikel tentang membuat menu horisontal animasi menyamping ( KWICKS ) kali ini kembali saya akan memposting artikel serupa namun berbeda. Bedanya dimana?? nanti sobat blogger yang nilai sendiri. Silahkn ikuti tutorial singkat berikut untuk membuat menu animasi mendatar dengan CSS3.

DEMO

1. Login ke akun blogger sobat
2. Klik Rancangan --> Edit HTML
3. Letakkan kode berikut di atas kode ]]></b:skin>
.Hansuperanima{
        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;
}
Catatan:
Sesuaikan kode angka yang berwarna biru dengan ukuran template.

4. Klik save dan lanjut ke tahap ke 2.
5. Klik Rancangan --> Elemen laman
6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript..


7. Masukkan kode berikut kedalam kotak HTML/Javascript.
<div class="Hansuperanima">
<ul id="superAnima">
<li><a class="anima" href="http://christiantatelu.blogspot.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://christiantatelu.blogspot.com/feeds/comments/default">Comment<br /><br /><span>Comment</span></a></li>
<li><a class="anima" href="http://christiantatelu.blogspot.com">Christian Tatelu<br /><br /><span>Christian Tatelu</span></a></li>
<li><a class="anima" href="http://facebook.com/csnice">My Facebook<br /><br /><span>My Facebook</span></a></li>
<li><a class="anima" href="http://twitter.com/deactivatednumi">My Twitter<br /><br /><span>My Twitter</span></a></li>
<li><a class="anima" href="http://christiantatelu.blogspot.com/feeds/posts/default">Feed Blog<br /><br /><span>Feed Blog</span></a></li>
</ul>
</div>

Silahkan ubahsuaikan semua kode yang bercetak tebal ( bold ) sesuai keinginan. Sekian tutorialnya dan semoga membantu..
Previous
Next Post »

33 comments

Write comments
Bro Rudhi
AUTHOR
02:01:00 delete

Manteb tutorialnya sob,teruskan sampai menjadi blog inspirasi,jangan lupa kunjungi blog baru ini

Reply
avatar
23:48:00 delete

mantaab sekali kawan tutorialnya

Reply
avatar
Anonymous
AUTHOR
03:28:00 delete

infone bagus gan :
http://sarahnetslawi.blogspot.com
http://umidansarah.blogspot.com/

Reply
avatar
pande suteja
AUTHOR
04:27:00 delete

mas tatelu tolong buatin multi css3 menu yg warna hitem tampilannya hitem.....yg keren...thnkz

http://pondokmerana.blogspot.com

Reply
avatar
yupa bagus
AUTHOR
10:47:00 delete

cara ngisi di dalam menu home nya gimana?

Reply
avatar
18:30:00 delete This comment has been removed by the author.
avatar
18:30:00 delete

@yupa bagusganti saja dengan url blog sobat...

Reply
avatar
08:45:00 delete

wahh...gak rugi nih datang berkunjung disini, infonya sangat keren dan berharga sekali
makasih ya sob...

Reply
avatar
aLLdy Cyberr
AUTHOR
00:10:00 delete

bang gimna ya caranya Membuat Menu Navigasi Horisontal CSS3 tpi isinya bnay contohnya tutorial blog, waktu di klik tutorial blog entu isinya bnyak ..
gimna tuh caranya ??

Reply
avatar
19:44:00 delete

makasih gan, tutornya. udah ane terapin ke blog ane..

Reply
avatar
fatwa cheater
AUTHOR
06:42:00 delete

sangat bermanfaat..!!
buat admin-nya sukses terus ya...??
dan jangan pelit bagi ilmu ..
saya tunggu kunjungan-nya di
fatwa-hacker.blogspot.com

Reply
avatar
endy
AUTHOR
20:07:00 delete

VERY-VERY Mantap gan lanjutkan...

Reply
avatar
Tips Sehat
AUTHOR
11:27:00 delete

yoi bro good info tq

Reply
avatar
11:28:00 delete

tambah lagi gan

Reply
avatar
alex firdaus
AUTHOR
11:59:00 delete

you are the man bro...
very usefull

Reply
avatar
lenisaraswati
AUTHOR
01:38:00 delete

terimakasih kk, infonya

Reply
avatar
CpuHang
AUTHOR
07:14:00 delete

wah ini dia yang aku cari cari wkowkowkowkow nemu juga

Reply
avatar
Cpu Hang
AUTHOR
08:10:00 delete

wah ternyata ga bisa hikz hikz ga cocok jg ini menu

Reply
avatar
22:39:00 delete

makasih atas ilmunya dan salam kenal aza mas

Reply
avatar
20:00:00 delete

langsung ane pasang gan

Reply
avatar
07:59:00 delete

ijin bookmark gan. Kemarin ad temen nanya cara membuat menu spt ini. Terima kasih .. :)

Reply
avatar
Risalahati
AUTHOR
01:46:00 delete

bagus menu navigasinya,udah tak liat demonya.patut diterapkan

Reply
avatar
18:34:00 delete

makasih banget bang infonya

Reply
avatar
gilang rizky
AUTHOR
06:16:00 delete

gan template ane udh ada homenya tuh, klo di tambah home lagi berarti ada 2 ya??

Reply
avatar
garry dus
AUTHOR
22:17:00 delete

kalau mau ganti lamat FB kita caranya gimana gan ?

Reply
avatar
Lintas Line
AUTHOR
07:32:00 delete

isin nyimak sob, btw kalo di pasang di template saya error gak ya? soalnya banyak script yang ditolak, thanks tutorial nya

Reply
avatar
11:29:00 delete

Dari demo nya kelihatannya bagus nih kalau dipasang di blog! Saya coba bro. :)

Reply
avatar
Anonymous
AUTHOR
00:22:00 delete

Ilmuuuuuuu :D

Reply
avatar
18:51:00 delete

thakz gan,, tk coba dulu deh.

Reply
avatar
MixDevoleper
AUTHOR
05:05:00 delete

fllow My blog please :) .. Sy Bloger bru gan http://mixnewdevoleper.blogspot.com/

Reply
avatar