Responsive RSS Search Form With Bootstraps 4.0.0-beta

Bootstraps 4, HTML, CSS, dan JS Framework yang paling populer di dunia.
Latest Bootstraps 4 CDN
Bila Anda hanya perlu menyertakan CSS dan JS Bootstrap yang dikompilasi, gunakan CDN Bootstrap, yang disediakan bebas oleh kawan-kawan Max CDN.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Untuk kali ini akan saya share Snippet Responsive RSS Search Form.

Fitur:
  1. Dapat mencari keyword yang kita inginkan.
  2. Dapat Di Edit Sendiri Tampilannya.
  3. Dapat di pakai untuk search form di blog dan juga bisa digunakan untuk Search Results di blog.
  4. Dapat meningkatkan Traffic blog.
  5. Dapat menentukan Ribuan Artikel (RSS) dengan cepat.
  6. Multi Proxy (Web -> CGI, MiniProxy, Appspot WebProxy(simple)).
  7. Dapat di tentukan berapa hasil search nya (1-0/unlimited).
   Mari kita mulai:

    import dulu jquery library
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  1. Kode CSS.
  2. .container{position:relative;float:left}
    #searchForm{width:100%}
    .icons { font-family:icons; }
    input{font-family: FontAwesome;font-style: normal}
    input {
     outline: none;
    }
    input[type=search] {
     -webkit-appearance: textfield;
     -webkit-box-sizing: content-box;
     font-family: inherit;
     font-size: 100%;
    }
    input::-webkit-search-decoration,
    input::-webkit-search-cancel-button {
     display: none; 
    }
    
    input[type=submit] { 
     border: solid 1px #ccc;
     padding: 9px 10px 9px 17px;
     width: 50px;
     
     -webkit-border-radius: 10em;
     -moz-border-radius: 10em;
     border-radius: 10em;
     
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     transition: all .5s;
      }
    input[type=search] {
     background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
     border: solid 1px #ccc;
     padding: 9px 10px 9px 32px;
     width: 55px;
     
     -webkit-border-radius: 10em;
     -moz-border-radius: 10em;
     border-radius: 10em;
     
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     transition: all .5s;
    }
    input[type=search]:focus,input[type=submit]:focus {
     width: 130px;
     background-color: #fff;
     border-color: #66CC75;
     
     -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
     -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
     box-shadow: 0 0 5px rgba(109,207,246,.5);
    }
    
    
    input:-moz-placeholder {
     color: #999;
    }
    input::-webkit-input-placeholder {
     color: #999;
    }
  3. Kode Html.
  4. <div class="container mt-2">
    <form action="javascript:getSearchForm();" class="form-inline" id="searchForm" method="POST">
      <div class="input-group">
      <input type="search" id="search" class="form-control" onClick="this.select();" value="Search"></input><input type="submit" id="submit" class="input-group-addon" onClick="removeBefore();" value="&#xf002;&nbsp;&nbsp;&nbsp;&nbsp;Searching" class="icons"></input>
      </div></form></div><br><hr>
    <center><span class="success"></span></center>
    <div class="embed-responsive embed-responsive-16by9"><div class="embed-responsive-item"></div></div>
  5. Kode JavaScript.
    1. JavaScript 1 -> Defer Bootstraps 4.0.0
      Anda bisa memakai pemanggil yang diatas artikel ini atau juga bisa menggunakan cara defer CSS untuk memanggil Bootstraps nya.
    2. var loadMultipleCss = function(){
       loadCss('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css');
       loadCss('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
      }
       
      var loadCss = function(cssPath){
          var cssLink = document.createElement('link');
          cssLink.rel = 'stylesheet';
          cssLink.href = cssPath;
          var head = document.getElementsByTagName('head')[0];
          head.parentNode.insertBefore(cssLink, head);
      };
      window.addEventListener('load', loadMultipleCss);
    3. Kode JavaScript -> Parsing Parameter URL/Query URL.
      Berfungsi membaca query URL/parameter URL yang ditargetkan (misal. http://domainmu.com/?query1=oke&query2=okeJuga).
      function getQueryVariable(variable) {
          var query = window.location.search.substring(1);
          var vars = query.split('&');
          for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (pair[0] == variable) {
              return pair[1];
            }
          }
          return (false);
        }
      Untuk parsing nya anda bisa gunakan kode berikut ini:
      getQueryVariable('q');
      //Atau
      var query = getQueryVariable('q');
      Kode diatas untuk parsing query/parameter dari q -> misal : http://domain.com/?q=oke
    4. Kode JavaScript -> fungsi untuk menciptakan RSS search results.
    5. //Proxy web disini
      function proxyFr()
      {
          var prx = [
              'https://hortelli.com.br/proxy.php/',
              'https://www.fromasia.biz/ipk.php/'
          ];
      
          return prx[Math.floor(Math.random() * prx.length)];
      }
        function getSearchForm(){ //edit sesuka kalian disini
          var protocolHost = 'https';
          var hostblog = 'web-manajemen.blogspot.com';
          var maxItems = '10';
          var borderSearch = 'd4d0c8';
          var headerBG = '999999';
          var headerTxt = 'ffffff';
          var ItemTitleBG = 'f1eded';
          var ItemTitleTxt = '000000';
          var ItemBG = 'ffffff';
          var ItemTxt = '000000';
          var search = function(search){
            var getVal = document.getElementById("search").value;
            if ( typeof search !== getVal )
            { 
              return search = getVal;
            } 
          }
           
           $(".success").html("<b style='text-align:center !important; align:center !important'>Search Results of "+search()+"</b>");
          var txtsize = 'inherit';
         $('<iframe>', {
         src: proxyFr()+'http://rssdog.com/index.htm?url='+protocolHost+'%3A%2F%2F'+hostblog+'%2Frss.xml%3Fredirect%3Dfalse%26max-results%3D9000&mode=html&showonly='+search()+'&maxitems='+maxItems+'&showdescs=0&desctrim=0&descmax=0&tabwidth=100%25&xmlbtn=1&utf8=1&linktarget=_blank&textsize='+txtsize+'&fullhtml=1&bordercol=%23'+borderSearch+'&headbgcol=%23'+headerBG+'&headtxtcol=%23'+headerTxt+'&titlebgcol=%23'+ItemTitleBG+'&titletxtcol=%23'+ItemTitleTxt+'&itembgcol=%23'+ItemBG+'&itemtxtcol=%23'+ItemTxt+'&ctl=0',
           id: 'myFrame',
           class: 'embed-responsive-item',
           frameborder: 0,
           height: '100%',
           width: '100%',
           //style: 'width:100%; height:500px',
           scrolling: 'yes'
         }).appendTo('.embed-responsive-item');
          }
      function removeBefore(){
          $(".embed-responsive-item").html("");
        }
Demo:

Untuk yang kalian ingin gunakan di search results blog kalian. Tinggal ganti var search = function().... Ke var search = getQueryVariable('q');
Demikian artikel responsive RSS Search Results, untuk AMP page nyusul. Selamat mencoba

Subscribe to receive free email updates:

0 Response to "Responsive RSS Search Form With Bootstraps 4.0.0-beta"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.