06/30/16 - 柯佥妍 - RYEN HINCELOIS

[TUTORIAL] Cara Membuat Menu Turun / Drop Down di Blog

Hallo mand-temand. Sorry banget ya baru sempet posting blog lagi. uda mepet-mepet tanggal tua nih huahua. Buat Tiara thanks ya uda japri buat request tutorial ini. Kali ini aku mau buat tutorial yang mungkin bisa membantu kalian semua ya.

Disini mungkin orang bingung menyebutnya apa. Bisa dibilang menu drop down, atau gampangannya menu di blog yang jatuh kebawah gitu deh ya pokoknya.

Ok langsung aja ya, uda malem dan uda mulai ngantuk jadi agak ngebut ya postingannya wkwk

1. Kali ini aku mau caranya gak sampai otak atik di edit html. Jadi langsung masuk 'Tata Letak' aja di blognya. Sorry ya kalo bahasanya beda cos aku pake Indonesia punya wahaha. ok deh aku sambil capture aja biar gak bingung.

2. Kalian klik aja dimana kalian mau taruh menu nya itu. Biasanya sih di atas di bawah header ya. Klik aja itu 'Tambahkan Gadget' / 'Add Widget'

3. Terus nanti muncul tab windows baru, pilih yang 'HTML/JavaScript'

4. Copy paste kode di bawah ini ke kotak HTML/JavaScript yang keluar tadi.

<br />
<style>
    #menu
    {
    width: 100%;
    margin: 0;
    padding: 0.5px 0 0 0;
    list-style: none;
    background: #000000;
    background: -moz-linear-gradient(#000, #000000);
    }
    #menu li
    {
    float: left;
    padding: 0 0 5px 0;
    position: relative;
    line-height: 0;
    }
    #menu a
    {
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #fff;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    }
    #menu li:hover > a
    {
    color: #3fc2ff;
    }
    *html #menu li a:hover /* IE6 */
    {
    color: #3fc2ff;
    }
    #menu li:hover > ul
    {
    display: block;
    }
    /* Sub-menu */
    #menu ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #000;
    background: -moz-linear-gradient(#000, #000);
    border-radius: 2px;
    }
    #menu ul ul
    {
    top: 0;
    left: 150px;
    }
    #menu ul li
    {
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }
    #menu ul li:last-child
    {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    #menu ul a
    {
    padding: 10px;
    height: 10px;
    width: 130px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }
    *html #menu ul a /* IE6 */
    {
    height: 10px;
    }
    *:first-child+html #menu ul a /* IE7 */
    {
    height: 10px;
    }
    #menu ul a:hover
    {
    background: #0186ba;
    background: -moz-linear-gradient(#04acec, #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec, #0186ba);
    background: -o-linear-gradient(#04acec, #0186ba);
    background: -ms-linear-gradient(#04acec, #0186ba);
    background: linear-gradient(#04acec, #0186ba);
    }
    #menu ul li:first-child > a
    {
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }
    #menu ul li:first-child > a:after
    {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
    }
    #menu ul ul li:first-child a:after
    {
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
    }
    #menu ul li:first-child a:hover:after
    {
    border-bottom-color: #04acec;
    }
    #menu ul ul li:first-child a:hover:after
    {
    border-right-color: #04acec;
    border-bottom-color: transparent;
    }
    #menu ul li:last-child > a
    {
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    }
    /* Clear floated elements */
    #menu:after
    {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    * html #menu { zoom: 1; } /* IE6 */
    *:first-child+html #menu { zoom: 1; } /* IE7 */
    </style><br />
<ul id="menu"><li><a href='/'>Home</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu </a><br />
<br />
<br />
<ul><li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a></li>
</ul><br />
</li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu 2</a><br />
<br />
<br />
<ul><li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a><br />
<br />
<br />
<ul><li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul><br />
</li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul><br />
</li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu 3</a><br />
<br />
<br />
<ul><li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul><br />
</li>
</ul>

INI KODENYA SAMA YA. Aku jadiin 2 bagian aja. yg atas biar gampang copynya bisa CTRL + A nah kalau yang bawah ini cuma penjelasan aja bagian mana aja yang bisa di ubah untuk renovasi di blog kalian ^-^

<style>
#menu
{
width: 100%;
margin: 0;
padding: 0.5px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#000, #000000);
}
#menu li
{
float: left;
padding: 0 0 5px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #fff;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
#menu li:hover > a
{
color: #3fc2ff;
}
*html #menu li a:hover /* IE6 */
{
color: #3fc2ff;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #000;
background: -moz-linear-gradient(#000, #000);
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Home</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu </a>

<ul>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a></li>
</ul>
</li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu 2</a>

<ul>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a>

<ul>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='nofollow' target='_blank'>Drop menu 3</a>

<ul>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://gocianyen.blogspot.co.id/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
</ul>

Kotak judul biarkan kosong, paste kode html ke dalam kotak konten. kalau sudah jangan lupa di save ya.

5. Tadaaa menu nya uda jadi deh. Oh ya tunggu dulu aku mau jelasin dulu apasih kode tadi itu. kalau mau ganti gimana blablabla. Biar gampang aku kasi warna aja ya penjelasannya.

NB :

- warna ____ ganti aja dengan link blog kalian ya, atau bisa di isi dengan link label blog.

- warna ____ ganti aja dengan kata lain yang ingin kalian buat untuk judul menu utama.

- warna ____ ganti aja itu sub menu nya ya yang jatuh kebawah itu loh.

untuk mempermudah saat copy paste di kotak konten html/javascript klik tombol CTRL + F untuk mencari kata yang harus di ganti ya.

Hasil demo seperti ini ya :