Mecha versi 2.6.4 sudah dirilis!

Konsep Kotak Pencarian Tersembunyi di dalam Header

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
Auto Hide Search Form Inside Header

HTML 

<header id='site-header'>
    <div class='inner'>
        <h1><a href='/'>Site Name</a></h1>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class='inner hidden'>
        <form action='/search' method='get'>
            <input type='text' name='q' placeholder='Search...'>
        </form>
    </div>
</header>

CSS 

#site-header {
  background-color:#6A2E79;
  overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.1);
  margin:0 0 20px;
  position:relative;
}

#site-header .inner {padding:20px 30px}

#site-header a {
  text-decoration:none;
  color:white;
}

#site-header a:hover {color:#E0FFED}

#site-header h1 {
  font-size:30px;
  text-transform:uppercase;
}

#site-header p {margin:10px 0 0}

#site-header form input {
  border:1px solid #743983;
  background-color:#3B2440;
  font:normal normal 12px Verdana,Arial,Sans-Serif;
  color:#95799B;
  padding:5px 5px;
  margin:0 auto;
  display:block;
  width:98%;
  -webkit-box-shadow:inset 0 1px 3px black;
  -moz-box-shadow:inset 0 1px 3px black;
  box-shadow:inset 0 1px 3px black;
}

#site-header .toggle-button {
  display:block;
  font-weight:bold;
  padding:10px 18px;
  text-align:right;
  border-top:1px solid #5D216C;
}

.hidden {display:none}

jQuery 

$(function() {
    var $header = $('#site-header'),
        $panel = $header.find('.inner');
    // Insert a toggle button
    $header.append('<span class="toggle-button"><a href="/">Search</a></span>');
    // Click the toggle button to slide the panel
    $header.find('.toggle-button a').on("click", function() {
        if ($(this).html() == 'Search') {
            $(this).html('&times;');
        } else {
            $(this).html('Search');
        }
        $panel.slideToggle('slow');
        return false;
    });
});

Lihat Demo

38 Komentar

Unknown

mas kenapa ide saya langsung di publish tanpa menjawab pertanyaan saya di comment????!

Beben Koben

koneksi saya jg lemot kok :D blog sy sdh ringan kok \o/
WOW fullstylish search :Q

uki

wew...kayaknya cocok untuk proyek template baru saya :)

Anonim

wih keren, ini mirip blognya modification blog :D

Kang Kapuk

Kayak punya Om Dede...siiipppp.....

Unknown

maaf mas, saya cuma tanya aja... ya, saya kira untuk membuat ini menggunakan tag kondisional... makasih mas udah buatkan langsung, makasih banyak, jadi ga repot, cuma nanti lain kali tolong jawab ya mas, walaupun cuma dengan link artikelnya... :-)
sekali lagi mohon maaf dan terimakasih banyak :-)

Unknown

mas mohon jelaskan kembali untuk susunan HTML-nya, karena tidak bekerja di blog saya di http://go-blogtips.blogspot.com
terimakasih sebelumnya... :-)

Taufik Nurrohman

Kalau masih memakai widget asli, mungkin markupnya harus dimodifikasi seperti ini:

<div id='header-wrapper'>
<b:section class='header inner' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Tester (Header)' type='Header'/>
</b:section>
<div class='inner hidden'>
...
</div>
</div>

Lalu ubah nilai selektor $header menjadi #header-wrapper:

$header = $('#header-wrapper');

hanggarps

masih bingung mas aku :'(,mau meletakkan kode yang html dimana
yang css dimana dan yang jquery itu dimana
maklum masih newbie, mohon bimbingannya :yaya:
tips yang bagus mas :-bd

Unknown

oke mas di coba deh, makasih ya udah dibuatin :-)

Unknown

mas kalo bikin profil dan kontak kaya di blog ini sama ga sih mas kaya bikin search ini??

Unknown

emh terus yang perlu diganti dari CSS-nya dbagian mananya mas??
terus form searchnya bisa langsung ganti aja gitu??

Unknown

mau nanya lagi mas, kalo tombolnya disatukan dengan menu gimana caranya mas?

Unknown

terus saya pengen pake ini di body mas, nah apa yang harus di ubah selain slector CSS-nya kalo saya mau simpen widgetnya tersembunyi di balik body?

Unknown

gimana nih mas kalo di widget header bawaan
<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Last My Life (Header)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

Taufik Nurrohman

Hapus semuanya. Ganti dengan ini:

<header id='site-header'>
<div class='inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Last My Life (Header)' type='Header'/>
</b:section>
</div>
<div class='inner hidden'>
<form action='/search' method='get'>
<input type='text' name='q' placeholder='Search...'/>
</form>
</div>
</header>

Unknown

gimana nih mas ko gak tampil tombol searchnya, mohon bantuannya

Taufik Nurrohman

<style>
#site-header {
background-color:#6A2E79;
overflow:hidden;
text-shadow:0 1px 0 rgba(0,0,0,.1);
margin:0 0 20px;
position:relative;
}
#site-header .inner {padding:20px 30px}
#site-header a {
text-decoration:none;
color:white;
}
#site-header a:hover {color:#E0FFED}
#site-header h1 {
font-size:30px;
text-transform:uppercase;
}
#site-header p {margin:10px 0 0}
#site-header form input {
border:1px solid #743983;
background-color:#3B2440;
font:normal normal 12px Verdana,Arial,Sans-Serif;
color:#95799B;
padding:5px 5px;
margin:0 auto;
display:block;
width:98%;
-webkit-box-shadow:inset 0 1px 3px black;
-moz-box-shadow:inset 0 1px 3px black;
box-shadow:inset 0 1px 3px black;
}
#site-header .toggle-button {
display:block;
font-weight:bold;
padding:10px 18px;
text-align:right;
border-top:1px solid #5D216C;
}
.hidden {display:none}
</style>
<header id='site-header'>
<div class='inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Last My Life (Header)' type='Header'/>
</b:section>
</div>
<div class='inner hidden'>
<form action='/search' method='get'>
<input type='text' name='q' placeholder='Search...'/>
</form>
</div>
</header>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
$(function() {
var $header = $('#site-header'),
$panel = $header.find('.inner');
// Insert a toggle button
$header.append('<span class="toggle-button"><a href="/">Search</a></span>');
// Click the toggle button to slide the panel
$header.find('.toggle-button a').on("click", function() {
if ($(this).html() == 'Search') {
$(this).html('&times;');
} else {
$(this).html('Search');
}
$panel.slideToggle('slow');
return false;
});
});
//]]>
</script>

hanggarps

Bang Tau kuk ane selalu bingung yah ama artikel abang yang isinya sperti artikle ini
ini diletakkannya di html blog aku dimana yah setelah kode head kode body atau kodek b:skin
Mohon petunjuknya Bang

Taufik Nurrohman

Artikel-artikel Code Snippet sebenarnya diperuntukkan untuk kalangan level menengah/menengah ke atas, yang sudah tidak perlu lagi diberitahu secara mendetail mengenai di sebelah mana kode-kode tersebut harus diletakkan dan bagaimana caranya masuk ke halaman editor HTML. Artikel kode snippet murni untuk pengembangan web secara global, bukan cuma untuk blogspot.

Unknown

Mas Taufik, kalau ingin membuat header-logo seperti punya sampeyan, caranya bagaimana? kok hanya dengan kode CSS bisa jadi tulisan DTE :] ? Trims.

Taufik Nurrohman

Itu cuma memakai border dan pseudo elemen. Kadang-kadang Saya suka menggambar menggunakan CSS. Ada di label Eksperimen

Unknown

Makasih ya mas tutorialnya... Nyenengin banget. Oh ya, saya mau tanya lagi mas. Kalau membuat suatu element bergerak (memainkan margin) saat kita mengklik elemen lain bagaimana mas jquery-nya? Contohnya yang pas saya input di kotak search, kotak ribbon sampeyan bergerak ke kanan. Makasih mas.

Taufik Nurrohman

Tidak ada kodenya. Tapi itu cuma memakai event .focus() dan .blur():

$('input').focus(function() { // Saat focus-in pada elemen input...
$('div').animate({marginLeft:20}, "slow");
}).blur(function() { // Saat focus-out dari elemen input...
$('div').animate({marginLeft:0}, "slow");
});

Unknown

Mas Taufik, buatkan saya kode css logo header untuk huruf Z saja mas. saya kurang mengerti dengan pseudo element. Saya belum paham. Susah sekali buat huruf Z mas. Atau, mungkin mas taufik punya koleksi CSS huruf yyang bermain pseudo element seperti itu?

budkalon

UWA!!! Akhirnya saya dapatkan kodenya!!! Terima kasih!! :D

Yusril Ibnu Maulana

tolong bantuanya :'(
saya ingin menyimpan tombol search nya di dalam kode ini

<nav class='clearfix'>
<ul class='clearfix'>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Archive</a></li>
<li><a href='/'>Comments</a></li>
<!-- inginnya tombol search disini -->
</ul>
<a href='#' id='pull'>Menu</a>
</nav>

dan HTML headernya seperti ini :


<header id='header-wrapper'>
<div class='inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial Plus (Header)' type='Header'>...
</b:section>
</div>
<div class='inner hidden'>
<form action='/search' method='get'>
<input name='q' placeholder='Search...' type='text'/>
</form>
</div>
</header>

saya sudah ubah js nya menjadi :

$(function() {
var $header = $('#site-header'),
$nav = $('nav ul'),
$panel = $header.find('.inner');
// Insert a toggle button
$nav.append('<li class="toggle-button"><a href="/">Search</a></li>');
// Click the toggle button to slide the panel
$nav.find('.toggle-button a').on("click", function() {
if ($(this).html() == 'Search') {
$(this).html('&times;');
} else {
$(this).html('Search');
}
$panel.slideToggle('slow');
return false;
});
});

naum tidak work :'(, bagaimana caranya ?
bisa di cek ke plustutorial[dot]blogspot.com
terimakasih...

Yusril Ibnu Maulana

Sudah solved hehe...,
ternyata js nya seharusnya begini..
$(function() {
var $header = $('#header-wrapper'),
$nav = $('nav ul'),
$panel = $header.find('.inner');
// Insert a toggle button
$nav.append('<li class="toggle-button"><a href="/">Search</a></li>');
// Click the toggle button to slide the panel
$nav.find('.toggle-button a').on("click", function() {
if ( $(this).html() == 'Search') {
$(this).html('&times;');
} else {
$(this).html('Search');
}
$panel.slideToggle('slow');
return false;
});
});

Sunandar

gan kalo postingannya ikut hide ga? jadi cuma muncul search doang.. please yah min salam http://nandarious.blogspot.com/

mohan

tolong mas saya mau menghilangkan box kotak kosong sebelah kanan header bagai mana caranya, ini blog saya, cimall.blogspot.com

Kujang Region

ass... pak itu klo mau nambahin timing saat di klik.. nambahin script apalagi..?? trs $panel.slideToggle('slow'); timming slow ganti dengan value gmn aturannya ??

Taufik Nurrohman

wass…

Diganti pakai angka saja. Ratusan atau ribuan. Coba cek sendiri hasilnya.

NB: ass itu artinya pantat :p

syamsul

assalamualaikum mas, kalo mau menambahkan tittle bagaimana ?

Komentar telah ditutup.