Responsive Search Bar Widget With Unique Font Style For Blogger Blog. The widget contains a headline and a subtext with two buttons and a search bar.
Now after a long time, I am here to share a new widget. I tried to make it responsive. Hope you like this awesome widget.The widget contains a headline and a subtext with two buttons and a search bar.
Features
- Responsive unique text style
- Responsive colors
- Responsive buttons
- Simple editable coding
- Search bar
- Mobile responsive
You may like to read:
How to Add?
To add this widget to your blogger blog. Follow the below instructions correctly.
- First goto Blogger >> Dashboard>>Template.
- Click Edit HTML button.
- Search for <head> tag and paste this code below it.
[<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800|Raleway:400,500,600,700,800,900|PT+Sans:400,700|Montserrat" rel="stylesheet" type="text/css"></link>]
4. Now search for ]]></b:skin> tag and paste this code above it.
[.promo-wrapper {position: relative;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdQ98ppjYPoGXHMuyV6R0aS2rnJXt-yVvIiPoCkVLgcXgudbvKmPE2QL60sf1VEFgID9nfYJQKxMsH7Mzj6RUBzeNlnh0fa15bjoy0zvhRiWGRrkh9Rzm35rIQzWBqanmRX4JSOfBWw5O/s1600/msbg.png");background-size: cover;background-position: top left, center center;text-align: center;}.promobg { background:rgba(0, 0, 0, 0.36);}/* Promo */.promo {padding: 1.75em 2.5em 1.75em 2.5em;display: inline-block;position: relative;z-index: 1;font-family: Raleway;width:90%;}.promo h1 {color: #fff;display: inline-block;margin-right: 1em;font-size: 30px;font-weight:800;font-family: Raleway;margin:15px;}.promo p {color: #fff;margin-right: 1em;font-size:16px;margin: 5px;!important;;font-weight:600;}.promo .trbutton {font-size: 17px; font-weight: 700; display: inline-block; text-decoration: none; padding: 0.8em 2em 0.8em 2em; cursor: pointer; outline: 0; margin-right: 15px; background: white; border-radius: 3px; border-bottom: 3px solid #BBB4B4; color: #39A978;}.promo .trbutton:hover {border-color: rgba(255, 255, 255, 0.75);background-color: rgba(255, 255, 255, 0.15);color: #fff;}.cd-primary-nav > li > a {-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;-webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;-ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;}.cd-primary-nav > li > a:hover {border-color: rgba(255, 255, 255, 0.75);background-color: rgba(255, 255, 255, 0.15);color: #fff; border-top: solid 2px #c2c7cc;}@media only screen and (max-width:768px){.promo-wrapper {display:none!important;}}#search-bar{display:block;position:relative;padding:10px;width:48%}input#sq{background: #FFFFFF; color: #2D2D2D; margin: 0; padding:0 17px;outline: 0; border-radius: 3px; box-shadow: initial; line-height:62px; transition: all .1s; font-size: 18px; font-weight: 600; border:none; font-family: 'Raleway', 'sans-serif'; width: 86%;}input#sq:focus{color:#333;border-radius:0px;}#search-form{position:relative;margin:auto;}#searchsubmit{border: 0; color: #4C4C4C; display: inline-block; position: absolute; right: 0; top: 0; padding:0 50px; height:62px; transition: all .2s;}#searchsubmit:hover,#searchsubmit:focus,#searchsubmit:active{color:#fff;cursor:pointer;outline:0;}.search-form-icon{top: 28px; right: 45px; position: absolute; font-size: 25px;}input#sq::-webkit-input-placeholder,input#sq:-ms-input-placeholder{color:#777;}input#sq::-moz-placeholder,input#sq:-moz-placeholder{color:#777;opacity:1;}[type="search"] {-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;}#searchsubmit { background: #E4E4E4; border-radius: 0 3px 3px 0; }]
5. Now search for the </header> tag and paste this code below it.
[<div class="clear"><div class="promo-wrapper"><div class="promobg"><div class="promo"><h1></h1><h1>High Quality Free and Premium Blogger Templates</h1>Get 100% completed access to our entire collection of blogger templates 2016 for free. MS Design provide high quality, Responsive, Creative and Professional Blogger Templates. Here is unlimited collection of <b>Free Blogger Templates</b>. Are you looking for High Quality <b>Premium Blogger Templates</b> to buy? Here is top best free and premium blogger templates for you.<br /><br /><a class="trbutton" href="https://www.blogger.com/blogger.g?blogID=6483980516251841887#">Why us!</a><a class="trbutton" href="https://www.blogger.com/blogger.g?blogID=6483980516251841887#">Order Now</a><br /><br /><center><div id="search-bar"><form action="/search" id="search-form" method="get"><input id="sq" name="q" placeholder="Search here..." type="text" value="" /><input id="searchsubmit" type="submit" value="" /></form><span class="search-form-icon"><span class="fa fa-search"></span></span></div></center></div></div></div><div class="clear"></div></div>]
Hope you like this widget. If you have any problem please let me know below in comments.
I'll help to resolve it as soon as I can.
This article "Responsive Search Bar Widget With Unique Font Style For Blogger Blog/Website" is protected by
COMMENTS