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.
Salam Guys, hope you are fine. As you know I have not published any blogger widget from a long time. I decided many times to publish a widget but I can't manage time to do this. My demo blog was deleted by google. I tried many things in that blog but maybe google thinks it's against the copyright policy.
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.
4. Now search for ]]></b:skin> tag and paste this code above it.
5. Now search for the </header> tag and paste this code below it.
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.
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