How Add Stylish Search Widget on Blogger

MD Mumin (ARYA)
7 May, 2022
Hello!
    Dear friends my name is ARYA KHAN today I am going to show you! how to add a stylish search widget on your blogger blog. 
    The main reason why most bloggers don't want to add this official search widget is, that the look and feel of the widget are very very simple but allow you to change the look of the widget. To style and customize your Search widget you must have knowledge of CSS, but many of you don't, that's why, I created 5 beautiful, professional and stylish themes for your widget. All you need to do is the simple copy-paste work. Go ahead, choose your design and follow the instructions.

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.


Code:

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}

Code:

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/AVvXsEhdHqI3PWEK2WbTAbvp05gkBxJHvsvC92xB6ieRV8nj2fifevQ2zq_Cnat64_oaPxj5mzaLuh9pWkmK4at9K6549rOLgQ1pEbQFnoN7_-xurmM3x4g6IMnHLRnFTLsGgF-T5Xzx3TOD8PAx/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}

Code:

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/AVvXsEiz4QgmmHBwaaf4AgLCVIRXiogaGh_WK-HdhT15WKp-mOKKkMpLAnIQxf2SO1h7nJSUhs00Wqrn0F2pZ3JxiTN9Ry19CW6wwx6Bi2-Bicr1tAVzq-X0tFAiUPwFSWJsgn95LfUvnPwLlCU/s1600/search-icon.png) no-repeat center;border-width:1px 1px 1px 0}

Code:

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/AVvXsEiz4QgmmHBwaaf4AgLCVIRXiogaGh_WK-HdhT15WKp-mOKKkMpLAnIQxf2SO1h7nJSUhs00Wqrn0F2pZ3JxiTN9Ry19CW6wwx6Bi2-Bicr1tAVzq-X0tFAiUPwFSWJsgn95LfUvnPwLlCU/s1600/search-icon.png) no-repeat center;border-width:0}

Next Post Previous Post