Membuat Sajian Header Kompi Ajaib
Karena ada beberapa sobat Kompi Ajaib yang menanyakan cara menciptakan sajian header yang digunakan Kompi Ajaib, hasilnya kali ini aku share juga. Menu header ini terinspirasi dari sajian Google yang background hitam itu.
Sebenarnya ini yaitu sajian bawaan template yang sedikit aku modif biar sesuai cita-cita saya. Jika ada sobat Kompi Ajaib yang tertarik untuk menggunakannya, silahkan gunakan dan modif warnanya biar sesuai dengan tema template blog Anda sehingga sajian ini sanggup menambah keindahan blog dan mempermudah pengunjung untuk mengakses postingan lainnya.
Silahkan copy isyarat di bawah ini dan simpan atau gantikan isyarat sajian 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/AVvXsEhmdb9VdvZ2pP3lHa1Fgy4dlmq605Fgr-odRARHmVvlOOH1TqoQWmWXFFSZ3EXinGtUJE4ax4t416oihzxbp5_ZwsRszqNi9kvU-sd7013Cg6ZKAqot12GKTbLsB9uczU2z73CGbzj2Qjvx/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 aku gabungkan dengan isyarat css untuk search box-nya (kode yang berwarna biru). Jika Anda ingin memodifikasinya, perhatikan isyarat warna yang berwarna merah harus sama. Untuk isyarat warna lainnya silahkan sesuaikan dengan tema blog Anda.
Kemudian copy isyarat pemanggilnya di bawah ini dan simpan di bawah isyarat <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 yaitu isyarat 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 sanggup dimengerti dan bermanfaat....
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Sajian Header Kompi Ajaib"
Posting Komentar