› › ›

Cara membuat menu mutli dropdown di blog

Ditulis oleh Rabu, 25 September 2019 Tambah Komentar Edit

Hohoho, selamat sore di blog AUTOGOBLOOG , pada kali ini akan dibahas tentang cara membuat email Cara membuat menu mutli dropdown di blog simak selengkapnya

Di postingan abdi kali ini hendak memberikan Cara melaksanakan menu mutli dropdown di blog untuk sahabat ikhwan yang lagi mencari ide untuk melaksanakan menu dropdown di blongnya agak-agak ini bisa menjadi pilihan untuk bisa kalian gunakan.

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

nah untuk sahabat ikhwan yang berminat menggunakannya bisa ikuti langkah enteng dibawah ini.

Langkah 1:Kalian buka halaman blogger Pilih isu ✔ Edit Html ✔ Letakan aba-aba 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 pernah kemudian kalian ambil aba-aba penyeru menu dropdown dibawah ini.

Langkah 2: Silahkan kalian letakan aba-aba dibawah ini tepat diatas diantara menu blog pernah 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 abdi cukupkan sekian dulu semoga bisa bermanfaat

Di postingan abdi kali ini hendak memberikan Cara melaksanakan menu mutli dropdown di blog untuk sahabat ikhwan yang lagi mencari ide untuk melaksanakan menu dropdown di blongnya agak-agak ini bisa menjadi pilihan untuk bisa kalian gunakan.

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

nah untuk sahabat ikhwan yang berminat menggunakannya bisa ikuti langkah enteng dibawah ini.

Langkah 1:Kalian buka halaman blogger Pilih isu ✔ Edit Html ✔ Letakan aba-aba 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 pernah kemudian kalian ambil aba-aba penyeru menu dropdown dibawah ini.

Langkah 2: Silahkan kalian letakan aba-aba dibawah ini tepat diatas diantara menu blog pernah 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 abdi cukupkan sekian dulu semoga 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 perihal Cara membuat menu mutli dropdown di blog semoga artikel ini bermanfaat terima kasih

    Tulisan ini diposting pada label cara membuat email, blog pribadi, cara menghilangkan komedo,

    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