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.

.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;
}

2. Kode Html.

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

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

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);

2. 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
3. Kode JavaScript -> fungsi untuk menciptakan RSS search results.

//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