Birthday

July 14, 2012 is TipRicks's Birthday, Please Prepare and Send Good Wishes to its team!

UnderStood
TipRicks is under maintenance! If you found any error please let us know. Contact Us ×

Hello!

Click one of our representatives below to chat on WhatsApp

Support Customer Service Center
+923084774257
You can also send us an email to support@tipricks.com
Hello! What can I do for you?
×
How can I help you?

Responsive Search Bar Widget With Unique Font Style For Blogger Blog/Website

SHARE:

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.

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.
  1. First goto Blogger >> Dashboard>>Template.
  2. Click Edit  HTML button.
  3. 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




Was this article helpful?

Thanks! Your feedback will help us to improve our Services.

COMMENTS

BLOGGER
Need help? Contact to our support center at +92 308 477 4257
Name

Agriculture PPT Templates,2,AI Tools,1,Amazon,1,AskTipRicks,9,Blogger,48,Blogger-SEO,6,Blogger-Templates,1,Blogger-Tutorials,32,Blogger-Widgets,11,Blogging-Tips,7,Books,1,Business,1,Computer PPT Templates,1,Computer-Tutorials,1,Creative-PowerPoint-Templates,2,Digital Marketing,1,Domain,1,Ecommerce,1,Facebook,4,Free-Mobile-Data,1,Freenom,1,General,7,Google-Adsense,4,Google-Analytics,2,Google-Classroom,3,Instagram,2,Internet,1,Interviews,1,Islamic PPT Templates,1,jQuery,1,Marketing,1,Medical PPT Templates,1,Microsoft-Word,3,Mobile-Marketing,1,Motivation,1,MS Word,1,News,25,News-Updates,26,Oppo-Mobile-Features,1,PDF,1,PowerPoint-Templates,7,Resume-Templates,2,Reviews,3,SEO,8,Social-Media,6,Tech-News,15,TrueCaller,1,Twitter,1,Videos,24,Vlogging,1,Web-Hosting,1,Whatsapp,3,WordPress,8,WordPress-SEO,1,WordPress-Themes,1,WordPress-Tutorials,4,Youtube,5,
ltr
item
TipRicks Blog: Responsive Search Bar Widget With Unique Font Style For Blogger Blog/Website
Responsive Search Bar Widget With Unique Font Style For Blogger Blog/Website
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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh3EczaPnY8yB3YX8S2Fr1BKfw-lnygA9WT3zlvL53g2mKCZuCInXhKMQ9N_Q0YqhbevZwDl5x4TsnZ0VEwJFmagEY9tf8xJO8K-bNMSCXel-1Qut3zOU7N4jHQev0SQr1jFeZs_LHCjng/s320/responsive-search-bar-widget-with-unique-font-style-for-blogger-blog.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh3EczaPnY8yB3YX8S2Fr1BKfw-lnygA9WT3zlvL53g2mKCZuCInXhKMQ9N_Q0YqhbevZwDl5x4TsnZ0VEwJFmagEY9tf8xJO8K-bNMSCXel-1Qut3zOU7N4jHQev0SQr1jFeZs_LHCjng/s72-c/responsive-search-bar-widget-with-unique-font-style-for-blogger-blog.png
TipRicks Blog
https://blog.tipricks.com/2016/08/responsive-search-bar-widget-with-unique-font-style-for-blogger-blog-website.html
https://blog.tipricks.com/
https://blog.tipricks.com/
https://blog.tipricks.com/2016/08/responsive-search-bar-widget-with-unique-font-style-for-blogger-blog-website.html
true
7070217950916442682
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy