Home » , » Fresh Vertikal Navigation Menu With CSS3

Fresh Vertikal Navigation Menu With CSS3

Pada Perjumpaan Kali ini Saya Akan Berbagi Tutorial Untuk Blogger Yakni Cara Membuat Fresh Vertikal Navigation Menu With CSS3 Yang Akan Membuat Halaman Blog Sobat Menjadi Indah Dan Terus Terang Saja Untuk Tutorial Kali ini Tidaklah Sulit untuk Dipahami Dan Diterpapkan Pada Blog Sobat Semua.

Nah Sebelum Sobat Melanjutkan Pada Tutorial Pembuatannya Silahkan Sobat Lihat Atau Pertinjau Demonya Yang Bisa Sobat Kunjungi Dengan Cara Klik Gambar Dibawah ini.


Untuk Cara Menambahkan Fresh Vertikal Navigation Menu With CSS3 Sangatlah Mudah Dan Silahkan Sobat Blogger Simak Tutorial Dibawah ini.

  • Pertama Silahkan Sobat Login Ke Akun Blogger.
  • Masuklah Ke Rancangan Lalu Pilih Edit HTML Dan Awas Jangan Lupa Centang Expand Template Widget.
  • Sekarang Sobat Cari Kode ]]></b:skin> Pada Template Blog Sobat Lalu Salin Semua Kode Dibawah Dan Taruh Diatasnya.
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;
/*-o-transition: 0.25s;*/

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('http://2.bp.blogspot.com/-96am-8tFDts/TwskdM_U2sI/AAAAAAAADMA/paVMNwwGiCY/s400/filiex-navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

  • Selanjutnya Cari Kode </body> Dan Taruh Kode Dibawah Tepat Diatasnya.
<div style='position: fixed; top: 40%; left: 0%;'>
<ul id='navigationMenu'>
<li>
<a class='home' href='#'>
<span>Home</span>
</a>
</li>

<li>
<a class='about' href='#'>
<span>About</span>
</a>
</li>

<li>
<a class='services' href='#'>
<span>Services</span>
</a>
</li>

<li>
<a class='portfolio' href='#'>
<span>Portfolio</span>
</a>
</li>

<li>
<a class='contact' href='#'>
<span>Contact</span>
</a>
</li>
</ul>
</div>
Note: Gantilah Kode Warna Merah Dan Biru Sesuai Kehendak Sobat! Kode Merah Adalah Nama Menu Dan Kode Biru Adalah Link Atau URL Menu.

  • Langkah Terakhir Simpan Template Dan Lihat Hasilnya.
  • Selesai.

Cukup sekian dan Semoga bermanfaat.
filiex Artikel Oleh Filiex Boy dari filiex.blogspot.com, yang telah
Diterbitkan di 1:14 AM
Label: ,
Jangan lupa berlangganan via RSS feed untuk artikel terbaru
Share this article :
Unduh Adobe Flash player

Post a Comment