Malam-malam susah tidur bingung mau ngapain , daripada bengong bagus posting dulu , yah itung-itung pelepas resah di saat malam ini
Mau buat navigasi header warna warni seperti dua rupa simak di bawah berikut caranya , soalnya saya colong menyolong kode lewat data terstruktur ini dia
Cara membuat menu navigasi kaya Dua rupa.blogspot.com
1. Bagian html
Silahkan masukan kode html menu navigasi duarupa.blogspot.com kodenya di bawah berikut
atau suka hati
2. Bagian Css
Silahkan masukan juga Cssnya di bawah berikut, tempatkan kode di bagian skin atau style /<![CDATA[ kode disini ]]>
3. Bagian Css responsif
Setelah memasukan kode di atas silahkan masukan kode berikut diatas kode
@media screen and (max-width:768px){
#menu{position:relative;padding-bottom:3px;}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:100%;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}}
Mau buat navigasi header warna warni seperti dua rupa simak di bawah berikut caranya , soalnya saya colong menyolong kode lewat data terstruktur ini dia
Cara membuat menu navigasi kaya Dua rupa.blogspot.com
1. Bagian html
Silahkan masukan kode html menu navigasi duarupa.blogspot.com kodenya di bawah berikut
<nav id='menu'><input type='checkpbox'/><label>≡</label><ul class='menu'>Penempatan kode html di atas anda bisa menempatkannya di akhir kode
<li><a href='https://draft.blogger.com/" title='/'>home</a></li>
<li><a href='https://draft.blogger.com/Url%20kamu'>Sitemap</a></li>
<li><a href='https://draft.blogger.com/Url%20kamu'>HTML Parser</a></li>
<li><a href='https://draft.blogger.com/Url%20kamu'>Jasa Edit Template</a></li>
<li><a href='https://draft.blogger.com/Url%20kamu'>Kode Warna</a></li>
</ul>
</nav>
atau suka hati
2. Bagian Css
Silahkan masukan juga Cssnya di bawah berikut, tempatkan kode di bagian skin atau style /<![CDATA[ kode disini ]]>
- /* menu
- -------------*/
- #menu{background:#464646;
- color:#eee;height:35px;
- width:100%;
- font-family:Arial;text-transform:uppercase;
- }
- #menu ul,#menu li{margin:0;padding:0;list-style:none}
- #menu ul{height:35px}
- #menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
- #menu li a{color:#fff}
- #menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
- #menu li:hover > a,#menu li a:hover{color:#000;background:#BABABA;box-shadow: 0 4px 0 #E73138 inset;}
- ul.menu li:nth-child(1){background-color:#4285F4; margin-right:0}
- ul.menu li:nth-child(2){background-color:#EA4335; margin-right:0}
- ul.menu li:nth-child(3){background-color:#FBBC05; margin-right:0}
- ul.menu li:nth-child(4){background-color:#34A853; margin-right:0}
- ul.menu li:nth-child(5){background-color:#EA4335; margin-right:0}
- #menu input{display:none;margin:0 0;padding:0 0;width:100%;height:100%;opacity:0;cursor:pointer}
- #menu label{font:bold 30px Arial;display:none;width:80%;padding-left:10px;float:left;}
- #menu label span{font-size:15px;position:absolute;width:100%;text-align:center;padding-top:9px}
- #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
- #menu ul.menus a{color:#fff}
- #menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
- #menu li:hover ul.menus{display:block}
- #menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
- #menu li:hover > a.prett,#menu a.prett:hover{color:#000}
- #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
- #menu ul.menus a:hover{color:#000}
- #menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee; position:absolute;top:13px;right:9px}
3. Bagian Css responsif
Setelah memasukan kode di atas silahkan masukan kode berikut diatas kode
@media screen and (max-width:768px){
#menu{position:relative;padding-bottom:3px;}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:100%;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}}
Terima kasih telah membaca artikel tentang Cara Membuat menu navigasi seperti dua rupa navigasi warna-warni di blog successful blogger jika anda ingin menyebar-luaskan artikel ini dimohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silahkan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.