Baiklah kali ini admin Rodi95 mau share Cara Membuat Menu Navigasi Horizontal CSS3
Tutorial kali ini saya pastikan akan membuat tampilan blog sobat lebih bergairah, nanti sobat blogger yang nilai sendiri. Silahkn ikuti tutorial singkat berikut untuk membuat menu animasi mendatar dengan CSS3.
1. Login ke akun blogger sobat
2. Klik Tata Letak --> Edit HTML
.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 hijau dengan ukuran template.
4. Klik save dan lanjut ke tahap ke 2.
5. Klik Tata Letak --> Tambah Gadget
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://rodi95.blogspot.com">Home<br /><br /><span>Home</span></a></li>
<li><a class="anima" href="http://rodi95.blogspot.com/feeds/comments/default">Comment<br /><br /><span>Comment</span></a></li>
<li><a class="anima" href="http://rodi95.blogspot.com">Cyber 95<br /><br /><span>Cyber 95</span></a></li>
<li><a class="anima" href="http://facebook.com/Rodiansyah Syah">My Facebook<br /><br /><span>My Facebook</span></a></li>
<li><a class="anima" href="http://twitter.com/@rodiansyah_syah">My Twitter<br /><br /><span>My Twitter</span></a></li>
<li><a class="anima" href="http://rodi95.blogspot.com/feeds/posts/default">Feed Blog<br /><br /><span>Feed Blog</span></a></li>
</ul>
</div>
Silahkan ubah suaikan semua kode yang bercetak tebal ( bold ) sesuai keinginan. Sekian tutorialnya dan semoga membantu anda
Diriwayatkan Oleh : Rodi95 ~ download dan tips trik blog
agan sedang membaca artikel tentang: Cara Membuat Menu Navigasi Horizontal CSS3. Silakan agan copy dan paste atau sebarluaskan artikel ini jika dinilai bermanfaat tetapi ane harap agar Agan jangan sampai lupa untuk menyertakan link aktif artikelnya di bawah ini:
0 komentar:
Posting Komentar