› ›

Cara membuat menu mutli dropdown di blog

Ditulis oleh Rabu, 25 September 2019 Tambah Komentar Edit

Hallo, bertemu kembali di blog AUTOGOBLOOG , artikel ini akan menjelaskan tentang cara membuat slime Cara membuat menu mutli dropdown di blog simak selengkapnya

Di postingan saya kali ini hendak cekit Cara melaksanakan menu mutli dropdown di blog untuk bendu yang berulang mencari ide untuk melaksanakan menu dropdown di blongnya agak-agak ini bisa menjadi alternatif untuk bisa kalian gunakan.

Untuk cara membuat Cara melaksanakan menu mutli dropdown di blog terbilang mudah untuk bisa di terapkan di blog.

nah untuk bendu yang berminat menggunakannya bisa ikuti langkah mudah dibawah ini.

Langkah 1:Kalian buka jerambah blogger Pilih tema ✔ Edit Html ✔ Letakan kode ini tepata diatas </style> atau ]]></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 kemudian kalian ambil kode pemanggil menu dropdown dibawah ini.

Langkah 2: Silahkan kalian letakan kode 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 setelah diterapkan edit dan sesuaikan dahulu judul dan link sesuai kebutuhan. Mungkin dari saya cukupkan sekian dahulu hendaknya bisa bermanfaat

Di postingan saya kali ini hendak cekit Cara melaksanakan menu mutli dropdown di blog untuk bendu yang berulang mencari ide untuk melaksanakan menu dropdown di blongnya agak-agak ini bisa menjadi alternatif untuk bisa kalian gunakan.

Untuk cara membuat Cara melaksanakan menu mutli dropdown di blog terbilang mudah untuk bisa di terapkan di blog.

nah untuk bendu yang berminat menggunakannya bisa ikuti langkah mudah dibawah ini.

Langkah 1:Kalian buka jerambah blogger Pilih tema ✔ Edit Html ✔ Letakan kode ini tepata diatas </style> atau ]]></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 kemudian kalian ambil kode pemanggil menu dropdown dibawah ini.

Langkah 2: Silahkan kalian letakan kode 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 setelah diterapkan edit dan sesuaikan dahulu judul dan link sesuai kebutuhan. Mungkin dari saya cukupkan sekian dahulu 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]); //]]>

    Sekian pembahasan perihal Cara membuat menu mutli dropdown di blog semoga tulisan ini bermanfaat terima kasih

    Artikel ini diposting pada tag cara membuat slime, cara cek kuota xl,

    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