Apa kabar sobat semua kali ini dimalam yang dingin ini Admin akan
membagikan Trik Membuat Menu Bar Keren Dengan CSS3.Berikut
Langkah-langkah Pemasangannya
1.Sobat login ke Akun Blog sobat
2.Sobat Klik Tata Letak
3.Lalu Tambah Gadget dan pilih HTML/JAVASCRIPT
4.Copy kode dibawah ini
5.Tidak usah diberi judul dan tempatkan gadgetnya diatas postingan sob,,,
6.Simpan Template dan lihat hasilnya...
==============================================================
<style type='text/css'>
#boy-ganteng {
position: relative;
width: 100%;
}
#boy-ganteng:after {
content: "";
display: block;
clear: both;
height: 0;
}
#menu {
position: relative;
float: left;
width: 100%;
padding: 0 20px;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
background: #acc;
}
#menu, #menu ul {
list-style: none;
}
#menu > li {
float: left;
position: relative;
border-right: 1px solid rgba(0,0,0,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.25);
perspective: 1000px;
}
#menu > li:first-child {
border-left: 1px solid rgba(255,255,255,.25);
box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}
#menu a {
display: block;
position: relative;
z-index: 10;
padding: 13px 20px 13px 20px;
text-decoration: none;
color: rgba(75,75,75,1);
line-height: 1;
font-weight: 600;
font-size: 12px;
letter-spacing: -.05em;
background: transparent;
text-shadow: 0 1px 1px rgba(255,255,255,.9);
transition: all .25s ease-in-out;
}
#menu > li:hover > a {
background: #333;
color: rgba(0,223,252,1);
text-shadow: none;
}
#menu li ul {
position: absolute;
left: 0;
z-index: 1;
width: 200px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}
#menu li:hover ul {
padding: 15px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0,0,0,.5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
}
@keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}
30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}
65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}
#menu li li a {
padding-left: 15px;
font-weight: 400;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
}
#menu li li a:hover {
color: rgba(0,223,252,1);
border-top: dotted 1px rgba(255,255,255,.15);
border-bottom: dotted 1px rgba(255,255,255,.15);
background: rgba(0,223,252,.02);
}
</style>
<div id="alex-ganteng">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
<li><a href="#">Galery</a>
<ul>
<li><a href="#">Galeri 1</a></li>
<li><a href="#">Galeri 2</a></li>
<li><a href="#">Galeri 3</a></li>
<li><a href="#">Galeri 4</a></li>
<li><a href="#">Galeri 5</a></li>
<li><a href="#">Galeri 6</a></li>
</ul>
</li>
<li><a href="#">Download</a>
<ul>
<li><a href="#">MP3</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Software</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a>
<ul>
<li><a href="#">ON FB</a></li>
<li><a href="#">ON TWITTER</a></li>
<li><a href="#">ON EMAIL</a></li>
</ul>
</li>
<li><a href="#">Support</a></li>
</ul>
</div>
==============================================================
Jika ada yang kurang paham silahkan isi kotak komentar dibawah ini.
Terima Kasih
note : ganti tulisa # dengan link sobat.
ganti tulisan warna biru dengan judul yang sobat mau
Rabu, 26 Februari 2014
Related Post
Cara Membuat Button Dashboard dan Follow Preview: Button ini akan muncul pada sisi kanan blog anda. Caranya, ikuti tutorial di ba
Cara Mudah Download File Torrent Dengan IDMAssalamu'alaikum Wr.Wb Hari ini admin akan memberikan tips Cara mudah Download File Torre
membuat tombol ganti warna backgroun di blogSobat sekarang saya akan memposting bagaimana cara membuat Widget Change Colour Di Blog dan Berikut
Membuat Tombol Fan Page dan Follow Twitter MelayangBeberapa cara dapat dilakukan agar pengunjung blog menyukai atau bergabung pada Fan Page dan Twitte
Shingeki_No_Kyojin_Blogger_Template bagi yang mau download template shingeki no kyojin silah kan. 4shared : http://www
cara Membuat Emoticon Kaskus Di komentar Blog بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم Sobat Blogger sudah pernah lihat kan emot
Langganan:
Posting Komentar ( Atom )
Subscribe : Adi septia
Total Tayangan Halaman
Labels
Buku tamu
<
>
iklan
Blog Archive
-
▼
2014
( 728 )
-
▼
Februari
( 436 )
- CARA BOBOL PASSWORD SPEEDY INSTAN
- Kumpulan aplikasi android
- Cara Membuat Apk(beckup aplikasi)
- Root Android Tanpa PC[FRAMAROOT.APK]
- Ganti Icon Batray Android [update]
- Theme catfiz Bola (UPDATE)
- Animasi Bola
- Pemutar musik android (mini lirik.apk)
- Maen psp Di Android (PPSSPP)
- Kumpulan skins smart keyboard pro (UPDATE)
- Cara membuat skins smartkeyboard pro
- KUMPULAN BBM MOD
- LocoCycle
- The LEGO Movie Videogame
- Animasi Avatar untuk BBM
- Cara Membuat Website Sendiri Gratis 100% Untuk Pemula
- Mozilla Firefox 27.0 Beta 2 Free Download For PC
- Need For Speed Hot Pursuit (NFS Hot Pursuit (2002)...
- Game java Moto GP 2012 mobile games java jar zip
- Game java Luca and Dragon RPG ENGLISH mobile games...
- Download game Yu-Gi-Oh : Dark duel stories (MeBoy ...
- Download game hp worms armageddon java jar
- Download Game hp Zuma Revenge java jar
- Download game Plant vs Zombie java mobile games jar
- Download game hp bola Fifa 2014 (update) java jar
- Free Download Theme Park Tycoon-touch.jar
- Download Subway Surfers 240x400 Touchscreen Jar.jar
- Download GTA 5 Mod 240x320 TouchScreen (high).jar
- Temple Run Oz - lite.jar
- Download Danger Dash - high.jar
- Dragon mania [java]
- Titanium Backup Pro 6.0.0 Apk
- TRIX : Ubah Android Versi Lama ke Jelly Bean Tanpa...
- Kumpulan Game HD Android
- 55 Kata Kata Bijak Mario Teguh Terbaru
- Cara menggunakan aplikasi HJ Split
- Kata-kata mutiara Albert Einstein lengkap
- Cara untuk mempercepat koneksi pada modem smartfren
- Kata-kata mutiara yang ada di anime One Piece
- Kata-kata Itachi Uchiha
- Kata-kata Kakashi
- kata-Kata Bijak Film Naruto
- Download Kumpulan Template Blog Hacker Terbaru
- Skinpack Hacker Terbaik For Windows 7
- Kata Bijak Anime Sword Art Online
- [Movie] 5cm [Bahasa Indonesia] [3gp mp4 mkv] 5 cm ...
- [GAMES] Yu-Gi-Oh! Power of Chaos : Kaiba The Reven...
- [GAMES] Naruto: Path of the Ninja 2 [Game PC with ...
- [GAMES] Naruto: Ninja Destiny [Game PC with NDS Em...
- [Games] Naruto: Path of Ninja [NDS Rom for PC/Laptop]
- [GAMES] Naruto Shippūden: Shinobi Rumble [Game PC ...
- [Tutorial] Memainkan Game GBA dan NDS di PC/Laptop
- [Games] Naruto: Ninja Council 2 [GBA ROM for PC/La...
- [GAMES] Naruto: Ninja Council [GBA ROM for PC/Laptop]
- [GAMES] Naruto: Konoha Senki [ROM GBA for PC/Laptop]
- [GAMES] Kamen Rider – Climax Heroes - Decade [PS2 ...
- [GAMES] Kamen Rider – Seigi no Keifu [PS2 ROM for ...
- [GAMES] Kamen Rider Kabuto [ISO PS2 for PC/Laptop]
- [GAMES] Kamen Rider Blade [ISO PS2 for PC/Laptop]
- [GAMES] Kamen Rider Faiz [ROM PS2 for PC]
- [Tutorial] Peralatan Tempur Untuk Gaming PC
- List Episode Avatar: The Legend of Korra Book 1 & ...
- List Movie and OVA [sub indo] MKV Mp4 3gp] naruto
- [GAMES - PSP] Naruto Ultimate Ninja Impact [Work o...
- tv online
- Free Download Bad Piggies 1.0.0 For PC Full Free
- Free Download 16 Template Blog
- Cara Membuat tombol menyembunyikan dan membuka kom...
- Cara Membuat Buku Tamu Tersembunyi di Blog
- Cara Membuat Agar Blog Kita Tidak Bisa di Block / ...
- Cara Membuat / Mengganti Favicon / Site Icon Blog
- Cara Membuat Button Dashboard dan Follow
- Cara Membuat Emoticon Yahoo di Kotak Komentar
- membuat tombol ganti warna backgroun di blog
- pasang anjing di blog
- cara membuat widget membaca al-qu'an online
- pasang change background di blog
- cara membuat kontak admin dibawah posting
- trick membuat kode warna blog terlengkap
- kode warna
- cara membuat gambar posting berputar
- Membuat Menu Bar Keren Dengan CSS3
- Kumpulan Script Jahil [via notepad]
- Fungsi Rahasia Tombol Shift
- Ciri-Ciri Hacker
- Cara Menambah Kapasitas Memory hp Menjadi 2x Lipat
- Script Jail Bikin Lampu Num-lock, Caps-lock, Scrol...
- perbandingan-Perbandingan Trigonometri Pada Segiti...
- Kumpulan Skin winamp keren, bagus, cool, modern & ...
- Memperbesar dan Memperkecil Huruf menggunakan Tomb...
- Cara Mengubah Teks menjadi Gambar
- Cara Membuat Nomor Halaman
- Menambahkan Bingkai (Page Border) pada Cover Makalah
- Cara mengatur Margin dan Ukuran Kertas pada Ms. Word
- Ukuran Kertas (Lengkap)
- Counta: Menghitung Jumlah Sel yang Telah Terisi Da...
- Countblank: Cara Cepat dan Mudah Menghitung Sel Ko...
- Menampilkan Rules (Penggaris) pada Microsoft Offic...
- Beli Es Dawet
- [Movie] Sword Art Online - Extra Edition (2013) [W...
-
▼
Februari
( 436 )
0 komentar :
Kas kus
Only
:ilovekaskus
:iloveindonesia
:kiss
:maho
:najis
:nosara
:marah
:berduka
:malu:
:ngakak
:repost:
:repost2:
:sup2:
:cendolbig
:batabig
:recsel
:takut
:ngacir2:
:shakehand2:
:bingung
:cekpm
:cd
:hammer
:peluk
:toast
:hoax:
:cystg
:dp
:selamat
:thumbup
:2thumbup
:angel
:matabelo
:mewek:
:request
:babyboy:
:babyboy1:
:babymaho
:babyboy2:
:babygirl
:sorry
:kr:
:travel
:nohope
:kimpoi
:ngacir:
:ultah
:salahkamar
:rate5
:cool
:bola
by Pak to
:mewek2:
:rate-5
:supermaho
:4L4Y
:hoax2:
:nyimak
:hotrit
:sungkem
:cektkp
:hope
:Pertamax
:thxmomod
:laper
:siul
:2malu:
:ngintip
:hny
:cendolnya
by mister darvus
:maintenis:
:maintenis2:
:soccer
:devil
:kr2:
:sunny
Posting Komentar