Didhiksty Blog: Cara membuat menu navigasi responsive pada blog

Saturday, 20 August 2016

Cara membuat menu navigasi responsive pada blog

Jika sobat menggunakan template yang responsive, mungkin membuat menu navigasi responsive tidak begitu penting, akan tetapi ini bisa membantu jika sobat ingin melakukan modifikasi template baik itu dari template orang lain maupun template default blog. Baik langsung saja kita bahas,

Cara membuat menu navigasi responsive pada blogspot

1. Template >> Edit HTML

2. Cari kode berikut dibawah <head>, pada bagian atas template

<b:if cond='data:blog.isMobile'>

<b:else/>

</b:if>

3. Ganti dengan kode dibawah ini

4. Copy kode dibawah ini, lalu paste tepat diatas kode ]]</b:skin>

/*-----Responsive Menu ----*/

body {margin: 0px;}

#menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}

#menu ul{height:45px;width:1024px}

#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}

#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}

#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;

background: #5FC6EB;}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#menu label span{font-size:16px;position:absolute;left:35px}

#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}

#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;

text-shadow: none;border-bottom: 1px dashed #31AFDB;}

#menu ul.menus a{color: #FFF;line-height: 35px;}

#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out;

-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;

transition: all .1s ease-in-out;}

@media screen and (max-width: 800px){

#menu{position:relative}

#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}

#menu ul.menus{width:100%;position:static;padding-left:20px}

#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}

#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}

}

5. Copy kode dibawah ini dan paste kan dibawah kode <body>

<label>≡<span>Navigasi Menu</span></label>

<ul>

<li><a href='#'>About</a></li>

</ul>

</li>

<li><a href='#'>Contact</a></li>

</ul>

</li>

<li><a href='#'>Advertise</a></li>

</ul>

</nav>

6. Save template.

Sumber : http://blogoonline.blogspot.co.id/2015/09/menu-navigasi-responsive.html . silakan kunjungi agar anda bisa mengetahui lebih rinci artikel ini.

Diblog tersebut anda juga bisa menemukan artikel lainnya yang tak kalah menarik diantaranya :

Didhiksty Blog

Saturday, 20 August 2016

Cara membuat menu navigasi responsive pada blog

Jika sobat menggunakan template yang responsive, mungkin membuat menu navigasi responsive tidak begitu penting, akan tetapi ini bisa membantu jika sobat ingin melakukan modifikasi template baik itu dari template orang lain maupun template default blog. Baik langsung saja kita bahas,

No comments:

Post a Comment

Kenapa warga rohingya diusir dari negaranya

Search This Blog