Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Explico melhor: preciso colocar uma busca do google personalizada dentro de um site (ela já me veio pronta, não tenho como fazê-la, pois não sei os parâmetros utilizados).
Se eu coloco a busca direto no site, não consigo editar a largura, o padding, a margin. Se eu coloco num iframe, fico com duas barras de rolagem, coisa que julgo abominável para um site institucional e educacional, como é o caso. Alguém tem alguma sugestão de como fazer isso?
Esse é o meu código...
<body>
<div id="page">
<div id="inicial">
<p>
<ul>
<li> <a href="pde/artigo.html"> Artigo </a></li>
<li> <a href="pde/material_didatico.html"> Material Didático</a></li>
</ul>
</p>
</div>
<center>
<div id="cse" style="width:95%; padding-left:20px; padding-right:20px;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'pt-BR'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('018192950835671084239:du3btnvoxyc');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');},
true);
</script>
</center>
<div id="rodp">
<p>notas de rodapé</p>
</div>
</div>
</body>
Olá amigo,
Estava dando uma olhada no seu código, é possível sim editar largura, altura, padding e margim, esse script monta o código html após renderizado, deste modo você pode usar um complemento do firefox como o firebug ou pressionando F12 no chrome e também no ie, mas o do ie não recomendo por ser muito ruim de utilizar, utilize o do firefox para navegar pelas tags e pegar as classes e id's para estilizar a pagina, fiz o teste e deu certo.
Algumas de classes que você pode estilizar:
.gsc-control-cse - Box Geral
.gsc-control-cse-pt-BR - Box Geral
.gsc-wrapper - BOX com resultados
.gsc-thinWrapper - BOX com resultados
.gsc-tabsArea - Abas do resultado
.gsc-input área do campo de texto e botão de pesquisa
.gsc-input input editar campo de texto
Da para fazer muita coisa com essas classes.
Sobre o iframe você consegui tirar o scroll com a opção overflow-x:hidden; - overflow-y:hidden; ou as duas overflow:hidden;
E ainda temos a opção de editar por javascript
Espero ter ajudado
Grande abraço.
Att
Sérgio Martins