Responsive Dark Menu Untuk Blogger

di
Responsive Dark Menu Untuk Blogger - Setelah beberapa hari disibukan dengan beragam aktivitas dunia nyata , akhirnya kembali mempunyai waktu untuk berbagi tutorial dalam membuat menu navigasi untuk blogger. Menu kali ini cukup simple dalam pemasangannya dan terkesan elegant dalam penampilannya serta memiliki fitur responsive . Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini .

Kustomisasi 

  • Masuk Edit HTML 
  • Cari kode ]]></b:skin> 
  • Masukan kode dibawah ini tepat diatas kode ]]></b:skin> 
/*Responsive Nav Menu*/
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#555; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}
.menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;
 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
 }
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}
/* Responsive Query */
@media screen and (max-width:980px) {
#container {width:auto;}
#head {padding:0px 1.5% 20px 1.5%;}
#main {width:60%; padding:10px 0px 30px 1%;}
#aside {width:34.5%}
.bar {width:auto;}
}
@media screen and (max-width:700px) {
#wrapper {background:none; border:none; padding:2% 0 2% 1.5%;}
#container, #header, #nav, #main, #aside {width:98%; float:none; margin:0 auto;}
#main {border:none; padding:0px; box-shadow:none}
#nav {margin:30px auto 10px; padding:0px;}
#nav ul {margin:0px;}
}
@media screen and (max-width:500px) {
.post {width:94%;}
}
.post blockquote {-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; position:relative; background-image: url(https://lh4.googleusercontent.com/-l1lVBQTZW20/Ugyd2uYiwpI/AAAAAAAADlg/kb3SUYfNZD4/w620-h277-no/wew.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: px; color: black; font-family: Abel, 'Courier New', Monaco, Courier, monospace; line-height: 20px;padding: 10px 20px 10px 15px;}
blockquote::before {
content:"Klik Ganda Untuk Seleksi";
width:120px;
font-size:10px;
font-family:Tahoma,arial,sans-serif;
text-shadow:none;
letter-spacing:0.03em;
font-weight:normal;
padding:3px 9px;
position:absolute;
top:-36px;
right:-4px;
transition:.3s ease-out;
background:#002244;
color:#fff;
border-radius:5px;
opacity:0;
visibility:hidden;
}
blockquote::after {
content:" ";
width:0;
height:0;
opacity:0;
visibility:hidden;
position:absolute !important;
right:13px;
top:-10px;
transition:.3s ease-out;
border-color:#002244 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
}
blockquote:hover::before, blockquote:hover::after {
opacity:.5;
visibility:visible;
}
  • Masuk pada Layout
  • Add Gadget / HTML Javascript 
  • Masukan kode dibawah ini  
<div class='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#url'>Services</a>
        <ul>
            <li>
                <span><a href='#'>Printing &amp; Framing</a>
                <span><a href='#'>Photo Editing</a>
                <span><a class='last' href='#'>Storage &amp; Backup</a>
                </span></span></span>
            </li>
        </ul>
        </li>
        <li><a href='#url'>Contacts</a>
        <ul>
            <li>
                <span><a href='#'>Support</a>
                <span><a href='#'>Sales</a>
                <span><a href='#'>Buying</a>
                <span><a href='#'>Photographers</a>
                <span><a href='#'>Stockist</a>
                <span><a class='last' href='#'>General</a>
                </span></span></span></span></span></span>
            </li>
        </ul>
        </li><li>
        </li><li><a href='#url'>Stores Location</a>
        <ul>
            <li>
                <span><a href='#'>South West Region</a>
                <span><a href='#'>North East Region</a>
                <span><a class='last' href='#'>Central Region</a>
                </span></span></span>
            </li>
        </ul>
        </li>
        <li><a href='#url'>Contact Us</a>
        <ul>
            <li>
                <span><a href='#'>Email Addresses</a>
                <span><a href='#'>By Post</a>
                <span><a class='last' href='#'>Telephone Numbers</a>
                </span></span></span>
            </li>
        </ul>
        </li>
        <li><a href='#url'> Sales </a>
        <ul>
            <li>
                <span><a href='#'>Digital SLR Cameras</a>
                <span><a href='#'>Interchangeable Lenses</a>
                <span><a href='#'>Flash Guns &amp; Accessories</a>
                <span><a href='#'>Professional Tripods</a>
                <span><a class='last' href='#'>Filters &amp; Lens Hoods</a>
                </span></span></span></span></span>
            </li>
        </ul>
        </li>
        <li><a href='#'>Privacy Policy</a></li>
    </ul>
</div>
Semoga Responsive hehe  

Artikel Menarik Lainnya :