Cara Membuat Menu Drapdown Di Blogger Cara Membuat Menu Drapdown Di Blogger - mizipediacom mizipediacom: Cara Membuat Menu Drapdown Di Blogger










KATEGORI

LIVE TV

Iklan Semua Halaman

Cara Membuat Menu Drapdown Di Blogger

Sabtu, 25 Maret 2017



Cara Membuat Menu Drapdown Di Blogger


Hallo gan pada kesempatan ini saya akan memberikan cara untuk membuat menu di blog, mengkin barangkalai anda sudah bosen dengan sub menu di blog anda, mungkin ingin menggantikan nya dengan menu yang keren dan gokil. anda bisa membaca  dan mengikuti tutorial ini ya.

Untuk tutorial kali ini saya tidak menjelaskan panjang lebar, hanya cara pembuatannya, karena mungkin anda males membaca lama-lama bukan.

Nah jika anda sudah tidak sabar lagi untuk cara membuat nya anda bisa mengikuti cara nya di bawah ini ya mas bro.

Langkah-LAngkahnya:
  1. Pertama , pastikan anda udah masuk di dasbhor anda sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode  ]]></b:skin> (untuk cepat pencarian tekan CTRL+F)
    /*----------------------------------------------------------------
    Blog Tutorial Yang Mebahas Tentang, Blog, Template, Html, Dll.
    Oleh: Admin Youtube
    Blog: Admin -:[mizipedia.com]:-
     ------------------------------------------------------------------*/
    body{color:#444;height:100%;font-family:Arial, Helvetica, Tahoma, sans-serif;font-size:12px;font-weight:400;line-height:22px;text-decoration:none;margin:0;padding:0}
    a,a:link,a:visited{color:#2560aa;text-decoration:none}
    a:hover,a:active{color:#222;text-decoration:none}
    h2.date-header,.tagblog,.tagblog2,.headtitle3,.quickedit { display:none; }
    /* Navigation */
    .navwrap { width:100%; margin:0 auto; margin-bottom:15px; padding:0 auto; border-bottom:3px solid #ffcc00; }
    #main-nav{background-color:#232323;border:1px solid #131313;font-family:&#39;Roboto&#39;,Arial,sans-serif}
    .index #main-nav{border-bottom:1px solid #131313}
    #main-nav ul,#main-nav li{margin:0;padding:0;list-style:none;height:35px}
    #main-nav li{float:left;display:inline;position:relative;height:auto}
    #main-nav a{display:block;line-height:35px;border-left:1px solid #333;border-right:1px solid #111;color:#aaa;text-decoration:none;padding:0 1.8em}
    #main-nav li.home-menu a{border-left:none}
    #main-nav li ul{background-color:#232323;border:0;position:absolute;top:100%;left:0;width:170px;height:auto;z-index:88888;-webkit-box-shadow:0 1px 5px #222;-moz-box-shadow:0 1px 5px #222;box-shadow:0 1px 5px #222;display:none}
    #main-nav li li{float:none;display:block;border-top:1px solid #444;border-bottom:1px solid #222}
    #main-nav li ul a{height:33px;line-height:33px;padding:0 .8em 0 1.2em;font-size:89%}
    #main-nav li a:hover,#main-nav li a:focus,#main-nav li:hover&gt;a{color:#666}
    #main-nav li:hover ul.hidden{display:block}
  4. Kemudian anda copy kode di atas ini dan pastekan di atas kode ]]></b:skin>
  5. Dan tahap selanjutnya anda cari kode </header> (untuk cepat pencarian tekan CTRL+F)
  6. Copy code di bawah ini dan pastekan di atas </header>
    <div class='navwrap' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
    <nav id='main-nav' itemprop='name'>
    <ul>
    <li class='depan'><a href='/'><i class='fa fa-home'/>
     Beranda</a></li>
    <li class='drop-down'><a href='http://www.mizipedia.com/' title='Blogging'><i class='fa fa-plug'/> Blogging</a>
    <ul class='hidden'>
    <li><a href='http://www.mizipedia.com/' target='_blank' title='Template Blog'><i class='fa fa-paint-brush'/> Template Blog</a></li>
    <li><a href='http://www.mizipedia.com/' target='_blank' title='Menu Blog'><i class='fa fa-indent'/> Template Blog</a></li>
    <li><a href='http://www.mizipedia.com/' target='_blank' title='Trik Blog Soe'><i class='fa fa-signal'/> Trik Blog Soe</a></li>
    <li><a href='http://www.mizipedia.com/' target='_blank' title='Widget Blog'><i class='fa fa-list-ul'/> Widget Blog</a></li>
    <li><a href='http://www.mizipedia.com/' target='_blank' title='Trik Adsense'><i class='fa fa-money'/> Trik Adsense</a></li>
    </ul>
    </li>
    <li class='drop-down'><a href='http://www.mizipedia.com/' title='Warnet'><i class='fa fa-desktop'/> Warnet</a>
    <ul class='hidden'>
    <li><a href='http://www.mizipedia.com/' title='Tutorial Billing'><i class='fa fa-newspaper-o'/> Billing</a></li>
    <li><a href='http://www.mizipedia.com/' title='Point Blank'><i class='fa fa-wheelchair'/> Point Blank</a></li>
    </ul>
    </li>
    <li class='drop-down'><a href='http://www.mizipedia.com/' title='Tools'><i class='fa fa-cogs'/> Tools</a>
    <ul class='hidden'>
    <li><a href='http://www.mizipedia.com/' title='Color HTML Generator'><i class='fa fa-link'/> Color HTML Generator</a></li>
    <li><a href='http://www.mizipedia.com/' title='ADS Converter'><i class='fa fa-compress'/> ADS Code Converter</a></li>
    <li><a href='http://www.mizipedia.com/' title='Font Awisome'><i class='fa fa-font'/> Font Awisome</a></li>
    </ul>
    </li>
    <li class='drop-down'><a href='http://www.mizipedia.com/' title='Generator'><i class='fa fa-retweet'/> Generator</a>
    <ul class='hidden'>
    <li><a href='http://www.mizipedia.com/' title='Google Drive Download Link Generator'><i class='fa fa-link'/> Google Drive</a></li>
    <li><a href='http://www.mizipedia.com/' title='Photoshop Online'><i class='fa fa-picture-o'/> Photoshop</a></li>
    <li><a href='http://www.mizipedia.com/' title='Safe Link Converter'><i class='fa fa-random'/> Safe Link Converter</a></li>
    <li><a href='http://www.mizipedia.com/' title='HTML Live Editor'><i class='fa fa-sliders'/> HTML Live Editor</a></li>
    </ul>
    </li>
      <li class='drop-down'><a href='http://www.mizipedia.com/' title='Komputer/Laptop'><i class='fa fa-windows'/> Windows</a>
    <ul class='hidden'>
    <li><a href='http://www.mizipedia.com/' title='Driver'><i class='fa fa-code-fork'/> Driver</a></li>
    <li><a href='http://www.mizipedia.com/' title='Aplikasi'><i class='fa fa-hdd-o'/> Aplikasi</a></li>
     <li><a href='http://www.mizipedia.com/' title='Software'><i class='fa fa-inbox'/> Software</a></li>
    <li><a href='http://www.mizipedia.com/' title='Windows 32Bit'><i class='fa fa-th-large'/> Windows Iso</a></li>
    </ul>
    </li>
    <li class='drop-down'><a href=http://www.mizipedia.com/' title='Games Pc'><i class='fa fa-laptop'/> Game Pc</a>
    <ul class='hidden'>
    <li><a href='http://www.mizipedia.com/' title='Game rip'><i class='fa fa-gamepad'/> Game Rip</a></li>
    <li><a href='http://www.mizipedia.com/' title='Game Action'><i class='fa fa-gamepad'/> Game Action</a></li>
    <li><a href='http://www.mizipedia.com/' title='Game Racing'><i class='fa fa-gamepad'/> Game Racing</a></li>
    <li><a href='http://www.mizipedia.com/' title='Game Arcade'><i class='fa fa-gamepad'/> Game Arcade</a></li>
    <li><a href='http://www.mizipedia.com/' title='Game Horor'><i class='fa fa-gamepad'/> Game Horor</a></li>
    </ul>
    </li>
    <li class='drop-down'><a href='http://www.mizipedia.com/' title='Flash Android'><i class='fa fa-android'/> Android</a>
    <ul class='hidden'>
    <li><a href='http://www.mizipedia.com/' title='Apple'><i class='fa fa-tablet'/> Apple</a></li>
    <li><a href='http://www.mizipedia.com/' title='Apple'><i class='fa fa-tablet'/> Asus</a></li>
    <li><a href='http://www.mizipedia.com/' title='Blackberry'><i class='fa fa-tablet'/> Blackberry</a></li>
    <li><a href='http://www.mizipedia.com/' title='Evercoss'><i class='fa fa-tablet'/> Evercoss</a></li>
    <li><a href='http://www.mizipedia.com/i' title='Huawei'><i class='fa fa-tablet'/> Huawei</a></li>
    <li><a href='http://www.mizipedia.com/' title='Lenovo'><i class='fa fa-tablet'/> Lenovo</a></li>
    <li><a href='http://www.mizipedia.com/' title='Nexcom'><i class='fa fa-tablet'/> Nexcom</a></li>
    <li><a href='http://www.mizipedia.com/' title='Samsung'><i class='fa fa-tablet'/> Samsung</a></li>
    <li><a href='http://www.mizipedia.com/' title='Oppo'><i class='fa fa-tablet'/> Oppo</a></li>
    <li><a href='http://www.mizipedia.com/' title='Advan'><i class='fa fa-tablet'/> Advan</a></li>
    </ul>
    </li>
    </ul>
    </nav>
    </div>
    </div>
  7. Jika sudah anda lakukan seperti yang saya jelaskan di atas
  8. Maka anda klik Save/simpan
NOTE: Anda gantikan  http://www.mizipedia.com/ ke alamat URL Anda.

Nah menurut saya sangat mudah sekali kan untuk membuatnya, jika ada yang ingin di tanyakan karena kurang jelas, silahkan klik tombol comentar di bawah ini, saya akan membantu.
Dan semoga bermanfaat selamat mencoba ya mas broo.
Lihat Juga