Home » , » Membuat Menu Chunky CSS3

Membuat Menu Chunky CSS3

Menu adalah bagian dari yang terpenting bagi pembuatan web atau blog. tanpa menu jangan harap web atau blog anda disegani oleh pengunjung. Maka dari itu kami akan memberikan suatu cara atau trik Membuat Menu Chunky CSS3 dengan menu tersebut web atau blog anda sedikit banyak terbantu. Akan tetapi sebelum anda melakukan trik tersebut, alangkah baiknya anda lihat dulu demo, agar tau bentuk dan model menunya seperti apa.




Setelah anda melihat demonya, kalau anda tertarik dengan Menu Chunky CSS3 saya akan memberikan triknya berikut ini :

Langkah 1

Silahkan Copy Code Css Di bawah ini dan Letakan Di atas Code ]]></b:skin>



#top_navigation {
background : transparent;
width: 800px;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
width : 100%;
}
ul.nav {
background : transparent;
width: 800px;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
background : transparent;
height : 30px;
font-size : 16px;
color : #808080;
float : left;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}


Langkah 2
Simpanlah Templates anda yang baru saja ditambahkan CSS3

Langkah 3
Copy Code HTML Di bawah ini dan Letakan Di Add Gadget ->> HTML/Javascript


<div id="top_navigation">
<ul class="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Your Blog </a></li>
<li><a href="#"> About You </a></li>
<li><a href="#"> More stuff </a></li>
<li><a href="#"> Contact </a></li></ul></div>



Langkah 4
Sampai disini dulu trik kali ini selamat mencoba
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 1 komentar

5 Juni 2012 04.44

bermanfaat... diam2 sudah langsung dicoba...trims nih Bung Malunk.. salam

Terimakasih BangRe Kemal atas Komentarnya di Membuat Menu Chunky CSS3

Poskan Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger