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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcKT15lKo6pDn5r-2pOJDVzSqbTcT27fBlprdFQRhPHmrs85gbt8gw2_pEPm0Nl5d-mqRNqoZW5QbslGgWXEmhjLfkCdqILHWTAMNgXdRizRfKrVJgJxX64LP9fZJG_CmhZCIhge4p1J14/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'>Semoga Responsive hehe
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#url'>Services</a>
<ul>
<li>
<span><a href='#'>Printing & Framing</a>
<span><a href='#'>Photo Editing</a>
<span><a class='last' href='#'>Storage & 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 & Accessories</a>
<span><a href='#'>Professional Tripods</a>
<span><a class='last' href='#'>Filters & Lens Hoods</a>
</span></span></span></span></span>
</li>
</ul>
</li>
<li><a href='#'>Privacy Policy</a></li>
</ul>
</div>
pertamaxxx, kodenya banyak juga yah?? saya lihat dulu deh demonya, thx master. ^_^
BalasHapusBuruan kang..mumpung blm kemaleman hehe :)
HapusFR : kayaknya sebanding heh
HapusMas Bud : hehe
Kodenya panjang juga ya kang..tapi sesuai sama hasilnya sih...
BalasHapusBeneran elegance :)
enggak panjang2 amat kok mas bud :) masih panjang mana sama buntut kuda cobaaa.. hehehe
Hapuspanjangan tali kuda, yang buat nuntun mas
Hapushalah mang yono .. panjangan mana sama punya mamang haha
Hapusamat aja g panjang mas
Hapuskayak yg tau amat gak panjang hehe
Hapuskayaknya punya amat lebih panjang deh :)
Hapusamat teramat panjang ....
HapusKeren banget nih kang Ruly saya udah liat demonya, cuma kodenya banyak banget yah hehe...
BalasHapuskode tak masalah mas anthoni yang penting hasil akhirnya :) hehehe
Hapusiya betul juga yah mas, makasih ....
HapusNice
Hapushehe kalo sekarang pasti lagi banyak duit :) mau nodong ah minta jatah hohoho...
BalasHapuscakep bin sexy kang menunya, efeknya juga cantik udah gitu responsive pula.. aauuooo bikin mataku jadi gaong2 :D hehehe
mantapzz banget rayuannya hehe
Hapuskalau lihat yang beginian jadi pengen masang di belog saya kang..... izin sedot ah
BalasHapusmangga mang sedot we sedot hehe
Hapuswajah bau.. homepagena :)
BalasHapushehe .. bau naun tah kang
Hapusajarin saya mas,,,,,
BalasHapusajarin apa yow
Hapuskeren banget sob.., hny dgn CSS ya... *smile
BalasHapusyoi .. dan menu keren pun tercipta hehe
Hapusmantep pengen pasang juga sih,,
BalasHapusTapi belum begitu paham css nih...
wah ijin copy saja ya sob
kalau begitu sama dong belum ngerti apa itu css sob ...
Hapusnuju maentenis ning blogna :) hanya masukan yeuh kang, kumaha upami logo sareng menu janten sajajar?
BalasHapushttp://1.bp.blogspot.com/-8LaCEBeG94M/Ujgffx4bh1I/AAAAAAAAFfk/rXWlfNEHs0s/s1600/duniaradio.png
muhun sip kang .. nembe sadar yeuh .. dikumahakeun tah kang ??
Hapusurang cobian atuh nya
eta dina .inner na lebar ning... max-width:1280px; cobi robih janten 975px
Hapusmuhun atos dirobih kang.. jigana saluyu ayeuna mah nya kang
Hapushatur tangkiyu lah kang
Siap dicoba kang :)
BalasHapusseep ah
Hapus