Info Xt
Blog Kang Fikri
Selamat Datang Di Blog Info Xt
Terima kasih atas kunjungan Anda di blog Info Xt,
semoga apa yang saya share di sini bisa bermanfaat dan memberikan motivasi pada kita semua
untuk terus berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.
Jika Ingin copy paste artikel Info Xt Di harapkan meletakan sumber karena blog di lindungi DMCA Dan Copyscape

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>
Enter your email address to get update from Info Xt.
Print PDF
Next
« Prev Post
Previous
Next Post »

8 comments

mantep dah ini thread isinya original smua (Y)
top dah buat agan TS :D
info menarik gan :D

Balas

he.he..he...
makasih bang..
tetep kunjungi blog Info Xt yah :D

Balas

keren gab...
ane coba dulu bang..
terimakasih tutornya :-D

Balas

Wow peerlu di coba ini gan ;)

Balas

Bisa di coba nih gan

Balas

Komentar yang bener aje ye... harus sesuai topic pembahasan, dan juga dilarang spam,sebar situs p*rno, dan terakhir jangan ribut .
jika melanggar komentarnya akan di hapus

Copyright © 2013. Info Extended - All Rights Reserved | Template Design by Kompi Ajaib | Redesign by Info Xt