Cara Membuat Search Engine di Blog

Hasil gambar untuk search engineMenu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.

Untuk membuatnya bisa lakukan posedur berikut:
1.  Login ke menu blogger. Klik Design -> Edit HTML
2.  Backup template anda
3.  Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin> 
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}

#fixed {position:fixed;top:0;left:0;width:100%;height:35px;z-index:999;}

#fixedinner{text-align:center;background:transparent;height:35px;position:relative;z-index:999;}

* html, * html body{overflow-y:hidden;height:100%;}

* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }

* html #fixedinner{margin-right:17px;}

* html #fixed {position:absolute;}

* html #outer-wrapper {height:100%;overflow:auto}

.toppica{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitTm7i0K1i_gAjKP1fi-zw1P15EBjP3eC4FKOC6QPjWcAMZADF4iEhpvQnDnpw9r8Z6ndr9VMD0zY59XB8dcf_K8uZSl8EvgptvvH53cBMIGndi9I3p_dfAa9VzIWLCjSvmRgYC9UU11E/s320/navbar.gif);width:100%;margin:0 auto;border-bottom:4px solid #666}

.topnav{width: 970px;height:35px;overflow: hidden;margin:0 auto;padding:0px 10px 0px 10px; }

h1{font-size:24px;}

#searcha{float:right;width:180px;height:20px;margin-top:5px;padding-right:5px}

#searcha form{float:left}

#searcha input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimEx76gTW0P2Uf677RwbsY0Gw_VK2WbnLoRcihtBTfl0lsCdIG2JwGWQ_CFNOOVi1M4rVv852o6iqJcizB8dDZ7FsIqHmg7Pxac72rpXtbMGJY-NCkF-esTEWGLMpMkCL2283Q3F5BC8U/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #ccc;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}

#searcha input[type="text"]:focus{background:#FFF}

#searcha input[type="submit"]{display:none}

h1,h2,h3,h4{font-weight:700;font-family:'Open Sans', cursive;}

ul.isocial{list-style:none;margin:0;padding:5px 20px 0 0}

ul.isocial li{float:right;margin:0 5px;padding:0}

ul.isocial li a{float:right;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4Q7OL9l12Cn68t4TiL6fE7hLL22CqrOLxQgG4OM4cn8eBkzqr2F46vLAOoO_Ulul8OFSMMVZCYqKAvgM1fRySY65D8HxUBVx4pKKyZvu3XQG10PoXq8VxUlVaXyOP2A_Pf1xAU9gEGE/s1600/social+letter.png);background-position:0 0;background:repeat:no-repeat;display:inline-block;text-indent:-9999px;overflow:hidden;width:24px;height:24px;position:relative}

ul.isocial li a.rss{background-position:0 0}

ul.isocial li a.rss:hover{background-position:0 -25px}

ul.isocial li a.facebook{background-position:-25px 0}

ul.isocial li a.facebook:hover{background-position:-25px -25px}

ul.isocial li a.twitter{background-position:-50px 0}

ul.isocial li a.twitter:hover{background-position:-50px -25px}

ul.isocial li a.google{background-position:-75px 0}

ul.isocial li a.google:hover{background-position:-75px -25px}

ul.isocial li a.youtube{background-position:-100px 0}

ul.isocial li a.youtube:hover{background-position:-100px -25px}


4. Setelah Itu, letakkan kode di bawah ini tepat di bawah  </body>
<div id='fixed'>

<div id='fixedinner'>

<div class='toppica'>

<div class='topnav'>

<div style='font:bold 16px Verdana;float:left;padding-top:8px;color:#aaa;'>

Selamat Datang Di Kuplay Comunity & Club

</div>

<div id='searcha'>

<form action='/search' class='search' id='searchform' method='get'>

<div>

<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type and Enter&quot;;}' onfocus='if (this.value == &quot;Type and Enter&quot;) {this.value =&quot;&quot;;}' size='30' type='text' value='Type and Enter'/>

</div>

</form>

</div>

<div style='float:right;padding:0px 0px 5px 0px;'>

<ul class='isocial'>

<li><a class='rss' href='#'_blank' title='Email'/></li>

<li><a class='facebook'#'_blank' title='Facebook'/></li>

<li><a class='twitter' href='#'/></li>

<li><a class='google' href='#' target='_blank' title='Google Plus Profile'/></li>

<li><a class='youtube' href='#' target='_blank' title='Video'/></li>

</ul>

</div>

</div>

</div></div>

</div>

Yang Berwarna :
Merah : Bisa Di Ganti Sesuai Yang Anda Inginkan
Kuning : Diganti Dengan Profil Yahoo Anda Sendiri
Hijau : Diganti Dengan Link Profil Facebook Anda Sendiri
Biru : Diganti Dengan Link Twitter Anda Sendiri
Ungu : Diganti Dengan Link Google Acount Anda Sendiri
Orange : Diganti Dengan Link Youtube Anda Sendiri


Selesai.

Sumber Dari: http://kuplay-45.blogspot.com/p/cara-membuat-search-di-blog-m-enu.html#ixzz3NUqZ1Gv6
Share:

Related Posts:

Tidak ada komentar:

Posting Komentar

Kirimlah Komentar Sesuai Dengan Topik

Kuplay Protector

Popular Posts

Number of Visitors

187128
Kuplay Comunity & Club. Diberdayakan oleh Blogger.

Blog Archive

Kuplay Translator

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.