Stylish Search Form for Blogger From kathulablog

Stylish Search form for blogger, Blue color search form with help of CSS and HTML. Search form for free for blogger and enjoy this form.

Demo

Here we provide HTML and CSS codes for Search Form for Blogger

HTML Code :
<form class="searchform cf">
  <input type="text" placeholder="Is it me you’re looking for?">
  <button type="submit">Search</button>
</form>

<p>Dribbble Rebound of <a target="_blank" href="http://thedublog.blogspot.in/?list=tags&tag=ui">Search Bar</a> by <a target="_blank" href="http://thedublog.blogspot.in/">Liang Shi</a></p>

CSS Code :

/*--------------------------------------------------------------
1.0 - BASE SITE STYLES
--------------------------------------------------------------*/
*,*:after,*:before {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}

body {
  background: #3aaae8;
  color: #fff;
  font:12px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
a,a:visited {
  color:#fff
}

/*--------------------------------------------------------------
2.0 - SEARCH FORM
--------------------------------------------------------------*/
.searchform {
  background:#f4f4f4;
  background:rgba(244,244,244,.79);
  border: 1px solid #d3d3d3;
    left: 50%;
  padding: 2px 5px;
  position: absolute;
    margin: -22px 0 0 -170px;
    top: 50%;
  width:339px;
  box-shadow:0 4px 9px rgba(0,0,0,.37);
  -moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
  -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px
}

.searchform input, .searchform button {
    float: left
}
.searchform input {
    background:#fefefe;
    border: none;
    font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
    margin-right: 5px;
    padding: 10px;
    width: 216px;
    box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px
}
    .searchform input:focus {
        outline: none;
        box-shadow:0 0 4px #0d76be inset;
        -moz-box-shadow:0 0 4px #0d76be inset;
        -webkit-box-shadow:0 0 4px #0d76be inset;
    }
    .searchform input::-webkit-input-placeholder {
      font-style: italic;
      line-height: 15px
    }

    .searchform input:-moz-placeholder {
      font-style: italic;
      line-height: 15px
    }

.searchform button {
    background: rgb(52,173,236);
    background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)), color-stop(100%,rgba(38,145,220,1)));
    background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    background: linear-gradient(to bottom, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
    border: none;
    color:#fff;
    cursor: pointer;
    font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
    padding: 10px;
    width:106px;
    box-shadow: 0 0 2px #2692dd inset;
    -moz-box-shadow: 0 0 2px #2692dd inset;
    -webkit-box-shadow: 0 0 2px #2692dd inset;
  border-radius: 9px;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
}
    .searchform button:hover {
        opacity:.9;
    }

1. https://issuu.com/tdgtraining/docs/tmatraining.ca-forklift_certification_ontario_-_tm 

2. https://www.slideshare.net/kalyanchakravarthi75/tmatrainingca-forklift-certification-ontario-tma-training-tma-training/kalyanchakravarthi75/tmatrainingca-forklift-certification-ontario-tma-training-tma-training 

3. https://www.dropbox.com/s/wlj285r0u9skvtb/tmatraining.ca-forklift%20certification%20ontario%20-%20TMA%20TrainingTMA%20Training.pdf?dl=0 

4. https://www.scribd.com/document/540132928/Tmatraining-ca-forklift-Certification-Ontario-TMA-Training 

5. https://www.4shared.com/office/mGYI__6mea/tmatrainingca-forklift_certifi.html 

6. https://www.mediafire.com/file/oozeudxb56pg33r/tmatraining.ca-forklift+certification+ontario+-+TMA+TrainingTMA+Training.pdf/file