Popular Post

Posted by : RAYPHOTOWORKS CIKARANG Jumat, 01 Februari 2013


Di atas adalah gambar menu horiontal yang akaan kita buat

Berikut adalah langkah 2 nya :
  1. Login pada Blogger
  2. Pilih Template >> Edit HTML >> Lanjutkan
  3. Cari ]]></b:skin>
  4. Letakkan kode berikut diatas ]]></b:skin>
    /* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsA5tMi6qwDXzA7Sfgvj8YohI048P4cFM_8yBzpC74_uiNEEYO_2vy2Umb7zge86mbTcUHYqWixzMEMFUjmj5BB3rjChKX2Gt2pZUYkdonuROKJf3qtEuK9UZ5IyRswM8AeA7esV5znt8/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;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;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3t8-5wyTZseLj07aTJpDSQlslfLABX0CS2e8QZkpehdcDDJ8WkJZ84RJWGtgQgSzVQTSxhsKuxyONIhPqT7gsrThx2rnlOiBc3DA7NvVBBWftyQGwvehW7WXr4kcuFnorf1vaC4-wjrQ/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 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}
  5. Selanjutnya cari kode <header> atau </header>
  6. Letakkan kode berikut diatas di atas kode <header> atau di bawah kode</header> 
    <div id='menuwrapperpic'>
    <div id='menuwrapper'>
    <ul id='menubar'>
    <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbS1zOE8XFcNxeyWcu64lwvjhOPM29YjY3AJvsy48ZBMHdtxGZTBnPKcHiGcpdwd0wwDom_fP2gFe8YYKG7-82NMzX3WiYIlJa0RrWEWFY01OadKvFK2MNs82vhGWVWNJclyET_PQF_MI/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
    <li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
    <li><a class='trigger'>Menu1</a>
    <ul>
    <li><a href='#' target='new'>Dropdown</a></li>
    <li class='hr'/>
    <li><a href='#' target='new'>Dropdown</a></li>
    <li><a href='#' target='new'>Dropdown</a></li>
    <li><a href='#' target='new'>Dropdown</a></li>
    </ul>
    </li>
    <li><a href=http://www.katakan-hey.com/' target='new'>Katakan Hey</a></li>
    <li><a class='trigger'>Menu2</a>
    <ul>
    <li><a href='#' >Dropdown</a></li>
    <li class='hr'/>
    <li><a href='#' >Dropdown</a></li>
    <li class='hr'/>
    <li><a href='#' >Dropdown</a></li>
    <li class='hr'/>
    </ul>
    </li>
    <li><a class='trigger'>Menu3</a>
    <ul>
    <li><a href='#' >Dropdown</a></li>
    <li class='hr'/>
    <li><a href='#' >Dropdown</a></li>
    <li class='hr'/>
    </ul>
    </li>
    </ul><div class='menusearch'>
    <div style='float:right;padding:8px 8px 0 0;'>
    <form action='http:// www.ke-u.blogspot.com/search' method='get' target=''>
    <input name='sitesearch' style='display:none;' value='http:// www.ke-u.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:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEIUqm3MNir12zdrRRFyjiriCLQr4j8O425FTaJpScSTMfSxTNENCkCbZ2SfYN_moY3lTnmeijWMcmq5gCjgSebIyWJ8UGST46c4Ktzz1QFa2QRMBYIqoAwaIsjX94VcE4E7m_eOTsbq4/s1600/field-bg.gif) no-repeat;' type='text' value='Searc ...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qIgK5LTWn6SOWaJpssdxH5HFaB-AHwtJhXJ6IvozcDg6Dacv-LvNwxW5uFivoPiEo5X5oOPI7ubnf7I1LlhAfqX6_AJZ_NQcqyrVIr6SdytqDz2eVyUb9Qkl-fZxV0BLSpl9k5RF5-8/s1600/bg_search.gif' type='image' value='Search'/>
    </form></div></div></div></div>
    *Keterangan :
    • Menu Ganti dengan nama menu Anda
    • Dropdown Ganti dengan nama menu dropdown Anda
    • www.ke-u.blogspot.com Ganti dengan alamat URL blog / web Anda
SELAMAT MENCOBA......

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Azt Syarif - Azak web - Powered by Blogger - Designed by Johanes Djogan -