Cara Membuat Menu Drapdown Di Blogger




Cara Membuat Menu Drapdown Di Blogger
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.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect