› › ›

Cara membuat menu mutli dropdown di blog

Ditulis oleh Rabu, 25 September 2019 Tambah Komentar Edit

Hi, selamat malam di blog AUTOGOBLOOG , artikel ini akan membahas mengenai tips dan trik usaha Cara membuat menu mutli dropdown di blog simak selengkapnya

Di postingan saya kali ini bakal membagikan Cara melahirkan menu mutli dropdown di blog untuk sobat yang lagi mencari ide buat melahirkan menu dropdown di blongnya mungkin ini bisa menjadi alternatif buat bisa kalian gunakan.

Untuk cara membuat Cara melahirkan menu mutli dropdown di blog terbilang mudah buat bisa di terapkan di blog.

nah buat sobat yang berminat menggunakannya bisa ikuti langkah mudah dibawah ini.

Langkah 1:Kalian buka jerambah blogger Pilih tema ✔ Edit Html ✔ Letakan aba-aba ini tepata diatas </style> alias ]]></b:skin>

/* Menu Multi Dropdown AG */ ul#mainmenumargin:0 auto;list-style:none;padding:0;background-color:#000;width:100% ul#mainmenu ul margin:0 auto;list-style:none;padding:0;background-color:#000 ul#mainmenu ul visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#000; padding:0 7px 0 ul#mainmenu li:hover>ul visibility:visible;opacity:1; ul#mainmenu li position:relative;display:block;white-space:nowrap;float:left; ul#mainmenu li:hover z-index:1; ul#mainmenu ul ul position:absolute;left:100%;top:0; ul#mainmenu z-index:999;position:relative;display:inline-block;padding:0; * html ul#mainmenu li a display:inline-block; ul#mainmenu>li margin:0; ul#mainmenu a:active, ul#mainmenu a:focus outline-style:none; ul#mainmenu a display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat; ul#mainmenu ul li float:none;margin:7px 0 0; ul#mainmenu ul a text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #000; ul#mainmenu li:hover>a, ul#mainmenu li a.pressed color:#FFFFFF;text-decoration:none; ul#mainmenu img border:none;vertical-align:middle;margin-right:17px; ul#mainmenu ul span background-image:none; padding-right:5px; ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #000; ul#mainmenu li.menutop>a background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#fff; ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed background-color:#000;color:#FFFFFF;

Jika sudah selanjutnya kalian cabut aba-aba penyeru menu dropdown dibawah ini.

Langkah 2: Silahkan kalian letakan aba-aba dibawah ini tepat diatas diantara menu blog sudah di template kalian sebelumnya



<!-- Start menu multi dropdown-->
<nav>
<ul class='menutop' id='mainmenu'>
    <li class='menutop'><a href='#' title='Home'>Home</a>
    </li>
    <li class='menutop'><a href='#' title='Product Info'>Product info</a>
        <ul>
            <li><a href='#'>Features</a>
            </li>
            <li><a href='#' title='Installation'>Installation</a>
                <ul>
                    <li><a href='#'>Description of files</a>
                    </li>
                    <li><a href='#'>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Parameters info</a>
            </li>
            <li><a href='#' title='Supported browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class='menutop'><a href='#' title='Samples'>Samples</a>
        <ul>
            <li><a href='#'>Android template</a>
            </li>
            <li><a href='#'>Mac template</a>
            </li>
            <li><a href='#' title='Mercury template'>Mercury template</a>
                <ul>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Lilac theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Elegant template</a>
            </li>
            <li><a href='#' title='Poin Template'>Point template</a>
                <ul>
                    <li><a href='#'>Aquamarine theme</a>
                    </li>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Grey theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                    <li><a href='#'>Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#' title='Toolbars template'>Toolbars template</a>
            </li>
        </ul>
    </li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
</ul>
    </nav>
<!-- End menu multi dropdown -->


Silahkan sebelum diterapkan edit dan sesuaikan dulu judul dan link sesuai kebutuhan. Mungkin dari saya cukupkan sekian dulu hendaknya bisa bermanfaat

Di postingan saya kali ini bakal membagikan Cara melahirkan menu mutli dropdown di blog untuk sobat yang lagi mencari ide buat melahirkan menu dropdown di blongnya mungkin ini bisa menjadi alternatif buat bisa kalian gunakan.

Untuk cara membuat Cara melahirkan menu mutli dropdown di blog terbilang mudah buat bisa di terapkan di blog.

nah buat sobat yang berminat menggunakannya bisa ikuti langkah mudah dibawah ini.

Langkah 1:Kalian buka jerambah blogger Pilih tema ✔ Edit Html ✔ Letakan aba-aba ini tepata diatas </style> alias ]]></b:skin>

/* Menu Multi Dropdown AG */ ul#mainmenumargin:0 auto;list-style:none;padding:0;background-color:#000;width:100% ul#mainmenu ul margin:0 auto;list-style:none;padding:0;background-color:#000 ul#mainmenu ul visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition:opacity 0.5s; -o-transition:opacity 0.5s, visibility 0.5s; transition:opacity 0.5s; background-color:#000; padding:0 7px 0 ul#mainmenu li:hover>ul visibility:visible;opacity:1; ul#mainmenu li position:relative;display:block;white-space:nowrap;float:left; ul#mainmenu li:hover z-index:1; ul#mainmenu ul ul position:absolute;left:100%;top:0; ul#mainmenu z-index:999;position:relative;display:inline-block;padding:0; * html ul#mainmenu li a display:inline-block; ul#mainmenu>li margin:0; ul#mainmenu a:active, ul#mainmenu a:focus outline-style:none; ul#mainmenu a display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial, sans-serif;color:#000000;cursor:pointer;padding:17px 20px;background-repeat:repeat; ul#mainmenu ul li float:none;margin:7px 0 0; ul#mainmenu ul a text-align:left; padding:5px 15px; background-color:transparent; color:#EDC1BF; text-decoration:none; text-shadow:0 1px 1px #000; ul#mainmenu li:hover>a, ul#mainmenu li a.pressed color:#FFFFFF;text-decoration:none; ul#mainmenu img border:none;vertical-align:middle;margin-right:17px; ul#mainmenu ul span background-image:none; padding-right:5px; ul#mainmenu ul li:hover>a, ul#mainmenu ul li a.pressed background-color:#BC433D;color:#ffffff;text-decoration:none;text-shadow:0 1px 1px #000; ul#mainmenu li.menutop>a background-color:#201816; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;color:#fff; ul#mainmenu li.menutop:hover>a, ul#mainmenu li.menutop a.pressed background-color:#000;color:#FFFFFF;

Jika sudah selanjutnya kalian cabut aba-aba penyeru menu dropdown dibawah ini.

Langkah 2: Silahkan kalian letakan aba-aba dibawah ini tepat diatas diantara menu blog sudah di template kalian sebelumnya



<!-- Start menu multi dropdown-->
<nav>
<ul class='menutop' id='mainmenu'>
    <li class='menutop'><a href='#' title='Home'>Home</a>
    </li>
    <li class='menutop'><a href='#' title='Product Info'>Product info</a>
        <ul>
            <li><a href='#'>Features</a>
            </li>
            <li><a href='#' title='Installation'>Installation</a>
                <ul>
                    <li><a href='#'>Description of files</a>
                    </li>
                    <li><a href='#'>How to setup</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Parameters info</a>
            </li>
            <li><a href='#' title='Supported browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>CSS3 info</a>
            </li>
        </ul>
    </li>
    <li class='menutop'><a href='#' title='Samples'>Samples</a>
        <ul>
            <li><a href='#'>Android template</a>
            </li>
            <li><a href='#'>Mac template</a>
            </li>
            <li><a href='#' title='Mercury template'>Mercury template</a>
                <ul>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Lilac theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#'>Elegant template</a>
            </li>
            <li><a href='#' title='Poin Template'>Point template</a>
                <ul>
                    <li><a href='#'>Aquamarine theme</a>
                    </li>
                    <li><a href='#'>Blue theme</a>
                    </li>
                    <li><a href='#'>Green theme</a>
                    </li>
                    <li><a href='#'>Grey theme</a>
                    </li>
                    <li><a href='#'>Orange theme</a>
                    </li>
                    <li><a href='#'>Red theme</a>
                    </li>
                </ul>
            </li>
            <li><a href='#' title='Toolbars template'>Toolbars template</a>
            </li>
        </ul>
    </li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
                <ul>
                    <li><a href='#'>Firefox</a>
                    </li>
                    <li><a href='#'>Internet Explorer</a>
                    </li>
                    <li><a href='#'>Opera</a>
                    </li>
                    <li><a href='#'>Safari</a>
                    </li>
                    <li><a href='#'>Google Chrome</a>
                    </li>
                </ul>
            </li>
</ul>
    </nav>
<!-- End menu multi dropdown -->


Silahkan sebelum diterapkan edit dan sesuaikan dulu judul dan link sesuai kebutuhan. Mungkin dari saya cukupkan sekian dulu hendaknya bisa bermanfaat

"+y+""}elseif(A==5)c+='
  • '+w+""+y+"
    • "elseif(A==6)c+='
  • "+w+'

    '+u+""+y+"

    • "elsec+='
  • "+w+"
    • "}}s.innerHTML=c+=""+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]>

    Begitulah penjelasan tentang Cara membuat menu mutli dropdown di blog semoga tulisan ini menambah wawasan salam

    Tulisan ini diposting pada label tips dan trik usaha, blog gratis, tips dan trik psikotes,

    Belum ada Komentar untuk "Cara membuat menu mutli dropdown di blog"

    Posting Komentar

    Langganan: Posting Komentar (Atom)

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel