Cara memasang Menu Dropdown di Blog

ada yang kurang rasanya kalau blog kita tidak ada Menu dropdown. fungsi dari menu dropdown ini sangat banyak selain memperindah blog menu dropdown ini bisa membuat bagian-bagian atau pilihan pada blog. berikut cara cara memasang Menu Dropdown di Blog.

Langkah-langkah memasang menu drop down keren di blog :

1. Login ke akun blogger

2. Klik Template

3. Klik Edit HTML

4. Cari kode berikut :

]]></b:skin>

5. Jika kode tersebut sudah ditemukan, silahkan copy kode CSS dibawah ini kemudian letakan tepatdiatas kode ]]></b:skin> :

#cssmenu ul,

#cssmenu li,

#cssmenu span,

#cssmenu a {

margin: 0;

padding: 0;

position: relative;

}

#cssmenu {

height: 35px;

border-radius: 0px 0px 0 0;

-moz-border-radius: 0px 0px 0 0;

-webkit-border-radius: 0px 0px 0 0;

background: #141414;

background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));

background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);

background: -o-linear-gradient(top, #32323a 0%, #141414 100%);

background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);

background: linear-gradient(to bottom, #32323a 0%, #141414 100%);

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);

border-bottom: 2px solid #ff4500;

}

#cssmenu:after,

#cssmenu ul:after {

content: '';

display: block;

clear: both;

}

#cssmenu a {

background: #141414;

background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));

background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);

background: -o-linear-gradient(top, #32323a 0%, #141414 100%);

background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);

background: linear-gradient(to bottom, #32323a 0%, #141414 100%);

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);

color: #ffffff;

display: inline-block;

font-family: Domine, Arial, Verdana, sans-serif;

font-size: 12px;

line-height: 35px;

padding: 0 20px;

text-decoration: none;

}

#cssmenu ul {

list-style: none;

}

#cssmenu > ul {

float: left;

}

#cssmenu > ul > li {

float: left;

}

#cssmenu > ul > li:hover:after {

content: '';

display: block;

width: 0;

height: 0;

position: absolute;

left: 50%;

bottom: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #ff4500;

margin-left: -10px;

}

#cssmenu > ul > li:first-child > a {

border-radius: 0px 0 0 0;

-moz-border-radius: 0px 0 0 0;

-webkit-border-radius: 0px 0 0 0;

}

#cssmenu > ul > li:last-child > a {

border-radius: 0 0px 0 0;

-moz-border-radius: 0 0px 0 0;

-webkit-border-radius: 0 0px 0 0;

}

#cssmenu > ul > li.active > a {

box-shadow: inset 0 0 3px #000000;

-moz-box-shadow: inset 0 0 3px #000000;

-webkit-box-shadow: inset 0 0 3px #000000;

background: #070707;

background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));

background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);

background: -o-linear-gradient(top, #26262c 0%, #070707 100%);

background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);

background: linear-gradient(to bottom, #26262c 0%, #070707 100%);

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);

}

#cssmenu > ul > li:hover > a {

background: #070707;

background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));

background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);

background: -o-linear-gradient(top, #26262c 0%, #070707 100%);

background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);

background: linear-gradient(to bottom, #26262c 0%, #070707 100%);

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);

box-shadow: inset 0 0 3px #000000;

-moz-box-shadow: inset 0 0 3px #000000;

-webkit-box-shadow: inset 0 0 3px #000000;

}

#cssmenu .has-sub {

z-index: 1;

}

#cssmenu .has-sub:hover > ul {

display: block;

}

#cssmenu .has-sub ul {

display: none;

position: absolute;

width: 200px;

top: 100%;

left: 0;

}

#cssmenu .has-sub ul li {

*margin-bottom: -1px;

}

#cssmenu .has-sub ul li a {

background: #ff4500;

border-bottom: 1px solid #aad06d;

filter: none;

font-size: 11px;

display: block;

line-height: 120%;

padding: 10px;

}

#cssmenu .has-sub ul li:hover a {

background: #ff0000;

}

#cssmenu .has-sub .has-sub:hover > ul {

display: block;

}

#cssmenu .has-sub .has-sub ul {

display: none;

position: absolute;

left: 100%;

top: 0;

}

#cssmenu .has-sub .has-sub ul li a {

background: #ff0000;

border-bottom: 1px solid #97b36b;

}

#cssmenu .has-sub .has-sub ul li a:hover {

background: #345105;

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px double #696969;font-weight:normal}

}

6. Kemudian anda cari kode berikut :

</header>

7. Jika kode tersebut sudah ditemukan, kemudian copy kode dibawah ini, lalu letakan tepat dibawah kode</header> :

<ul>

<li class='has-sub '><a href='#'><span>SEO Artilce</span></a>

<ul>

<li><a href='URL Kamu'><span>SEOquake</span></a></li>

</ul>

</li>

<li class='has-sub '><a href='#'><span>Blog Artilce</span></a>

<ul>

<li><a href='URL Kamu'><span>Widget Blog</span></a></li>

<li><a href='URL Kamu'><span>Blogger News</span></a></li>

</ul>

</li>

<li><a href='#'><span>Sitemap</span></a></li>

</ul>

</div>

Keterangan :

Ganti kode yang berwarna ORANGE dengan : Alamat / URL Tujuan

Ganti kode yang berwarna MERAH dengan : nama menu yang anda inginkan

8. Kemudian Save Template. Selesai

Cara memasang Menu Dropdown di Blog

Artikel Menarik Lainnya

2 komentar