Pages

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhrZmGCkxKPSNgfvq0ifk9CU-uW2B8uxCvFLm5wMh_nO5xcsSgrVucxUuzgUa4MwtaYk1z6v-Vj6Su1tOs7LPFZ7DzWyd76oMUgJVqI5YNGYNMpukMgg9YzzJD9RgOdUmL9tJs-MueD2Rf/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.

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment