import dulu jquery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

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

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

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 = 'webmanajemen.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("");
  }