Membuat Search Box di blog

Anda pasti bertanya-tanya gimana sih ngebuat blog kita mempunyai search box untuk mencari file yang kita posting? daridulu saya cari itu dan akhirnya ketemu "allhamdulillah ya sesuatu" hahahahaha ni toturialnya

1. masuk ke blog
2. klik tata letak
3. tambah javascript
4. masukkan code ini
5.  <style type="text/css">
   #searchbox
      {
       background: #eaf8fc;
       background-image: -moz-linear-gradient(#fff, #d4e8ec);
       background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
       -moz-border-radius: 35px;
       border-radius: 35px;
       border-width: 1px;
       border-style: solid;
       border-color: #c4d9df #a4c3ca #83afb7;           
       width: 200px;
       height: 35px;
       padding: 10px;
      
       overflow: hidden;
      }
   #search, #submit
           {
               float: left;
           }
           #search
           {padding: 5px 9px;
               height: 23px;
               width: 180px;
               border: 1px solid #a4c3ca;
               font: normal 13px 'trebuchet MS', arial, helvetica;
               background: #f1f1f1;
              -moz-border-radius: 50px 3px 3px 50px;
                border-radius: 50px 3px 3px 50px;
                -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
                -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            }
     #submit
     {  background: #6cbb6b;
               background-image: -moz-linear-gradient(#95d788, #6cbb6b);
               background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
               -moz-border-radius: 3px 50px 50px 3px;
               border-radius: 3px 50px 50px 3px;
               border-width: 1px;
               border-style: solid;
               border-color: #7eba7c #578e57 #447d43;
               -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
                -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
                box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
      height: 35px;
      margin: 0 0 0 10px;
      padding: 0;
      width: 60px;
      cursor: pointer;
      font: bold 14px Arial, Helvetica;
      color: #23441e;
      text-shadow: 0 1px 0 rgba(255,255,255,0.5);
     }
     #submit:hover
     {         background: #95d788;
               background-image: -moz-linear-gradient(#6cbb6b, #95d788);
               background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
     }
   #submit:active
     { 
               background: #95d788;
      outline: none;
              -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
                -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 
     }
   #submit::-moz-focus-inner
     {
       border: none;
     } 
    
   #search::-webkit-input-placeholder {
              color: #9c9c9c;
              font-style: italic;
           }
           #search:-moz-placeholder {
              color: #9c9c9c;
              font-style: italic;
           }   
           #search.placeholder {
              color: #9c9c9c !important;
              font-style: italic;
           } 
           #search:focus
           {
               border-color: #8badb4;
               background: #fff;
               outline: none;
           }
   </style>
   <form id="searchbox" action="/search" method="get">
       <input id="search" name="q" type="text" placeholder="Type here" />
       <input id="submit" type="submit" value="Search" />
   </form>
6. klik Simpan
7. selesai