Categories
Theme WordPress Trik WordPress

Search Form Gaya dengan Image

Kalau sebelumnya sudah saya sampaikan bagaimana memasang search form di menu bar, maka di artikel kali ini kita akan melakukan modifikasi agar search form itu bisa tampil lebih gaya. Bagaimana caranya?

Oke, pertama kita perlu memodifikasi kode form yang dipakai sebelumnya:

  

Kita akan ganti menjadi seperti ini:

Nah, sekarang tinggal mengubah CSS-nya. Dimana ngaturnya? Yup bener di style.css

Kita cari css yang dulu

    #search {  
      float:right;  
      }  

Kita rubah jadi seperti ini:

#search-nav {
	float:right;
	background: url(images/search.gif) no-repeat;
	margin:0 5px 0 0;
	width:221px;
	height:25px;
	}
#search-nav input {
	background:transparent;
	border:none;
	color: #ffffff;
	margin:0 0 0 7px;
	width: 180px;
	height: 20px;
	}
#search-nav #searchsubmit {
	width: 20px;
	height: 20px;
	}

Selesai!

Lho tapi mana gambarnya? hehehe…. Iya kelupaan. Download gambarnya disini dan extract di folder themes anda. Sekarang coba deh anda lihat bagaimana tampilan themes kita sekarang

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

23 replies on “Search Form Gaya dengan Image”

mas…. mo nanya lai……
aku ngedit templete yg aku bikin pake artisteer, tp search fromnya gak mau geser ke kanan kira2 cra benerinnya mana ya mas…?

mas saya mau tanya, saya ikuti dari awal tutorialnya. tapi saya coba kembali lagi pada awal pembuatan index.php saya lihat kita tidak membuat search from secara manual mas, justru search form nya kita import menggunakan function.php melalui sidebar.
lalu search form yang di atas yang mas surug dirubah yang mana mas? apa yang terletak pada sidebar atau harus dibikin sendiri yang baru. sebab search form pada artikel di atas terletak pada bagian menu.
mohon bantuannya mas!

I simply want to say I am just very new to blogs and honestly loved you’re blog site. Probably I’m likely to bookmark your website . You definitely have perfect articles. Thanks for sharing your webpage.

I like the helpful information you provide in your articles. I’ll bookmark your weblog and check again here frequently. I’m quite sure I’ll learn many new stuff right here! Good luck for the next!

I am not assured where you’re getting your information, on the contrary fantastic topic. I needs to spend some period scholarship much more or understanding further. Thanks for vast in a row I was looking representing this information for my mission.

You really make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I will try to get the hang of it!

Does your blog have a contact page? I’m having problems locating it but, I’d like to send you an email. I’ve got some ideas for your blog you might be interested in hearing. Either way, great website and I look forward to seeing it grow over time.

When I originally commented I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on every time a comment is added I get 4 emails with the same comment. There has to be an easy method you are able to remove me from that service? Many thanks!

Hello, i think that i saw you visited my blog so i came to “return the favor”.I am attempting to find things to enhance my web site!I suppose its ok to use some of your ideas!!

Comments are closed.