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. SyamsQ

    SyamsQ Member

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

    www.syamsq.com
     
  2. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    caranya kita harus bagi nav menjadi 2, kiri dan kanan...
    tombol searchnya mau dikiri apa dikanan ?
     
  3. SyamsQ

    SyamsQ Member

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

    Karena kebanyakan orang Indonesia pakai mouse sebelah kanan, searchnya sebelah kanan aja Master...
     
  4. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    Saran backup dulu Templatenya....

    Ganti kode HTML <div id="menu-wrapper">...</div> dengan ini
    Code:
    <div id="menu-wrapper">
    <nav id="menu">
    <input type="checkbox">
    <label>≡<span>Navigasi</span></label>
    <ul style="width:70%;float:left;">
    <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>
    <div style="width:30%;float:right;height: 50px;">
    <form id="searchform" name="searchform" method="get" action="/search">
          <div class="fieldcontainer">
            <input type="text" name="s" id="s" class="searchfield" placeholder="Keywords..." tabindex="1">
            <input type="submit" name="searchbtn" id="searchbtn" value=""> 
          </div><!-- @end .fieldcontainer -->
        </form> 
    </div>
    </nav>
    </div>
    Lalu Tambahkan CSS
    Code:
         
    ::-webkit-input-placeholder { /* WebKit browsers */
      color: #ccc;
      font-style: italic;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #ccc;
      font-style: italic;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #ccc;
      font-style: italic;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #ccc !important;
      font-style: italic;  
    }
    /** search input **/
    #searchform, #searchform2 {
      display: block;
      margin-bottom: 15px;
    }
    
    .fieldcontainer {
      display: block;
      position: relative;
      width: 90%;
      margin: 0 auto;
    }
    
    .searchfield {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: block;
      width: 45%;
      padding: 11px 7px;
      padding-right: 43px;
      background-color: #fff;
      font-size: 1.6em;
      color: #ccc;
      border: 1px solid #c8c8c8;
      border-bottom-color: #d2e2e7;
      -webkit-border-radius: 1px;
      -moz-border-radius: 1px;
      border-radius: 1px;
      -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;  
      -webkit-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      transition: all 0.4s linear;
    }
    
    .searchfield:focus {
      width: 100%;
      color: #666;
      -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
      -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
    }
    #searchbtn {
      position: absolute;
      right: 360px;
      top: 5px;
      height: 32px;
      width: 32px;
      border: 0;
      cursor: pointer;
      zoom: 1;
      filter: alpha(opacity=65);
      opacity: 0.65;
      background: transparent url('http://designshack.net/tutorialexamples/expanding-search-input-field/images/search.png') top left no-repeat;
      -webkit-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      transition: all 0.4s linear;
    }
    #searchbtn:hover, #searchbtn:focus, #search2btn:hover, #search2btn:focus {
    	filter: alpha(opacity=90);
    	opacity: 0.9;  
    }
    .searchfield:focus + #searchbtn {
      right: 10px; /* adjust btn position as the field expands */
    }
    #searchbtn {
      position: absolute;
      right: 360px;
      top: 5px;
      height: 32px;
      width: 32px;
      border: 0;
      cursor: pointer;
      zoom: 1;
      filter: alpha(opacity=65);
      opacity: 0.65;
      background: transparent url('ttp://designshack.net/tutorialexamples/expanding-search-input-field/images/search.png') top left no-repeat;
      -webkit-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      transition: all 0.4s linear;
    }
    #searchbtn:hover, #searchbtn:focus, #search2btn:hover, #search2btn:focus {
        filter: alpha(opacity=90);
        opacity: 0.9;  
    }
    .searchfield:focus + #searchbtn {
      right: 10px; /* adjust btn position as the field expands */
    }
     
  5. SyamsQ

    SyamsQ Member

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

    Meletakkan CSSnya dimana gan?
     
  6. SyamsQ

    SyamsQ Member

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

    Saya pasang htmlnya jadi begini Gan. :apaa5: yang kotak biru atas
    [attachment=3875]
     

    Attached Files:

  7. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    hmm ada yang salah deh... sudah ikuti betul betul cara diatas ?
     
  8. SyamsQ

    SyamsQ Member

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

    Udah gan. itu baru masukin html belum css
     
  9. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    minta template bloggernya aja deh.....
     
  10. SyamsQ

    SyamsQ Member

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

    Maksudnya diupload kesini?
     
  11. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    bebas.... :goodjob:
     
  12. SyamsQ

    SyamsQ Member

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

    Sudah saya kirim gan
     
  13. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    kepanjangan klo dicopy langsung jadi kepotong..
    mungkin file xmlnya backup dan backup-an itu upload lewat attachment di PM :goodjob:
     
  14. SyamsQ

    SyamsQ Member

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

    Gak ada attachment di PM gan
     
  15. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    upload di filehosting seperti "Box" dsb :goodjob:
     
  16. SyamsQ

    SyamsQ Member

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

    Sudah gan saya kirim
     
  17. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    oke nanti saya kasih info lagi klo sudah matang :ketawa:
     
  18. SyamsQ

    SyamsQ Member

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

    Siap menanti :santai1:
     
  19. SyamsQ

    SyamsQ Member

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

    :kagum:
     
  20. SyamsQ

    SyamsQ Member

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

    Masalahnya dimana gan?. Kayaknya sulit.
    :sabarmenunggu:
     

Share This Page