Sanget keren jika kita pasang menu dengan effect blur di blog sobat! untuk itu tidak memperpanjang pembahasan mari kita mulai
oya!! untuk DEMO bisa lihat disini
untuk tahap pertama login ke blog masuk ke Edit HTML cari code ]]></b:skin>
setelah ketemu masukkan css berikut tepat diatasnya
#blur { position: relative; top: 50px; width: 100%; border: 1px solid #000000; border-style: solid none; } #blur:before { position: absolute; top: 0px; width: 100%; height: 100%; border-top: 1px solid #212121; content: ''; } #blur:after { position: absolute; width: 100%; height: 100%; top: 1px; border-bottom: 1px solid #212121; content: ''; } #blur ul { position: relative; top: 0; width: 960px; margin: 0 auto; list-style-type: none; overflow: hidden; } #blur li { float: left; position: relative; } #blur a { position: relative; float: left; padding: 20px 25px; margin-left: 10px; text-decoration: none; font-family: "trebuchet ms"; font-variant: small-caps; color: transparent; text-shadow: 0 0 2px #cacaca; z-index: 100; } /* normal styles */ #blur a:hover, #blur a:focus { color: #ffffca; text-shadow: 0 0 0 transparent; } /* active styles */ #blur .active a, #blur .active a:hover { color: #cacaca; text-shadow: 0 0 2px #cacaca; }
setelah itu pasang tag Divnya tempat diatas code <body>
<div id="blur"><ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Blog</a> </li> <li class="active"><a href="#">Pet Projects</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Services</a></li> <li> <a href="#">Contact</a> </li> </ul> </div>
dan Simpan lihat hasilnya!!
semoga bermanfaat
BUKU TAMU DISINI
0 comments :
Post a Comment
TINGGALKAN KOMENTAR SOBAT SEBELUM BERANJAK DARI BLOG INI