Why search google custom search not showing properly?


#1

Hey, everyone! @Shivansh @technohalf

i installed google custom search engine into my blogger template, but instead of appearing like below like MBT had, why it is appearing in another format?

i tried to solve the issue by editing the code, but no use.

How can i overcome this…?

thanks

samara


#2

Give your website url i have to check css code to make it perfect


#3

http://samarassrtestblog.blogspot.in/ here it is


#4

Here is the css code it hard to edit in your template because it refresh every time when i testing the last line of code.

But All’s well that ends well

 .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
  height: 26px;
  background: #6FC415 url("http://www.google.com/uds/css/v2/search_box_icon.png") no-repeat center;
  border-color: #6FC415!important; 
}
.cse input.gsc-search-button:hover, input.gsc-search-button:hover{
  background: #282C2F url("http://www.google.com/uds/css/v2/search_box_icon.png") no-repeat center;
  border-color: #282C2F!important;
}

#5

sorry for that, template is set to refresh itself for every two mins…

now i removed it

thanks for the early solutions :smiley:


#6

that didn’t worked!

same appearing again


#7

Sorry to say I don’t see mention CSS code if you have added in template


#8

@technohalf yep! now i implemented it on template.


#9

Just add !important mark in above mention css code like this

.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
  height: 26px !important;
  background: #6FC415 url("http://www.google.com/uds/css/v2/search_box_icon.png") no-repeat center !important;
  border-color: #6FC415!important; 
}
.cse input.gsc-search-button:hover, input.gsc-search-button:hover{
  background: #282C2F url("http://www.google.com/uds/css/v2/search_box_icon.png") no-repeat center !important;
  border-color: #282C2F!important;
}

It work perfectly :smiley:


#10

cool man, but there is something still lacking with this search engine

here is the effect after adding the above code


#11

I would love to know What is lacking in your result

I don’t understand anything please tell me in breif


#12

Sorry i didn’t look at that put the code

input#gsc-i-id1{
  position: relative;
top: -18px;
}

#13

thanks man. you are cool. this time it worked. you can check the blog now :smiley:


#14

Oh sorry @SamaraSsr, I am late! Looks like @technohalf already solved your problem.

By the way, I had published a tutorial about how to customize google search box. This tutorial can help you for your further needs. :smile:

:link: How to Customize Google Custom Search Engine Using CSS?