-->

Blog Yang Mempelajari Dunia Teknologi

Cara Membuat Menu Sederhana Di Blogspot

Cara membuat menu sederhana di blogspot.menu memang sangat penting bagi sebuah blog, tampa menu blog kita tak punya corak untuk peta dari sebuah artikel blog, menu biasanya sudah langung terpasang pada sebuah template,baik itu tenplate premium maupun template gratisan,sebelumnya anda juga bisa download tenplate seo di blog ini juga, kalo bicara tentang menu blog saya mempunyai menu dari rakitan laman, bagi anda yang ingin buat menu seperti blog saya anda bisa edit di gadget pages anda.


Menu memang sudah tersedia pada template,tapi ada juga template yang belum mempunyai menu disini saya akan berikan atau bagi ilmu dikit tentang Cara membuat menu sederhana di blogspot.

  1. Login ke blogger.com
  2. Klik Tap tataletak pada dasboard blog anda
  3. Tambah gadget_pilih HTML/Javascripht
  4. Lalu copas kode berikut pada kolom yang tersidia
    <style type="text/css">
    /*CSS MENU*/
    #menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
    #menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
    #menu ul{height:35px}
    #menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
    #menu li:first-child{border-left: none}
    #menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
    #menu li:hover > a,#menu li a:hover{background:#111}
    #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
    #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
    #menu label span{font-size:12px;position:absolute;left:35px}
    #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
    #menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
    #menu li:hover ul.menus{display:block}
    #menu a.home {background: #c00;}
    #menu a.sub{padding:0 27px 0 14px}
    #menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
    #menu ul.menus a:hover{background:#333;}</style>
    
    <!-- Mulai Area Menu -->
    <nav id="menu">
    <input type="checkbox" />
    <label>≡Navigation</label>
    <ul>
    <li><a class="home" href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Daftar Isi</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Login Admin</a></li>
    <!-- Mulai Area Menu Dropdown -->
    <li><a class="sub" href="#">Menus</a>  <ul class="menus">
    <li><a href="#" title="Kode Warna HTML">Menus 1</a></li>
    <li><a href="#">Page Protected</a></li>
    <li><a href="#">Menus2</a></li>
    <li><a href="#">Menus 3</a></li>
    <li><a href="#" target="_blank">Menus 4</a></li>
    <li><a href="#">Menus 5</a></li>
    </ul>
    </li>
    <!-- Area Dropdown Selesai-->  </ul>
    </nav>
    <!-- Area Menu Selesai-->  
  5. Tanda ( # ) pagar adalah URL tujuan dan menus atau sejenisnya adalah nama yang akan ditampilkan pada blog anda
  6. Jika sudah klik simpan/save
  7. Lihat hasilnya
Silahkan di coba gan mudah-mudahan bisa berhasil dan bermamfaat bagi agan semua,mungkin hanya itu saja yang dapat saya sampaikan pada artikel ini salah dan janggal saya mohon maaf.Saya ahiri tentang Cara membuat menu sederhana di blogspot, dan jika ada tangapan anda pada arikel ini silahkan anda berkomentar.
Terimakasih.Wassalam

Previous
Next Post »

Posting Komentar

Bagaimana saran anda tentang artikel ini atau apakah anda mempunyai pertanyaan tentang artikel ini !!!!

Formulir Kontak

Nama

Email *

Pesan *