Tutorial : Horizontal Dropdown Menu

9:15:00 PM


Assalamualaikum and hello korang. Wassup ? Iman sihat ? XD

Requested Tutorial


Mungkin menu dropdown yang dia maksudkan. Code ni sebenarnya dari kak +Shida Radzuan. Cuma cara yang lain sikit. Nak senang katakoooo. Kita guna HTML/Javascript je T.T Jenuh jugak nak buat. Kalau guna Edit HTML tu memang susah okay T.T

Okay lah taknak cakap banyak. Jom tuto !

1. Log in > Dashboard > Layout > Add gadget > HTML/Javascript
<style>
/* Menu Horizontal Dropdown ----------------------------------------------- */
#fafamenuwrapperpic{
list-style:none;
background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png)
repeat-x;margin:0 auto;padding:0 auto
}
#fafawrapper{
list-style:none;
width:960px;
height:35px;
margin:0 auto
}
.fafamenusearch{
list-style:none;
width:300px;
float:right;
margin:0 auto;
padding:0 auto
}
.fafaclearit{
list-style:none;
clear:both;
height:0;
line-height:0.0;
font-size:0
}
#fafamenubar{
list-style:none;
width:100%
}
#fafamenubar,#fafamenubar ul{
list-style:none;
font-family:Arial, serif;
margin:0;padding:0
}
#fafamenubar a{
list-style:none;
display:block;
text-decoration:none;
font-size:12px;
font-weight:700;
text-transform:uppercase;
color: #000;
border-right:1px solid #191919;
padding:12px 10px 8px
}
#fafamenubar a.trigger{
list-style:none;
background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:12px 24px 8px 10px
}
#fafamenubar li{
list-style:none;
float:left;
position:static;
width:auto
}
#fafamenubar li ul,#fafamenubar ul li{
list-style:none;
width:170px
}
#fafamenubar ul li a{
text-align:left;
color: #CCFFFF;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;
border:none;
padding:5px 10px
}
#fafamenubar li ul{
list-style:none;
z-index:100;
position:absolute;
display:none;
background:  #FFDFDD;
padding-bottom:5px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)
}
#fafamenubar li:hover a,#fafamenubar a:active,#fafamenubar a:focus,#fafamenubar li.hvr a{
background-color: #FFDFDD;
list-style:none;
color: #000
}
#fafamenubar li:hover ul,#fafamenubar li.hvr ul{
list-style:none;
display:block
}
#fafamenubar li:hover ul a,#fafamenubar li.hvr ul a{
list-style:none;
color:#000;
background-color:transparent;
text-decoration:none
}
#fafamenubar li ul li.hr{
list-style:none;
border-bottom:1px solid #F778A1;
border-top:1px solid  #F778A1;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:4px 0
}
#fafamenubar ul a:hover{
list-style:none;
background-color:     #C2DFFF!important;
color: #0000A0!important;
text-decoration:none
}
</style> 

    <div id='fafamenuwrapperpic'>
    <div id='fafawrapper'>
    <ul id='fafamenubar'>
    <li><a href='URL BLOG KORANG'><img border='0' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
    <li><a href='http://www.blogger.com/profile/masukkan ID' target='new'>Tentang Admin</a></li>
    <li><a class='trigger'>Contact Me</a>
    <ul>
    <li><a href='https://plus.google.com/u/0/masukkan ID' target='new'>Goggle +</a></li>
    <li class='hr'/>
    <li><a href='http://twitter.com/masukkan ID' target='new'>Contact on Twitter</a></li>
    <li><a href='http://www.myspace.com/masukkan ID' target='new'>Contact on Myspace</a></li>
    <li><a href='http://www.facebook.com/masukkan ID' target='new'>Contact on Facebook</a></li>
    </ul>
    </li>
    <li><a href='Link Anda' target='new'>Owner Creator</a></li>
    <li><a class='trigger'>Tips and Tricks</a>
    <ul>
    <li><a href='Link Anda'>Komputer</a></li>
    <li class='hr'/>
    <li><a href='Link Anda'>Blogspot</a></li>
    <li class='hr'/>
    <li><a href='Link Anda'>Facebook</a></li>
    <li class='hr'/>
    </ul>
    </li>
    <li><a class='trigger'>Kategori</a>
    <ul>
    <li><a href='Link Anda'>TV Online</a></li>
    <li class='hr'/>
    <li><a href='Link Anda'>Komputer</a></li>
    <li class='hr'/>
   
    </form></div></div><br class='fafaclearit'/></div><div style='clear:both;'/></div>
</div>

3. Save !

NOTA KAKI TANGAN :
ABC : Background menu tab
ABC : Url/link blog korang
ABC : Gantikan dengan korang punya.
ABC : Link yang korang nak. Page/Twitter/ Fb
ABC : Nama link. Contoh bagi http://facebook.com ---> korang letak My Facebook

*Korang boleh edit dekat REAL HTML. So takyah la preview banyak kali okay. Memang susah yang ni. So, fafa suggest, lebih baik edit dekat sana je XD

*Kalau korang nak tambah dekat menu, tambah yang kat bawah ni je sebelum </form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

- bagi yang ada anak-anak link

</ul>
    </li>
    <li><a class='trigger'>Kategori</a>
    <ul>
    <li><a href='Link Anda'>TV Online</a></li>
    <li class='hr'/>
    <li><a href='Link Anda'>Komputer</a></li>
- Bagi yang terus ke link
</ul>
<li><a href='http://www.blogger.com/profile/masukkan ID' target='new'>Tentang Admin</a></li>

Okay. Done pembelajaran hari ni. Whoaaaa ! This tuto is soooooo complex. Nasib lah nak buat yang ni. Menangis dulu la jawabnya. Harap korangdapat buat dengan jaya nyaaaaa. Good  Luck korang :)

P/s : Do follow my twitter --> @AnisSyakira__
Feel free to request any tutorial in my ask.fm.

Okay. Syukran. Ma'assalamah wa ilalliqa' bloggers XD
 

Assalamualaikum
Blog Author : Fafa Kyraa

You Might Also Like

0 Commentor(s)

Assalamualaikum
Feel free to put your thoughts here XD