} --> SELAMAT DATANG

Saturday, 11 February 2017

Cara mudah untuk pembuatan MenuDropDown Pada Blog tanpa edit HTML Template


Cara mudah untuk pembuatan MenuDorpDown Pada Blog
langsung saja

1.Copy Kode Di bawah ini

<style>
        #menudropdown {
            background: #848484;
            width: 100%;
            color: #FFF;
                margin: 10px 0;
                padding: 0;
                position: relative;
                border-top:0px solid #960100;
                height:35px; }
        #bb2nav {
            margin: 0;
            padding: 0;}
        #bb2nav ul {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;}
        #bb2navli {
            list-style: none;
            margin: 0;
            padding: 0;}
        #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
            color: #FFF;
            display: block;
           font:bold 12px Helvetica, sans-serif;
           margin: 0;
            padding: 9px 12px 11px 12px;
                text-decoration: none;
                border-right:0px solid #627AAD;}
        #bb2nav li a:hover, #bb2nav li a:active {
            background: #2E9AFE;
            color: #FFF;
            display: block;
            text-decoration: none;
                margin: 0;
            padding: 9px 12px 11px 12px;}
        #bb2nav li {
            float: left;
            padding: 0;}
        #bb2nav li ul {
            z-index: 9999;
            position: absolute;
            left: -999em;
            height: auto;
            width: 160px;
            margin: 0;
            padding: 0;}
        #bb2nav li ul a {
            width: 140px;}
        #bb2nav li ul ul {
            margin: -25px 0 0 161px;}
        #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
    li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
            left: -999em;}
        #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
    li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
    li li li.sfhover ul {
            left: auto;}
        #bb2nav li:hover, #bb2nav li.sfhover {
            position: static;}
        #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
            background: #EDEFF4;
            width: 120px;
            color: #3B5998;
            display: block;
            font:normal 12px Helvetica, sans-serif;
            margin: 1px 0 0 0;
            padding: 9px 12px 10px 12px;
                text-decoration: none;
        z-index:9999;
        border:1px solid #ddd;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;}
        #bb2nav li li a:hover, #bb2nav li li a:active {
            background: #627AAD;
            color: #FFF;
            display: block;}
        #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
    a:visited {
            background: #EDEFF4;
            width: 120px;
            color: #3B5998;
            display: block;
            font:normal 12px Helvetica, sans-serif;
            padding: 9px 12px 10px 12px;
                text-decoration: none;
        z-index:9999;
        border:1px solid #ddd;
            margin: 1px 0 0  -14px;}
        #bb2nav li li li a:hover, #bb2nav li li li a:active {
            background: #627AAD;
            color: #FFF;
            display: block;}
</style>
<div id='menudropdown'>
    <ul id='bb2nav'>
        <li>
            <a href='URL YANG INGIN DI TAMBAH'>Daftar Isi</a>
        </li>
        <li>
            <a href='URL YANG INGIN DI TAMBAH'>Tentang Saya</a>
        </li>
        <li>
            <a href='#'>Menu </a>
            <ul>
                <li>
                    <a href='URL YANG INGIN DI TAMBAH'>Sub Menu 1</a>
                </li>
                <li>
                    <a href='URL YANG INGIN DI TAMBAH'>Sub Menu 2</a>
                </li>
                <li>
                    <a href='URL YANG INGIN DI TAMBAH'>Sub Menu 3</a>
                    <li>
                        <a href='URL YANG INGIN DI TAMBAH'>Sub Menu 4</a>
                    </li>
                    <li>
                        <a href='URL YANG INGIN DI TAMBAH'>Sub Menu 5</a>
                    </li>
                    <li>
                        <a href='URL YANG INGIN DI TAMBAH'>Sub Menu 6</a>
                    </li>
                </li>
            </ul>
        </li>
    </ul>
</div>

2.Edit Dulu Kode atau tambahkan dulu URL yang kalian ingin tampilkan pada menu dropdown pada Notepad,setelah kalian rasa udah Fix lalu masuk ke bagian ke 3

3.Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode Di atas pada bagian Seluruh kolom lalu pilih HTML/Java dan paste kan kode yang di copy tersebut .



Notice !
1.Jika ingin ubah warna background menu sesuai selera kalian cuman perlu ganti kode ini #2E9AFE ganti dengan kode yang ingin kalian tampilkan.


Sekian Tips ini semoga bermanfaat bagi kalian

No comments :

Disqus Shortname

Comments system