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:
    588
    Gan, tolong bimbingan cara buat search seperti ini
    [attachment=3764]
    Kalau dihover bergerak. Saya juga minta panduan memasang di menu horizontal.
    :putusasa2:
     

    Attached Files:

  2. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    macam macam sih.....
    banyak banget menu search...
    dan beragam ragam..
    tapi jika sudah terkuasai css membuat menu search bagaimana pun juga bakal bisa..
    klo yang seperti itu... mungkin ini bisa dipakai :

    html
    Code:
    <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> 
    
    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('images/search.png') top left no-repeat;
      /* Icon credits to Brightmix http://www.iconfinder.com/icondetails/43272/128/find_loop_magnify_monotone_search_zoom_icon */
      -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 */
    }
    
    nah itu yang memakai css saja, klo pengen tambah javascript tinggal htmlnya begini
    Code:
    <form id="searchform2" name="searchform2" method="get" action="/search">
      <div class="fieldcontainer">
        <input type="text" name="s2" id="s2" class="searchfieldjs" placeholder="Keywords..." tabindex="2">
        <input type="submit" name="search2btn" id="search2btn" value="">
      </div>
    </form>
    
    nah tambahkan js
    Code:
    $(function(){
      var search2 = $('#s2');
      var icon2   = $('#search2btn');
       
      // handling the focus event on input2
      $(search2).on('focus', function(){
        $(this).animate({
          width: '100%'
        }, 400, function(){
          // callback function
        });
        $(icon2).animate({
          right: '10px'
        }, 400, function(){
          // callback function
        });
    
    Code:
      // handling the blur event on input2
      $(search2).on('blur', function(){
        if(search2.val() == '') {
          $(search2).animate({
            width: '45%'
          }, 400, function(){ });
           
          $(icon2).animate({
            right: '360px'
          }, 400, function(){ });
        }
      });
       
      // handling both form submissions
      $('#searchform, #searchform2').submit(function(e) {
        e.preventDefault();
      });
    });
    
    untuk searchbox yang pake javascript gunakan juga css yg pertama ya...
    perbedaan pake js sama css aja bisa cek demo : http://designshack.net/tutorialexamples/expanding-search-input-field/index.html
    tapi ingat js dapat memberatkan blog...

    atau satu lagi ada yang begiini http://callmenick.com/lab-demos/3-expanding-search-bar/ ?
    oh ya 1 thread = 1 pertanyaan... (kecuali klo masih berkaitan)
     
  3. SyamsQ

    SyamsQ Member

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

    Maaf Gan, kalau pertanyaanya doble, tapi beneran tujuan saya, buat search kayak gitu yang bisa di taruh di menu.
    Kalau yang ini http://callmenick.com/lab-demos/3-expanding-search-bar/ gak pake js?
     
  4. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    ya udah klo begitu yg seperti di link "http://callmenick.com/lab-demos/3-expanding-search-bar/" aja sekalian..
    itu pake js :goodjob:
     
  5. SyamsQ

    SyamsQ Member

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

    Jangan pake JS gan, kasihan yang inetnya siput. Soalnya saya juga merasa, inet lama kalau harus buka page yang besar sizenya.
     
  6. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    ya klo pengen seperti itu sih memang harus pake bantuan js :woa:
     
  7. SyamsQ

    SyamsQ Member

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

    js itu fungsinya untuk apa, sehingga harus pake js?
     
  8. Febian

    Febian Administrator Staff Member

    Joined:
    May 7, 2013
    Messages:
    8,032
    RE: Cara Memasang Search Box Blogspot

    hari gini situs tanpa js gak bakal interaktif om
    semua website modern mayoritas pasti pake js

    fungsinya ya macem2 tergantung code nya
    kl di code search diatas, js dipake bwt animasi nya

    kl g dikasih ya jd statis tanpa animasi
     
  9. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    bermacam macam, asal jangan gunakan berlebihan tidak akan memberatkan web :goodjob:
     
  10. Muhammad Rizki

    Muhammad Rizki Most Valuable Member

    Joined:
    Jul 28, 2013
    Messages:
    316
    RE: Cara Memasang Search Box Blogspot

    kalau udah bisa, jangan lupa di mark solved yahh.. :goodjob:
     
  11. SyamsQ

    SyamsQ Member

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

    Maaf, master baru pulang kampung. Di kampung gak ada sinyal. :desperate2:
    Pakai CSS gak bisa untuk animasi?


    Minta tutornya master. :kagum:


    Belum solved, gan
     
  12. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    jadi pake yg ini :
    http://callmenick.com/lab-demos/3-expanding-search-bar/

    css juga sebenarnya bisa buat animasi cuma gak seadvance js :goodjob:
     
  13. SyamsQ

    SyamsQ Member

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

    Ya Gan, kita coba.
    Ada model yang lain gak?
     
  14. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    ada sih kayaknya..
    tapi mending kita pake itu aja..., nanti bisa di redesign lagi...

    HTML gunakan ini :
    Code:
    <div id="navigation-bar" class="clearfix">    
        <form id="search" action="/search" method="post">
            <div id="label"><label for="search-terms" id="search-label">search</label></div>
            <div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
        </form>
        <nav>
            <ul>
                <li><a href="#">Nav 1</a></li>
                <li><a href="#">Nav 2</a></li>
                <li><a href="#">Nav 3</a></li>
                <li><a href="#">Nav 4</a></li>
            </ul>
        </nav>
    </div>
    
    CSS
    Code:
    #navigation-bar {
        position: relative;
        height: 60px;
    }
    #search {
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
    }
    #label {
        width: 60px;
        height: 60px;
        position: relative;
        z-index: 20;
    }
    #label label {
        display: block;
        width: 60px;
        height: 60px;
        background: url("../img/search.png") 0 0;
        font-size: 0;
        color: rgba(0, 0, 0, 0);
        text-indent: -9999px;
        cursor: pointer;
    }
    #label label:hover {
        background: url("../img/search.png") -60px 0
    }
    #label.active label {
        background: url("../img/search.png") -60px 0
    }
    #input {
        position: absolute;
        top: 0;
        left: 60px;
        width: 450px;
        height: 60px;
        z-index: 5;
        overflow: hidden;
    }
    #input input {
        display: block;
        position: absolute;
        top: 0;
        left: -450px;
        width: 450px;
        height: 100%;
        margin: 0;
        padding: 0 10px;
        border: none;
        background-color: #23688b;
        color: #fff;
        font-size: 18px;
        backface-visibility: none;
        border-radius: 0;
        transition: left 0;
    }
    #input input:focus {
        outline: none
    }
    #input.focus {
        z-index: 20
    }
    #input.focus input {
        left: 0;
        transition: left 0.3s;
    }
    nav {
        padding-left: 70px;
        position: relative;
        z-index: 10;
    }
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    nav li {
        display: inline-block;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        font-family: "Oswald", sans-serif;
        font-weight: 300;
        text-transform: uppercase;
    }
    nav a {
        display: block;
        padding: 0 15px;
        color: #c8c8c8;
    }
    nav a:hover {
        color: #3296c8
    }
    Javascript
    Code:
    (function(window){
    
        // get vars
        var searchEl = document.querySelector("#input");
        var labelEl = document.querySelector("#label");
    
        // register clicks and toggle classes
        labelEl.addEventListener("click",function(){
            if (classie.has(searchEl,"focus")) {
                classie.remove(searchEl,"focus");
                classie.remove(labelEl,"active");
            } else {
                classie.add(searchEl,"focus");
                classie.add(labelEl,"active");
            }
        });
    
        // register clicks outisde search box, and toggle correct classes
        document.addEventListener("click",function(e){
            var clickedID = e.target.id;
            if (clickedID != "search-terms" && clickedID != "search-label") {
                if (classie.has(searchEl,"focus")) {
                    classie.remove(searchEl,"focus");
                    classie.remove(labelEl,"active");
                }
            }
        });
    }(window));
     
  15. SyamsQ

    SyamsQ Member

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

    Gan, ini buat menu baru? saya sudah ada menu ditemplate.
     
  16. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    ya...
    ganti aja tapi lebih baik backup dulu templatenya, mencegah suatu hal yang tidak diinginkan... :goodjob:
     
  17. SyamsQ

    SyamsQ Member

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

    Gan, ada cara untuk memasukkan search box aja tanpa mengganti menunya.?
     
  18. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    masalahnya ini kan sudah tergabung dengan menu search :woa:
     
  19. SyamsQ

    SyamsQ Member

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

    Kalau menambahakan search box di menu yang sudah ada bagiamana?
     
  20. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

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

    ya paling harus lihat html blognya dulu....
    butuh linknya oke ku masih ingat kok alamat blognya :ketawa:
     

Share This Page