Cara Membuat Simple Menu dan Efek Search Slider

Cara Membuat Simple Menu dan Efek Search Slider - Pada Kesempatan Kali Ini Saya ingin Membagikan Tips dan Trik Kepada Anda dengan cara Membuat Simple Menu dengan Efek Search Slider dan ada juga Jam di dalam menu tersebut dan Menu ini tidak Membebankan Template anda Malah terlihat lebih elegan dan simple jika anda Mencoba untuk memakainya. Silahkan Anda Pahami dan Terapkan Tipsnya berikut ini :

1. Buka Blogger
2. Buka Template, lalu Edit Html
3. Masukan Cssnya di bawah ini


/* Menu Nav */#menu-top {float:left; width:100%; list-style: none; height: 40px; margin:0; padding:0; } #menu-top li { list-style:none; position:relative; float: left; height: 40px; } #menu-top li a, #menu-top li a:hover { color:#09f;border-left:medium none !important; } #menu-top li a, #menu-top li a:link, #menu-top li a:visited { display:block; float:left; height:34px; color:#333; line-height:36px; padding: 0 12px 0 12px; border-right: solid 1px #eee; font-weight: bold; } #menu-top li a:hover, #menu-top li a:focus, #menu-top li a:active { color:#09f; } .menu-top { height:40px; width:100%; background:#fff; margin:0; padding:0px; border-top:1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #DDD;border-right: 1px solid #DDD;} /* Clock */ #clock { cursor: default; float: right; font-weight: bold; margin: 5px; padding: 5px; } /* Search */ #search { width:200px; float:right; margin:5px; } #search input[type="text"] { height:27px; line-height:22.5px; color: #333; width: 180px; padding-left: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border:1px solid #ddd; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } #search input[type="text"]:focus { width: 192px; outline: none; }

4. Masukan HTMLnya di bawah ini


<div id="menu-top">

<div class="menu-top">

<ul>

<li><a href="/" title="Indotemplates">Home</a></li>

<li><a href="//plus.google.com/+Ariffakhriweb" title="About Me">About Me</a></li>

<li><a href="//www.facebook.com/indotemplates" title="Contact">Contact</a></li>

<li><a href="/p/site-map.html" title="Site Map">Site Map</a></li>

<li><a href="/p/privacy-policy.html" title="Privacy Policy">Privacy Policy</a></li>

<li><a href="/p/term-of-use.html" title="Term Of Use">TOS</a></li>

<li><a href="?m=1" title="Mobile Version">Mobile</a></li>

</ul>

<div id="clock">8:21:31</div>

<form action="/search" id="search" method="get">

<input name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search Here...&quot;;}" onfocus="if (this.value == &quot;Search Here...&quot;) {this.value = &quot;&quot;}" size="40" value="Search Here..." type="text">

</form>

</div>

</div>

5. Selesai Silahkan Simpan.

Demo

View me

Terimakasih Jika anda Menggunakan Menu ini menu ini dipersembahkan untuk anda dan disponsori Oleh Indotemplates.net.

Website sementara masih dalam kondisi perbaikan, untuk sementara website utama beralih ke Jumbo Cell