semua artikel mantap
» » Cara Membuat Menu Drop-Down Di Blog

Cara Membuat Menu Drop-Down Di Blog

Cara Membuat Menu Drop-Down Di Blog - Navigasi menu atau menu drop-down membuat blog atau website menjadi seo friendly dan memungkinkan pengunjung Anda untuk dengan mudah menavigasi posting blog Anda dengan cara memilih kategori dari menu tersebut. Menu navigasi yang berperan penting dalam pengembangan blog Anda, baik website seperti Mashable atau sebuah blog yang baru dibuat, menu drop-down adalah elemen penting dari setiap situs web. Membuat blog Anda menjadi lebih menjadi seo friendly, mudah dinavigasi dan juga menambah tampilan yang baru dan unik desain Anda dan membuatnya terlihat profesional.

Setelah membaca semua keuntungan ini jika Anda ingin menambahkan menu Drop Down ke Blog atau situs web Anda, setelah itu didalam tutorial ini saya akan berbagi  kepada Anda bagaimana cara  membuat Drop Down Menu di blog dengan mudah.

Cara membuat Menu Drop-Down Di Blog
contoh Menu Drop-Down Di Blog

Cara mudah membuat Menu Drop-Down di Blog


Pertama anda harus, log in ke Blogger Account Anda >> pilih Blog >> Template dan klik Edit HTML. Klik di dalam daerah kode template dan cari menggunakan Ctrl + F  mencari ]] > </b:skin> tag. Sekarang Salin kode di bawah ini dan paste di atas kode ( ]] > </b:skin> ).

body {
margin: 0px;
}
#menu{
background: #3EA9AC;
color: #fff;
height: 40px;
text-transform:uppercase;
border-bottom: 2px solid #3EA9AC;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 1px solid #3EA9AC;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:'Open Sans',Helvetica,Arial,sans-serif;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #fff;
}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:'Open Sans',Helvetica,Arial,sans-serif;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #3EA9AC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:'Open Sans',Helvetica,Arial,sans-serif;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

Setelah itu cari lagi kode <body> dan pastekan code di bawah kode <body>

<nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Blogolect</span></label>
    <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down 1<font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab No 1</a></li>
    <li><a href='#'>Tab No 2</a></li>
    <li><a href='#'>Tab No 3</a></li>
    <li><a href='#'>Tab No 4</a></li>
    <li><a href='#'>Tab No 5</a></li>
    <li><a href='#'>Tab No 6</a></li>
     </ul>
    </li>
    <li><a href='#'>Services</a></li>
    <li><a href='#'>Drop Down 2<font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab No 1</a></li>
    <li><a href='#'>Tab No 2</a></li>
    <li><a href='#'>Tab No 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
           </ul>
        </nav>

Ganti kode Blogolect dengan nama Blog Anda
Dan ganti juga kode # dengan link dan mengubah nama kategori blog anda
Jangan lupa klik Simpan dan selesai


Semoga  artikel ini dapat membantu Anda untuk membuatmenu drop-down untuk blog Anda. bagikan artikel ini dengan teman-teman Anda dan jangan lupa untuk berlangganan . trimakasih


Baca juga : Cara Mudah Membuat Banner Dan Logo Blog
Tag : blogger
0 Komentar untuk "Cara Membuat Menu Drop-Down Di Blog"

Back To Top