1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Memasang Search Box Di Menu Blogspot

Discussion in 'Developer Corner' started by SyamsQ, Jul 27, 2014.

  1. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    RE: Cara Memasang Search Box Blogspot

    gak ribet sih cma masih blm ada waktu.. Nanti malem deh..., sekarang lagi on via wp
     
  2. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    589
    RE: Cara Memasang Search Box Blogspot

    Pagi-pagi udah berangkat kerja. :goodjob:
     
  3. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    589
    RE: Cara Memasang Search Box Blogspot

    Terima Kasih Bang Yuzz181, baru pertama saya dapat like.
     
  4. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    RE: Cara Memasang Search Box Blogspot

    baru "ngeh" saya :ketawa:
    btw coba cek
    Code:
    http://mytemp012.blogspot.com/
    design nya ada yang mau di kritik ?
     
  5. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    589
    RE: Cara Memasang Search Box Blogspot

    Maaf, baru jawab gan. Ini baru bisa internetnya. :goodjob:
    Itu ada 48 Family apa gan?
    Saya coba search pake itu dengan menulis NEQUE sesuai judul tulisan disitu, hasilnya
    Method Not Allowed
    Error 405
     
  6. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    RE: Cara Memasang Search Box Blogspot

    ya emang blum, saya kan bilang designya...
    klo widget itu gara gara bawaan tenplate sbelumnya
     
  7. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    589
    RE: Cara Memasang Search Box Blogspot

    Siapa gan. :goodjob:
    Jadi belum selesai? itu tulisan search kurang ketangah terlalu kebawah.
    :goodjob:
     
  8. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    589
    RE: Cara Memasang Search Box Blogspot

    Master, masih sibuk? :goodjob:
     
  9. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    RE: Cara Memasang Search Box Blogspot

    sebelumnya maaf telat banget.....
    agar template tidak berubah mending edit saja...
    ganti kode <div id='menu-wrapper'>....sampai....</div> dengan kode dibawah

    Code:
    <div id='menu-wrapper'>
    <nav id='menu' style='width:80%;float:left;'>
    <input type='checkbox'/>
    <label>≡<span>Navigasi</span></label>
    <ul>
    <li><a href='/' title='Etalase'>Etalase</a></li>
      <li><a href='/search/label/Tekno/' title='Tekno'>Teknologi</a></li>
      <li><a href='/search/label/Kesehatan/' title='Kesehatan'>Kesehatan</a></li>
      <li><a class='prett' href='/search/label/Islam/' title='Islam'>Islam</a>
    <ul class='menus'>
      <li><a href='/search/label/Quran/' title='Quran'>Quran</a></li>
      <li><a href='/search/label/Hadits/' title='Hadits'>Hadits</a></li>
      <li><a href='/search/label/Tokoh/' title='Tokoh'>Tokoh</a></li>
    </ul>
    </li>
      <li><a href='/search/label/Pendidikan/' title='Pendidikan'>Pendidikan</a></li>
    </ul>
    </nav>
    <style type="text/css"> 
    #search {
    width: 20%;
    float: right;
    background: #6BCBCA;
    height: 50px;
    padding-right: 5px;
    margin-left: -5px;
    line-height: 0.6em;}
    .search-field {
     background-color: transparent;
     background-image: url(https://lh5.googleusercontent.com/-FjdSH6FZsJE/Ukce4xrqWhI/AAAAAAAACQw/Tqs4JGh3N_Q/s24/search-icon.png);
     background-position: 5px center;
     background-repeat: no-repeat;
     background-size: 24px 24px;
     border: 2px solid transparent;
     cursor: pointer;
     height: 37px;
     margin: 3px 0;
     padding: 0 0 0 34px;
     position: relative;
     -webkit-transition: width 400ms ease, background 400ms ease;
     transition: width 400ms ease, background 400ms ease;
     width: 0;
    color: #222;
    font-family: Arial;
    font-weight: bold;float:right;
    }
    .search-field:focus {
     background-color: #fff;
     border: 2px solid #c3c0ab;
     cursor: text;
     outline: 0;
     width: 230px;float:right;
    </style>
    <form action='/search' id='search' method='get'>
    <input class='search-field' name='q' placeholder='Search...' title='Click to Search!' type='text'/>
    </form>
    </div>
    lalu save semoga bermanfaat ya :goodjob:
     
  10. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    589
    RE: Memasang Search Box di Menu Blogspot

    Sudah Valid semua
    Master,... Masih boleh minta bantuannya lagi kan! :malu1:
     
  11. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    siapa bilang gak boleh :ketawa:,
    silahkan saja
     
  12. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    589
    Gan, setelah saya terapkan kode
    Code:
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
        // Menentukan elemen yang dijadikan sticky yaitu #header-wrapper
        var stickyNavTop = $('#header-wrapper').offset().top; 
        var stickyNav = function(){
            var scrollTop = $(window).scrollTop();  
            // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
            if (scrollTop > stickyNavTop) { 
                $('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
            } else {
                $('#header-wrapper').css({ 'position': 'relative' });
            }
        };
        // Jalankan fungsi
        stickyNav();
        $(window).scroll(function() {
            stickyNav();
        });
    });
    //]]>
    </script>
    Searchnya gak bisa muncul di mode mobile, karena menu-wrapper 100% saya ganti menjadi 670px untuk menyesuaikan dengan kode diatas.
    Tolong gan, bantu supaya kode diatas bisa cocok dengan search dari agan. :desperate2:
     

Share This Page