Cara Membuat Auto Hide Search Engine Di Blog

Cara Membuat Auto Hide Search Engine Di Blog - Hallo Sobat blogger setelah beberapa hari tidak bisa update postingan karena sedang sibuk ,  pada kesempatan sebelumnya saya posting tentang Free Download Uc Browser untuk android . kali ini saya akan update 1 postingan saja dulu yaitu Cara Membuat Auto Hide Search Engine Di Blog .
langsung saja ya cara nya :

Contoh gambar :

Caranya adalah :

• Login Blogger > template
• Cari kode ]]></b:skin> , kemudian taruh kode berikut :

#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}

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

 Ket :  Yang Perlu sobat ingat bahwa kode di atas biasanya agak panjang tapi jangan lupa untuk meletakkan kode yang berwarna Biru tepat di bawah kode </b:section> dan tepat di atas text penutup </div>

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