Responsive Dark Menu Untuk Blogger

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  

33 komentar

pertamaxxx, kodenya banyak juga yah?? saya lihat dulu deh demonya, thx master. ^_^

Kodenya panjang juga ya kang..tapi sesuai sama hasilnya sih...
Beneran elegance :)

Buruan kang..mumpung blm kemaleman hehe :)

Keren banget nih kang Ruly saya udah liat demonya, cuma kodenya banyak banget yah hehe...

hehe kalo sekarang pasti lagi banyak duit :) mau nodong ah minta jatah hohoho...
cakep bin sexy kang menunya, efeknya juga cantik udah gitu responsive pula.. aauuooo bikin mataku jadi gaong2 :D hehehe

kode tak masalah mas anthoni yang penting hasil akhirnya :) hehehe

enggak panjang2 amat kok mas bud :) masih panjang mana sama buntut kuda cobaaa.. hehehe

kalau lihat yang beginian jadi pengen masang di belog saya kang..... izin sedot ah

panjangan tali kuda, yang buat nuntun mas

FR : kayaknya sebanding heh
Mas Bud : hehe

halah mang yono .. panjangan mana sama punya mamang haha

iya betul juga yah mas, makasih ....

mantapzz banget rayuannya hehe

mangga mang sedot we sedot hehe

wajah bau.. homepagena :)

amat aja g panjang mas

ajarin saya mas,,,,,

hehe .. bau naun tah kang

ajarin apa yow

kayak yg tau amat gak panjang hehe

keren banget sob.., hny dgn CSS ya... *smile

mantep pengen pasang juga sih,,
Tapi belum begitu paham css nih...
wah ijin copy saja ya sob

yoi .. dan menu keren pun tercipta hehe

kalau begitu sama dong belum ngerti apa itu css sob ...

nuju maentenis ning blogna :) hanya masukan yeuh kang, kumaha upami logo sareng menu janten sajajar?
http://1.bp.blogspot.com/-8LaCEBeG94M/Ujgffx4bh1I/AAAAAAAAFfk/rXWlfNEHs0s/s1600/duniaradio.png

muhun sip kang .. nembe sadar yeuh .. dikumahakeun tah kang ??
urang cobian atuh nya

eta dina .inner na lebar ning... max-width:1280px; cobi robih janten 975px

muhun atos dirobih kang.. jigana saluyu ayeuna mah nya kang
hatur tangkiyu lah kang

kayaknya punya amat lebih panjang deh :)

amat teramat panjang ....