HOT POST

6/recent/ticker-posts

HOW TO ADD STYLISH SEARCH BOX FOR BLOGGER / BLOGSPOT

BLOG ANGLE OFFICIAL December 19, 2022
STYLE 1
input.gsc-input{background-color:#fff;border-color:#CDCDCD!important;padding:6px!important;border-radius:5px 0 0 5px!important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #ddd;padding:5px;border-radius:0 5px 5px 0;cursor:pointer}

STYLE 2
input.gsc-input{background-color:#fff;border-color:#62B3EC!important;padding:6px!important;height:17px;font-size:13px}input.gsc-search-button{margin-left:-1px!important;border:1px solid #62B3EC;padding:5px;border-radius:0 5px 5px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7FnDNOiZEfl12hDTV-oRsbkIQ3cWqDa2OHoTnwUvvO-Wjganw8dDJUgMxop0g7fOOySbfpprz52x-7SW29KFoqvsAdGb-VKDvwE0bXfjSE87ceEvOdcIbZEjpThK8UJAGHN3bAWPAeTH/s1600/Search-icon.png) no-repeat center;background-color:#62B3EC;background-size:15px}.gsc-search-button:hover{background-color:#3B78E7;border-color:#3B78E7;border-radius:0 5px 5px 0}

STYLE 3
table.gsc-search-box td.gsc-input{padding-right:5px!important}input.gsc-input{background-color:#fff;border-color:#CCC!important;padding:6px!important;height:17px;font-size:15px;color:#9F999D;border-radius:3px 0 0 3px;border-width:1px 0 1px 1px !important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #CCC;padding:5px;border-radius:0 3px 3px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRRW4cUOdBHmmsSNwN2em4myNlUCcQ30yNzDZfYNaoSfDlSXiulaTh22Rm6Yrl7re8W0AWHezJAywLDbU3VPYKaYH3MC8joRzswQN13gAT93xTsVVSRaBV5SCxefZgfjwZIAFFWZhypso/s1600/search-icon.png) no-repeat center;border-width:1px 1px 1px 0}
STYLE 4


table.gsc-search-box td.gsc-input{padding-right:40px!important}.gsc-search-button{display:none!important}input.gsc-input{padding:5px 0 8px 40px !important;height:22px;font-size:13px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important;box-shadow:2px 3px 3px #292929 inset;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7FnDNOiZEfl12hDTV-oRsbkIQ3cWqDa2OHoTnwUvvO-Wjganw8dDJUgMxop0g7fOOySbfpprz52x-7SW29KFoqvsAdGb-VKDvwE0bXfjSE87ceEvOdcIbZEjpThK8UJAGHN3bAWPAeTH/s1600/Search-icon.png) no-repeat scroll 16px 12px;background-color:#444;background-size:12px;text-shadow:1px 3px 3px #0B0A0A}
STYLE 5


Recommended: For perfect experience of this style use colorful background image.table.gsc-search-box td.gsc-input{padding-right:0!important}input.gsc-input{background-color:RGBA(0,0,0,0.5);padding:8px 15px!important;height:22px;font-size:15px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important}input.gsc-search-button{margin-left:-5px!important;margin-right:5px!important;padding:5px;border-radius:50%;cursor:pointer;font-size:0;height:30px;width:30px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRRW4cUOdBHmmsSNwN2em4myNlUCcQ30yNzDZfYNaoSfDlSXiulaTh22Rm6Yrl7re8W0AWHezJAywLDbU3VPYKaYH3MC8joRzswQN13gAT93xTsVVSRaBV5SCxefZgfjwZIAFFWZhypso/s1600/search-icon.png) no-repeat center;border-width:0}

STEPS TO ADD STYLISH SEARCH BOX FOR BLOGGER / BLOGSPOT

Step 1
  • Login to your blogger account > Dashboard > Template > Edit HTML



Step 2 
  • Click anywhere inside the code and find the following code (use Ctrl + F):]]></b:skin>
Step 3 
  • Just above ]]></b:skin> place you CSS code.
Step 4
  • Click Save template.
Tags:

Post a Comment

0 Comments