Cara Pasang Fresh Vertikal Navigation Menu With CSS3

Cara Pasang 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 ]]> 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 Dan Taruh Kode Dibawah Tepat Diatasnya.

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s