Cara Membuat Auto Hide Search Engine - Hallo Sob Jody Blog, artikel kali ini berjudul Cara Membuat Auto Hide Search Engine, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Cara Membuat Auto Hide Search Engine
link : Cara Membuat Auto Hide Search Engine

Cara Membuat Auto Hide Search Engine

S

ebelumnya saya minta maaf mungkin beberapa hari ini sobat Full Blog Design,ada yang berkunjung ke blog saya ini dan ingin menanyakan tentang masalah yang berhubungan dengan tutorial blog ,akan tetapi tidak dapat berkomentar karena memang sengaja admin blog ini menutup sementara form komentar ,perlu kami jelaskan disini memang beberapa hari ini Full Blog Design-Kang Mahfid sengaja menutup form komentar karena sedang melakukan perbaikan pada blog saya ini,sebenarnya kangen juga ama sobat blogger yang biasanya saling tegur/sapa namun karena adanya perbaikan pada template ini terpaksa form komentar untuk sementara kami tutup,Alhamdullilah semuanya kini sudah selesai walau ada beberapa bagian yang masih belum kami perbaiki,nah sebagai pelepas kangen buat sobat semua ,kang Mahfid akan berbagi trik keren yang saya kira sobat semua akan penasaran untuk mencobanya .memang sich trik ini terbilang agak sulit untuk dilakukan karena masing masing orang mempunyai cara sendiri untuk melakukan nya maka dari itu saya saran kan untuk mendownload lengkap template sebelum melakukan trik ini ,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)

Demikianlah Artikel Cara Membuat Auto Hide Search Engine

Sekian Cara Membuat Auto Hide Search Engine, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Cara Membuat Auto Hide Search Engine dan artikel ini url permalinknya adalah http://caratutorialgratis.blogspot.com/2013/05/cara-membuat-auto-hide-search-engine.html Semoga artikel ini bisa bermanfaat.

Tweet