Kumpulan Drop Down Keren Dan Cara Membuatnya

kevinservis TIPS BLOG 27 Mar 2013

Tutorial | Ini dia drop down yang sobat sobat cari, Blogger Tutorial sudah koleksi banyak nih, bagi sobat yang templatenya belum ada drop downnya, bakal makin bagus bila di ksih salah satu drop down dari Blogger Tutorial ini. hehe :)

Cara membuat Drop down

Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
Cari Kode ]]></b:skin> ( Gunakan CTRL + F untuk mempermudah pencarian )
Copy Css dari menu yang anda pilih di bawah ini dan paste tepat diatas kode ]]></b:skin>
Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
Jika sudah ditemukan, Copy kode menu yang anda pilih dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>

Preview

Menu Horizontal 1

Css

Kode

Menu Horizontal 2

CSS

Kode

Menu Horizontal 3

CSS

Kode

Menu Horizontal 4

CSS

#tabs { float:left; 
width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; 
line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; 
list-style:none; } #tabs li { display:inline; margin:0; padding:0; } 
#tabs a { float:left; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsgiJUp0R9BCiV6jcItNsZ-3kum3okjvx7E73R4tq34hJXfnmJBgzg5TarrXyTQ3UmUHDVnGKtOpk3RlMNwg4gD0JoD7m4PE22J_T3uf59gSuBbGdUJ725dOU82RTAUb-k0X_A2LIG9o/s1600/tableft.png)
 no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabs a span { float:left; display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiATyxmYSbdIYm78hCovHy8g2dUHhmlCbsVU8nAVIUbHBTwH7-98J849eYKsmnQsVAgQhrPpdml1l79MUxBdwhifJISqX_NW8iEMb9Qh5yO65W7MfoAoW1pe4sofVjXUyMjNvWZYrFnXQ0/s1600/tabright.png)
 no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* 
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span 
{float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834;
 } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { 
background-position:100% -42px; }

Kode

Menu Horizontal 5

CSS

#tabsI { float:left; 
width:100%;font: bold 7.5pt Verdana; line-height:normal; 
border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 
10px 0 50px; list-style:none; } #tabsI li {  margin:0; padding:0; } 
#tabsI a { 
float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQPpaN3KVFmsVo4Z9uUV98Z6SiefbAJ4ccNaz5Omfk7_-tSZBVMapSXlz4jf-lmQAgLmqmYGkxjx-ZP_fErhk0vO2G23sItARmgcFJ_IlYtBjexK3064crhjVAlJRcsx-wBytVBTQNeRY/s1600/tableftI.png)
 no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; }
 #tabsI a span { float:left; display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3T_0Y4b5ZmeX3C47e0umNmgJzGksTv6dQI2WAUz8jIW9i_s_n-U5ImWK6m2k5t1qcxoWbN3WE8kSTOEmbVDBGkARsjr4OJrUaj425MWMYe-EW4uNveQ8ibRIP7f6u_DHqzi-kQHgLTJc/s1600/tabrightI.png)
 no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* 
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span 
{float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; }
 #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { 
background-position:100% -42px; }

Kode

Menu Horizontal 6

CSS

#tabsF { float:left; 
width:100%; font: bold 7.5pt Verdana; line-height:normal; 
border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0
 50px; list-style:none; } #tabsF li { display:inline; margin:0; 
padding:0; } #tabsF a { float:left; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicMRcJ6DJQB39rEFfpkaEBJwW4LtN9YdyIzj0-lIzjbqn9NHIWlhLEvjC7KDBDHP4twt62tDNJWH0F2z3Nxm8WDUHRMHmwWTR0SayP22x7fRIP7qenaNztadWLXiAEnnwfOg_a9nicYiI/s1600/tableftF.png)
 no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabsF a span { float:left; display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1fOT6BQkHzJTRPrTyvMHQPZKvckxn04MNQbNyxa9cxIeoQ6zJnnKJLEgKXPnWGkdTQINeDjMz3XyLlcdHNYN2QzzzCjk8Is01F2JZIOS3Mg7YWW6RvIh5PEK5Nk4u4l6-xIrCWYrwSQ/s1600/tabrightF.png)
 no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* 
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span 
{float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; }
 #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { 
background-position:100% -42px; }

Kode

Menu Horizontal 7

CSS

#tabsE { float:left; 
width:100%; background:#000; font: bold 7.5pt Verdana; 
line-height:normal; } #tabsE ul { margin:0; list-style:none; } #tabsE li
 { display:inline; margin:0; padding:0; } #tabsE a { float:left; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9vTbBDgmjd73mKUVm1Fl6YkI09vgPfHR_ML32jlsJq-xE2wGh3HuFzCG-AEqWK4rUm9fl5xuF0Pjz5EbGkNKs04cwVBsxPs_ibCmPAx_fAvsJag1ShcrBX0iCr1M4aoim1iShSjDWoAg/s1600/tableftE.png)
 no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabsE a span { float:left; display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBYBKEmv00mdCz6IxkxWrgTxKFf7wlfopgYA6IJQYcoxAs2HU4xOA0wmFQCuIe75JU3xNLbe0pyEQ5DOcTHGNOEm5PRdpTGpS9mbQGToVZ-r6Yo1m3MyHqQKTFxIV2_1C50F5t7pedQI/s1600/tabrightE.png)
 no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* 
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span 
{float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; }
 #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { 
background-position:100% -42px; }

Kode

Menu Horizontal 8

CSS

#tabs12 img { border: 
none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold
 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } 
#tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } 
#tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { 
float:left; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_kiktClB-Kowf2FFudSTqVaF2cxkPtjJ0evTbTBY4suEckkPAzTCVjMN7aMigto-pwffGpwmzLHR2s8xmfu2k5qpZITUt5tC_l9FdM4ILBV3wLtzJ_hODKN2uC76dyxuOJPCnsWs-eM/s1600/tableft12.png)
 no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabs12 a span { float:left; display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MlcB9k3V4ol2PZRg_NS-zcld-oWslDOeUURNcSq_phbZPWKrsEMyBM9erd1i0RTPAthZQaGMCiZdkGHyC3C0IjnUiZmlzYS624nGrZe1KWpt6ltePZrlqHYBrxP1jcuK4TEX_Fq-Ju8/s1600/tabright12.png)
 no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* 
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span 
{float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; }
 #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span {
 background-position:100% -42px; } #tabs12 #current a { 
background-position:0% -42px; } #tabs12 #current a span { 
background-position:100% -42px; }

Kode

Menu Horizontal 9

CSS

#tabs6 img { border: none;
 } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt
 Verdana; line-height$3Anormal; border-bottom:1px solid #666; } #tabs6 
ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { 
display:inline; margin:0; padding:0; } #tabs6 a { float:left; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPepuWcPLexyP3lF-Pe7HRoH1ai-y7-FNvt38k75744iXY3L1in1MW9Isn7ESYxErMVAIdnR1Ch2yZRbBJojybR-viOVxMFT85ifO77LBlGhmd1jo52aY-u8TM9xBGXqzvBqohgH71jss/s1600/tableft6.gif)
 no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabs6 a span { float:left; display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi07UVd-gloE1bY6BSrXYjLjH3Yo78goz0y4meYPSZTyVb0zN9e7XImPhXQkrOqL0Hf5A3b7YncZRZhU9ojYGHzu1m7bg5AtTJpTbzsy2n7j6M-Lh3_knTKmlBFWLw3x88mrfhIScl8q8s/s1600/tabright6.gif)
 no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* 
Commented Backslash Hack hides rule from IE5-Lac \*/ #tabs6 a span 
{float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; }
 #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { 
background-position:100% -42px; } #tabs6 #current a { 
background-position:0% -42px; } #tabs6 #current a span { 
background-position:100% -42px; }

Kode

Menu Horizontal 10

CSS

#tabsH
 { float:left; 
width:100%; background:#000; font: bold 7.5pt Verdana; 
line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; 
list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } 
#tabsH a { float:left; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiov0aTgnA9mkBhWTonpTf0iMptw3SgEsqmkJsvcjTAGgRRaL4dzTq17c99Ot0zfC1C49wFQhjRl34TokIwRs28uCit2SdZz9T8x3rZae0Tdres0xeeSD23ICRrA7mZYSUrrWoPBQs2inY/s1600/tableftH.png)

no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabsH a span { 
float:left;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudtJDZyAY4t2ZGPtDS5JaQQ8Ul66fTL53WlRZLeQg3jWXQJhMno-reQfRVqYKFe-sv_Tst13BueUO-TeR6gBBoL9GvE_JlE1vSfBIPCUpzrlh03eFM2x5eUmY6sVlH5D17p9DyvGqZIA/s1600/tabrightH.png)

no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* 
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span 
{float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; }
 #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { 
background-position:100% -42px; }

Kode

Catatan:

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

Tanda pagar (#) silahkan ganti sesuai link yang anda inginkan, dan untuk yang saya warnai biru adalah text menu dari link yang anda buat. contoh : <li><a href="http://trickstipsblog.blogspot.com/" ><span>Blogger Tutorial</span></a></li>

Sekian dulu ya postingan Blogger Tutorial kali ini, kalau sobat mencoba Tutorial diatas, pasti tambah cakep tuh blog sobat, hehehe :)

Cikevin