Jumat, 17 Agustus 2012

Tehnik Membuat Menu Dropdown Horizontal


Kembali Resep Tutorialnya. Master Chip creativityforindonesia Blogspot Saat ini  akan Menyampaikan Resep Tehnik Membuat Menu Dropdown Horizontal Plus Search Enggine Blog M.1 . Untuk Mendapatkan Resep Menu Dropdown tidaklah sesulit yang sobat bayangkan. apabila sobat tau triknya dalam 5 menit sobat bisa memasang menu dropdown pada halaman blog sobat. Menu Dropdown memang banyak sekali di gunakan oleh para blogger karena dapat membantu para visitor mencari apa yang mereka butuhkan dan dapat pula mempercantik tampilan pada blog sobat.Fungsi lainnya silahkan sobat cari sendiriya.



Ok Langsung saja kita bahas langkah-langkahnya.
  1. Tetap Seperti biasa anda harus login ke akun blogger anda
  2. Pilih menu "Template"


  3. Klik Tombol Edit HTML


  4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


  5. Jangan lupa Centang Expand Template Widget.


  6. Sekarang silahkan anda Download lengkap template anda untuk mengantisifasi kesalahan Saat anda melakukan Edit HTML.(Baca Caranya DISINI ) 
  7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode)
  8. Sudah Ketemu Copas Kode Berikut dan letakan diatas kode ]]></b:skin> 
    9. /* Menu Horizontal Dropdown
    ----------------------------------------------- */
    #menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2omDFFhe_vNdLPuebIcgMRQJw9BKCXTH_jg64NQAbXW02GiIz5zQnU3B5weUpAOWCm_GXPbDN3dt300qtlEfqtjMUboDQ5NR5V9VE2wATnERv00mRFav0NRFf9eiZtDeiEa6yUMeht7E/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
    #menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
    .clearit{clear:both;height:0;line-height:0.0;font-size:0}
    #menubar{width:100%}
    #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
    #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
    #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmvZ2lChTF-oJZlWDSQifj0oAv1etNjvLcBLjPBPyU4JYYWfiz7T65v2cdR_402o5WPSvi5TQ139qk-nNACQBi5Gzck_IviPEU_XTAoLTtdr9khd6X6VYBbD1-ZeqRGSrMLeM81ONBiZo/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
    #menubar li{float:left;position:static;width:auto}
    #menubar li ul,#menubar ul li{width:170px}
    #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
    #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
    #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
    #menubar li:hover ul,#menubar li.hvr ul{display:block}
    #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
    #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
    #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
  9. Kemudian Cari kode Berikut
    10. <div id='header-wrapper'>    
    .............
    </b:section>
        </div>

    Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

    <div class='header-outer'>
        ...............................
    </b:section>
        </div>
  10. Setelah anda menemukan salah satu kode diatas Copas Kode Dibawah ini dan letakan dibawah kode diatas.
    11. <div id='menuwrapperpic'>
    <div id='menuwrapper'>
    <ul id='menubar'>
    <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5XBU3VehnN6RcEpL7EUhPOJt5CngsoY_UjBFdJeYdHxpYhScSM1oUc3Yv4BtyUCEzs6pjC7OSKHgPwOAkh-ZiRFZrQCFKjZwpJw39ELvRBTd7MKAaW5_JP7_HWn-OdDr8qHckOIEYHso/s1600/home_white.png' style='padding:0px;'/></a></li>
    <li><a href='#'>About Us</a></li>
    <li><a class='trigger' href='#'>Contact Us</a>
    <ul>
    <li><a href='#'>Goggle +</a></li>
    <li class='hr'/>
    <li><a href='#'>Contact on Facebook</a></li>
    <li class='hr'/>
    <li><a href='#'>Contact on Twitter</a></li>
    </ul>
    </li>
    <li><a href='#'>Sport</a></li>
    <li><a href='#'>Culture</a></li>
    <li><a class='trigger' href='#'>Entertainment</a>
    <ul>
    <li><a href='#'>Music</a></li>
    <li class='hr'/>
    <li><a href='#'>Movie</a></li>
    <li class='hr'/>
    <li><a href='#'>Television</a></li>
    </ul>
    </li>
    <li><a href='#'>Health</a></li>
    <li><a class='trigger' href='#'>More</a>
    <ul>
    <li><a href='#'>Themes</a></li>
    <li class='hr'/>
    <li><a href='#'>Tutorial</a></li>
    <li class='hr'/>
    <li><a href='#'>Resource</a></li>
    <li class='hr'/>
    <li><a href='#'>Advertise</a></li>
    <li class='hr'/>
    <li><a href='#'>Javascript</a></li>
    </ul>
    </li>
    </ul>
    <div class='menusearch'>
    <div style='float:right;padding:4px 8px 0 0;'>
    <form action='http://www.google.com/search' method='get' target='_blank'>
    <input name='sitesearch' style='display:none;' value='http://URL-blog.blogspot.com'/>
    <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_8LIh3M3hU06u7gMZZuIexqWYbNKDeNT5mf9h7lWCuguwA_dQWzhrenkpxngWW3v4h1-ssb2kxWt-pjmUfq8aGv5NVXP4vc8Vokq7wHxp2FA1IljjAr3adCOztmUVSJo4Uisc5OARncM/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SPOA_OGKmREIgh-wKzGE_eueualiEFePJtdOHReLMFdnasl4PfR1HiagPvOtQjn_Q3QIqTnaB9F7QWkKike37_Y2KPFh7RJbaWfKzDRGCEiIBPmgAwbPX9zBdKniALKpKVLjYxIWuVg/s1600/bg_search.gif' type='image' value='Search'/>
    </form>
    </div>
    </div>
    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
  11. Sehingga Susunannya Menjadi Seperti Ini
    12. <div id='header-wrapper'>    
    .............
    </b:section>
        </div>


    <div id='menuwrapperpic'>
    <div id='menuwrapper'>
    <ul id='menubar'>
    <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5XBU3VehnN6RcEpL7EUhPOJt5CngsoY_UjBFdJeYdHxpYhScSM1oUc3Yv4BtyUCEzs6pjC7OSKHgPwOAkh-ZiRFZrQCFKjZwpJw39ELvRBTd7MKAaW5_JP7_HWn-OdDr8qHckOIEYHso/s1600/home_white.png' style='padding:0px;'/></a></li>
    <li><a href='#'>About Us</a></li>
    <li><a class='trigger' href='#'>Contact Us</a>
    <ul>
    <li><a href='#'>Goggle +</a></li>
    <li class='hr'/>
    <li><a href='#'>Contact on Facebook</a></li>
    <li class='hr'/>
    <li><a href='#'>Contact on Twitter</a></li>
    </ul>
    </li>
    <li><a href='#'>Sport</a></li>
    <li><a href='#'>Culture</a></li>
    <li><a class='trigger' href='#'>Entertainment</a>
    <ul>
    <li><a href='#'>Music</a></li>
    <li class='hr'/>
    <li><a href='#'>Movie</a></li>
    <li class='hr'/>
    <li><a href='#'>Television</a></li>
    </ul>
    </li>
    <li><a href='#'>Health</a></li>
    <li><a class='trigger' href='#'>More</a>
    <ul>
    <li><a href='#'>Themes</a></li>
    <li class='hr'/>
    <li><a href='#'>Tutorial</a></li>
    <li class='hr'/>
    <li><a href='#'>Resource</a></li>
    <li class='hr'/>
    <li><a href='#'>Advertise</a></li>
    <li class='hr'/>
    <li><a href='#'>Javascript</a></li>
    </ul>
    </li>
    </ul>
    <div class='menusearch'>
    <div style='float:right;padding:4px 8px 0 0;'>
    <form action='http://www.google.com/search' method='get' target='_blank'>
    <input name='sitesearch' style='display:none;' value='http://URL-blog.blogspot.com'/>
    <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_8LIh3M3hU06u7gMZZuIexqWYbNKDeNT5mf9h7lWCuguwA_dQWzhrenkpxngWW3v4h1-ssb2kxWt-pjmUfq8aGv5NVXP4vc8Vokq7wHxp2FA1IljjAr3adCOztmUVSJo4Uisc5OARncM/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SPOA_OGKmREIgh-wKzGE_eueualiEFePJtdOHReLMFdnasl4PfR1HiagPvOtQjn_Q3QIqTnaB9F7QWkKike37_Y2KPFh7RJbaWfKzDRGCEiIBPmgAwbPX9zBdKniALKpKVLjYxIWuVg/s1600/bg_search.gif' type='image' value='Search'/>
    </form>
    </div>
    </div>
    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
  12. Kemudian Klik Simpan Template dan selesai........!

Keterangan : 
 #  Ganti Dengan URl yang ingin anda masukan ke Menu Dropdown
width:960px; Panjang Menu Drop Down Horizontal yang bisa nda sesuaikan dengan template blog anda
http://URL-blog.blogspot.comGanti Dengan URL Blog atau Alamat Blog anda

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Page Navigation byhttp://creativityforindonesia.blogspot.com

Artikel Via Email

Dapatkan Update Artikel B-digg Via Email
Jika anda suka dengan artikel yang ada di blog ini, silahkan untuk berlangganan artikel blog ini via email gratis. Isikan alamat email anda di bawah ini!!