Cara Memasang Menu Dropdown Keren Dengan Kotak Search Blog

Cara Membuat Menu DropDown Keren Dengan Kotak Search Blog - Dengan tidak ada menu di blog rasanya ada yang kurang navigasi blog jadi agak lebih sulit untuk mengakses blog, navigasi blog adalah sesuatu yang penting dalam struktur blog itu sendiri sehingga banyak sekali para blogger mengharuskan memasang menu tersebut di setiap blog mereka. bagi anda yang ingin mengetahui bagaimana tampilan menu blog ini Biasanya menu dropdown ini teletak di atas blog dan di bawah/di atasnya header dan disampingnya terlihat kotak pencarian yang berfungsi untuk mencari artikel yang ada di blog milik anda. selain menjadi pelengkap stuktur blog menu ini akan menjadi sesuatu yang akan memperindah dan mempercantik blog anda sehingga blog lebih keren dan bagus. jika sudah tidak sabar lagi mari kita mulai membuat menu dropdown tersebut.

Cara Membuat DropdownKeren Dengan Kotak Search Blog


Cara Membuat Menu Dropdown Keren

  1. Pertama anda bisa menuju ke  Blogger
  2. Klik  TEMPLATE dan lalu - EDIT TEMPLATE 
  3. Cari Kode ]]></b:skin> atau tekan  Ctrl+F untuk merpermudah mencari kodenya
  4. Jika sudah copy kode di bwah iini dan pastekan tepat d atas kode ]]></b:skin>
      /* Menu Horizontal Dropdown   ----------------------------------------------- */
  5.     #menuwrapperpic{background:url(http://3.bp.blogspot.com/-au85vE8p-AM/TeCY5Hd27JI/AAAAAAAAAwQ/fJXm0qysq1Q/s1600/nav.png) repeat-x;width:980px;margin:0 auto;padding:0 auto}
        #menuwrapper{width:980px;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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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}

  6. Cari kode </head> atau gunakan Ctrl+F untuk mencari
  7. Lalu copas lagi kode di bawah ini dan pasang tepat di bawah atau di atas kode </head>
        <div id='menuwrapperpic'>
        <div id='menuwrapper'>
        <ul id='menubar'>
        <li><a href='Your Link'>Home</a></li>
        <li><a href='Your Link'>Menu</a></li>     <li><a href='Your Link'>Menu1</a></li>     <li><a href='Your Link'>menu2</a></li>     <li><a class='trigger' href='Your Link'>menu3</a>     <ul>
        <li><a href='Your Link'>Sub menu1</a></li>     <li class='hr'/>
        <li><a href='Your Link'>Sub Menu2</a></li>     <li class='hr'/>
        <li><a href='Your Link'>Sub Menu3</a></li>     </ul>
        </li>
        <li><a class='trigger' href='Your Link'>Menu4</a>     <ul>
        <li><a href='Your Link'>Sub menu1</a></li>     <li class='hr'/>
        <li><a href='Your Link'>Sub menu2</a></li>     <li class='hr'/>
        <li><a href='Your Link'>Sub menu3</a></li>     <li class='hr'/>
        <li><a href='Your Link'>Sub menu4/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://razebook.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(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif)
        no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn'
        src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
        </form>
        </div>
        </div>
        <br class='clearit'/>
        </div>
        <div style='clear:both;'/>
        </div>
  8. Simpan dan lihat hasilnya dengan klik preview jika sudah siap simpan templatenya.. 
Keterangan: warna merah (yourlink) gantilah dengan URL blog anda biasanya berupa URL menu label pada blog
Selanjutnya
« Prev Post
Sebelumnya
Next Post »