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

  • kamu info

    wew Nice info

  • 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

  • Taufik Nurrohman

    Oh, begitu ya. Maaf kalau mas khawatir artikel ini dikira merupakan ide Saya. Ambil saja nggak apa-apa. Karena pertanyaannya tidak sesuai topik jadi langsung Saya buatkan artikelnya supaya pertanyaan bisa dilanjut di bawah.

  • 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??

  • Taufik Nurrohman

    Sama. Cuma punya Saya lebih genit.

  • 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

    Komentar ini telah dihapus oleh pengarang.

  • 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/

  • Unknown

    g lah

  • 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.