Cara mudah Membuat Tombol Menu di Blog

Setelah sobat membuat blog dan mulai banyak atrikel yang diposting, tentunya sobat berfikir bagaimana cara membuat tombol menu agar artikel sobat mudah dikelompokan berdasarkan kategori tertentu. Disamping itu dengan adanya tombol menu, pengunjung blog sobat akan betah mengunjungi blog sobat, karena semakin mudah pembaca untuk mencari artikel dengan kategori yang diinginkan.
Bagi yang sudah lama bergelut di dunia blogging, tentunya cara membuat tombol untuk mempercantik blog sangatlah mudah. Tetapi untuk yang pertama kali terjun di landasan blogging, mengetahui cara membuat tombol menu di blog kesayangan tentulah sangat sulit. Untuk itu saya akan memberikan langkah-langkah atau cara mudah membuat tombol menu di blog kesayangan sobat agar semakin menarik. Okkkee... langsung saja, saya akan memberikan langkah-langkah membuat tombol menu untuk mempercantik blog sobat.

Langkah-langkah membuat tombol menu untuk mempercantik blog sobat.

  1. Log In / masuk ke Blogger.com
  2. Setelah itu masuk ke blog yang akan sobat tambahkan tombol menu 
  3. Klik menu Tata Letak pada tampilan  Blog Saya
  4. Perhatikan pada tampilan Tata Letak
  5. Pada tampilan tata letak pilih kolom yang lebar, dalam hal ini saya memilih Cross Colum klik tombol Edit (Lihat gambar diatas). Selanjutnya pilih HTML/JavaScript untuk memasukan script ke konten.
  6. Masukan kode Script di bawah ini ke dalam konten dengan cara di copy, lalu paste pada bagian Konten. 

  7. <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="Menus">Menus 1</a></li>


    <li><a href="#">Page</a></li>


    <li><a href="#">Menus2</a></li>


    <li><a href="#">Menus 3</a></li>


    <li><a href="#">Menus 4</a></li>


    <li><a href="#">Menus 5</a></li>


    </ul>


    </li>


    <!-- Area Dropdown Selesai--> </ul>


    </nav>


    <!-- Area Menu Selesai-->

  8. Setelah selesai klik Simpan.
    Pada tahap ini, menu yang sobat buat sudah jadi, akan tetapi belum sesuai dengan menu yang sobat inginkan, untuk itu lanjut ke tahap berikutnya.

 

Langkah-langkah Mengedit Menu 

Perhatikan skrip setelah bagian kode, <!-- Mulai Area Menu --> 

 ubahlah tanda pagar dengan dengan alamat web atau url yang anda inginkan, dan untuk membuat nama menu yang sobat inginkan, edit/ganti pada bagian About, Daftar Isi, Menu, Menu 2, dst...
Setelah selesai mengubah menu menjadi yang anda inginkan, klik simpan. Sekarang lihat perubahan pada tampilan blog sobat. Baca juga cara memasukan postingan ke menu blog, untuk melihat bagaimana cara memasukan artikel/postingan anda kedalam menu blog.
Demikianlah cara mudah Membuat Tombol Menu di Blog. Semoga bermanfaat.

Ikuti Untuk Mendapatkan Update Artikel Terbaru :

0 Response to "Cara mudah Membuat Tombol Menu di Blog"

Post a Comment