Ditulis oleh: Ditulis pada: 9/20/2013
Karena ada beberapa sahabat Kompi Ajaib yang menanyakan cara membuat menu header yang dipakai Kompi Ajaib, akhirnya kali ini saya share juga. Menu header ini terinspirasi dari menu Google yang background hitam itu.
Sebenarnya ini adalah menu bawaan template yang sedikit saya modif agar sesuai keinginan saya. Jika ada sahabat Kompi Ajaib yang tertarik untuk menggunakannya, silahkan gunakan dan modif warnanya agar sesuai dengan tema template blog Anda sehingga menu ini dapat menambah keindahan blog dan mempermudah pengunjung untuk mengakses postingan lainnya.
Silahkan copy kode di bawah ini dan simpan atau gantikan kode menu blog Anda sebelumnya.
#top-menu{background:#ddd;width:100%;border-top:5px solid #b0130d;margin-bottom:15px;padding:0;box-shadow:0 5px 10px #999}
.topbar-wrapper{position:relative;max-width:970px;margin:0 auto}
#topbar{width:100%;margin-left:5px}
.clearit{clear:both;height:0;line-height:0.0;font-size:0;margin:0;padding:0}
#top{width:100%}
#top,#top ul{list-style:none;font:Arial;margin:0;padding:0}
#top a{background:none;display:block;text-decoration:none;font: 13px Arial;font-weight:700;text-transform:none;color:#333;margin-right:20px;padding:6px 0 7px;border-bottom:3px solid #ddd;transition:all .3s ease-in-out;}
#top a.trigger:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:#333 transparent transparent transparent;float:right;border-width:8px 5px 0 5px;margin:5px 0 0 5px;transition:all .3s ease-in-out;}
#top a.trigger:hover:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:#b0130d transparent transparent transparent;float:right;border-width:8px 5px 0 5px;margin:5px 0 0 5px;}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:150px;background:#ddd;box-shadow:1px 1px 3px #999;padding-left:5px}
#top ul li a{text-align:left;color:#333;text-transform:none;font:bold 13px Arial;border:none;padding:5px 0;}
#top li ul{z-index:100;position:absolute;display:none;background:none;padding:0;margin:0}
#top a:hover {color:#b0130d;border-bottom:3px solid #b0130d;}
#top li:hover ul,#top li.hvr ul{display:block}
#top ul li a:hover{color:#b0130d;border-bottom:none;padding-left:10px}
#top a.trigger:hover{border-bottom:3px solid #ddd}
#search input[type=text]:hover,#search input[type=text]:focus{width:200px;border:1px solid #b0130d;padding-left:25px}
#search input[type=text]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkAeW0f3LKHHd-NXIq2aChFZLeVfr_qtRjz_F-Q9XbKvcoVSm6KzBDInCBfOcndkgzvv41um0kiHGhG8ETjXTpPon0faYsUCI46GDgI4gZwk63zK7TprXIWE1fgHvheyRF7S_Vfuuuy5lV/s1600/search.png)no-repeat center left 3px;width:0;font-size:13px;color:#222;transition:all .5s ease-in-out;z-index:9;position:absolute;border:1px solid #b0130d;right:0;margin-top:2px;padding:5px 14px 5px 15px}
Kode css di atas saya gabungkan dengan kode css untuk search box-nya (kode yang berwarna biru). Jika Anda ingin memodifikasinya, perhatikan kode warna yang berwarna merah harus sama. Untuk kode warna lainnya silahkan sesuaikan dengan tema blog Anda.
Kemudian copy kode pemanggilnya di bawah ini dan simpan di bawah kode <body>
<div id='top-menu'>
<div class='topbar-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/' target='_blank' title='Menu1'>Menu1</a></li>
<li><a href='/' target='_blank' title='Menu2'>Menu2</a></li>
<li><a href='/' target='_blank' title='Menu3'>Menu3</a></li>
<li><a href='/' target='_blank' title='Menu4'>Menu4</a></li>
<li><a href='/' target='_blank' title='Menu5'>Menu5</a></li>
<li><a href='/' target='_blank' title='Menu6'>Menu6</a></li>
<li><a href='/' target='_blank' title='Menu7'>Menu7</a></li>
<li><a class='trigger' href='/' title='More Menu8'>More Menu8</a>
<ul>
<li><a href='/' target='_blank' title='Sub1 More Menu8'>Sub1 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub2 More Menu8'>Sub2 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub3 More Menu8'>Sub3 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub4 More Menu8'>Sub4 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub5 More Menu8'>Sub5 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub6 More Menu8'>Sub6 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub7 More Menu8'>Sub7 More Menu8</a></li>
<li><a href='/' target='_blank' title='Sub8 More Menu8'>Sub8 More Menu8</a></li>
</ul></li>
</ul>
<form action='http://www.kompiajaib.com/p/kompi-ajaib-search-result.html' id='search' target='_blank'>
<input name='cx' type='hidden' value='partner-pub-006106396690849460662:zxyadz2g7gi'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Type and enter here ....'/>
</form>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div>
Kode yang berwarna merah adalah kode HTML untuk search box dengan fungsi pencarian Google atau Google Custom Search. Untuk tutorial cara menambahkan fungsi Google Custom Search pada Search box blog silahkan baca postingannya di link di bawah ini.
Semoga dapat dimengerti dan bermanfaat....