Cara Membuat Auto Hide Search Engine

Silahkan sobat lihat gambar di atas (klik untuk melihat lebih jelas )coba perhatikan tanda panah atau langsung aja sobat klik tulisan Search pada pojok kanan atas di bagian Header....?gimana sudah di lakukan keren kan ...,sobat juga bisa pasang Auto Hide Search Engine seperti milik saya di atas karena saya akan menerapkan nya pada postingan kali ini yaitu tentang Cara Membuat Auto Hide Search Engine pada sebuah blog yang kebetulan saat ini saya letakkan pada bagian header.
(1)== Cari kode ]]></b:skin>lalu letakkan kode berikut tepat di bawah nya :

<style type='text/css'>

        #header-wrapper {

          background-color:#000;

          overflow:hidden;

          text-shadow:0 1px 0 rgba(0,0,0,.1);

          margin:0 0 20px;

          position:relative;

        }

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

        #header-wrapper a {

          text-decoration:none;

          color:white;

        }

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

        #header-wrapper h1 {

          font-size:30px;

          text-transform:uppercase;

        }

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

        #header-wrapper form input{background-color:red;border-radius:50px 50px 50px 50px;box-shadow:0 1px 3px black inset;color:#fff;display:block;Float:right;font:12px 12px Verdana,Arial,Sans-Serif;margin:0 auto;width:40%}

        #header-wrapper .toggle-button {

          display:block;

          font-weight:bold;

          padding:10px 18px;

          text-align:right;

          border-top:0px solid #5D216C;

        }

        .hidden {display:none}

        </style>

(2)== Silahkan sobat cari kode<div id='header-wrapper'>kodenya kurang lebih seperti di bawah 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'>
    <form action='/search' method='get'>
    <input name='q' placeholder='Search...' type='text'/>
    </form>
    </div>

    </div>

(3)== Yang Perlu sobat ingat bahwa kode di atas biasanya agak panjang tapi jangan lupa untuk meletakkan kode yang berwarna merah tepat di bawah kode </b:section>dan tepat di atas text penutup </div>
(4)== Dan yang terakhir cari kode </body> dan letakkan kode script di bawah ini tepat di atas kode </body> berikut kodenya :

<script type='text/javascript'>

            //<![CDATA[

            $(function() {

                var $header = $('#header-wrapper'),

                    $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>

(5)== Lakukan Preview terlebih dahulu jika sudah benar benar berhasil Save template

PENTING:Mengingat setiap template mempunyai kode yang berbeda silahkan sobat berexperiment sendiri sesuai dengan imaginasi sobat sendiri jika ada keluhan silahkan menuju ke form komentar siapa tahu saya bisa membantu (Wassalam)