Cara membuat Menu Dropdown Bergambar | Gio Komputer

Wednesday, December 10, 2014

Cara membuat Menu Dropdown Bergambar

Menu Dropdown

Setiap Blogger yang rajin mengupdate websitenya dan apalagi sering melakukan blogwalking, maka pasti ia akan tertarik dengan penampilan blognya para tetangga, lalu pastilah akan mencari tahu bagaimana mereka bisa melakukannya.
Tips dari saya, untuk melakukan blogwalking jangan pernah merasa putus asa atau gampang menyerah, karena kalau kamu sedang tidak beruntung maka tutorial yang kalian temukan tidak akan mempan diterapkan pada blog kalian. Ini dikarenakan porsi bahasa HTML dan CSS Templat kalian mungkin berbeda dengan karakteristik Template para Tutor. Jadi teruslah mencari sampai ketemu tutorial yang kebetulan memang sama dan identik dengan blog templat yang kalian punya.

Baiklah sekarang kita mulai saja tutorialnya.
Ini contoh menunya
1. Masuk/Login blog
2. Layout
3. Add a Gadget
4. HTML/Java script
5. Kopi paste kode Css dibawah ini


 <style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
nav {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1;
  margin: 30px auto; /*for display only*/
  width: 150px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
  background: #fff;
  width: 150px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 100;
  padding: 7px 12px;
  background: #9DB6D7;
}
.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 150px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 100;
  padding: 7px 12px;
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #ff9900 0%, #cc3300 44%, #993300 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9900), color-stop(44%,#cc3300), color-stop(100%,#993300)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ff9900 00%,#cc3300 44%,#993300 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ff9900 10%,#cc3300 44%,#993300 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ff9900 0%,#cc3300 44%,#993300 100%); /* IE10+ */
  background: linear-gradient(top, #ff9900 0%,#cc3300 44%,#993300 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9900', endColorstr='#993300',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
  font-size: 13px;
  padding: 8px 12px;
  color: #aaa;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item ul a {
  margin-left: 0px;
  text-decoration: none;
  color: #0A0A0A;
  display: block;
  width: 150px;
}
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}
.menu-item li:hover {
  background: #eee;
}
/*ul Styles*/
.menu-item ul {
  background: #B2D8E0;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
  height: 200px;
}
</style>
<nav>
    <div class="menu-item">
    <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>
    <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>
    <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>    
    <ul>
        <li><a href="URL postingan" target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>
        <li><a href="URL postingan" target="_blank" imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>
    </ul>
    </div>
    <div class="menu-item">
    <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>    
    <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>    
    <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>    
    <ul>  
       <li><a href="URL postingan" target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>
       <li><a href="URL postingan" target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>
       <li><a href="URL postingan" target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>
    </ul>
    </div>

    <div class="menu-item">
    <h4><a href="URL Blog" target="_blank"">judul postingan</a></h4>    
    <ul>
    <li><a href="URL postingan " target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>
    <li><a href="Url postingan " target="_blank"imageanchor="1" style="margin-auto: 1em; margin-auto: 1em;"><img border="0" src="disini tempat url gambar" height="100" width="100" />judul postingan</a></li>
    </ul>
    </div>

    </nav>

6. Lihat hasilnya
7. Selesai

Penjelasan kode Css diatas : kita mulai dari yang teratas dahulu


.menu-item {
  background: #fff;
  width: 150px;
Ini adalah kode untuk warna background table dropnya ( #fff adalah warna putih, kalian bisa ganti dengan warna kesekaan), lebar dari table menu disini adalah : 150px, sesuaikan dengan templat kalian.

/*Menu Header Styles 2*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 100;
  padding: 7px 12px;
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #ff9900 0%, #cc3300 44%, #993300 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9900), color-stop(44%,#cc3300), color-stop(100%,#993300)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ff9900 00%,#cc3300 44%,#993300 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ff9900 10%,#cc3300 44%,#993300 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ff9900 0%,#cc3300 44%,#993300 100%); /* IE10+ */
  background: linear-gradient(top, #ff9900 0%,#cc3300 44%,#993300 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9900', endColorstr='#993300',GradientType=0 ); /* IE6-9 */
}
Menu header 1 dan menu header styles 2 sama fungsinya, hanya saja saya disini akan menambah warna background gradasi/gradient dengan warna pilihan saya pada kode menu header styles 2.
font size 15px dan font weight  100 adalah untuk mengatur besar huruf serta tinggi dari menu table tempat hurup tersebut berada.

Kemudian fungsi moz -linear- gradient top, #ff9900 0%, #cc3300 44%, #993300 100% artinya warna gradasi mulai dari atas sehingga gradasi menjadi horizontal, 0%,44% dan 100% adalah besaran untuk kombinasi warna gradasi, sesuaikan warnanya dengan kesukaan kalian.

.menu-item:hover ul
  height: 200px;
Kode yang ini untuk mengatur tinggi dropdown yang dinginkan, disini saya pakai height :200px
sesuaikan dengan besar gambar yang ingin kalian tampilkan.

Url Blog
ini adalah nama blog kalian (contoh=>  http://menudropdown.blogspot.com/)
URL postingan
dan ini adalah link Url tujuan, dimana saat pembaca mengklik gambar atau teks tersebut kita akan arahkan pembaca tersebut menuju ke alamat artikel yang kita sisipkan disini.  ( contoh =>  http://menudropdown.blogspot.com/2014/12/home.html )
Judul postingan
contoh: home, about

disini tempat url gambar
ini adalah gambar yang ingin kalian tampilkan ( contoh url gambar seperti = <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWDXoR4jEUAzbdCRw73Bm8dKzW1t3ds5KtUUDdkkqPH0DhiACYt8gnjxFYNYvC1mSBKh4dc5X74_AeDMsDRdZHqvinydOeaIGUJMv-Eg_tQt0atgblHm_lOwi5tYEiwYCXLrx8Wm_9tU/s1600/17+5960x-8core.jpg "height="100" width="100")
Besar gambar disini 100px, kalian bisa ganti sesuaikan dengan besar gambar yang diinginkan.

 Seperti itu penjelasannya, semoga bermanfaat bagi kalian semua yang ingin menambah wawasan tentang template dan ingin mempercantik tampilan blognya.
Demikian artikel Cara membuat menu dropdown bergambar kali ini, baca juga 'cara membuat menu navigasi diatas header blog'.

Keep Blogging! 

Posted by at
Labels: Blog

No comments:

Post a Comment