Mecanismo de busca com efeito Hover

Quando se pensa em mecanismo de busca sempre buscamos o melhor.
Alguns blogueiro preferem por instalar mecanismo do google, eu ja não sou muito fã, em meus blogs sempre instalo search personalizados por mim.
Nesse postagem vou mostras um tutoria de um search com efeito Hover

#search {background:#ddd; border:1px solid #fff; border-bottom:1px solid #bababa; padding-left:10px;}
input#q {
border: 0px solid #bababa;
padding: 4px 4px 4px 4px;
font-family: "Cuprum", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-style:solid;
border-width: 1px;
border-color:#bababa;
margin-left:5px;
background-color:#f0f0f0;
min-width:245px;
margin:10px 5px;
padding-left:30px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5eheiMoJCBtah8KjhD9G0tBBlO1AiwV9tCDCZL6oSggzvElMMJXxe7RmEkjVdGXCuXEBEtcoHmu8UylXd-iVYcMRa3M-k4Z7icx_zOLaVQ7TsXlMXQAcwqu-4Exp3IDo4aeVSiYYzLt4/');
background-repeat:no-repeat;
background-position:2px center;
}

input#q:hover {
background-color:#f3f3f3;
}

input#search-submit {
border: 0;
width: 50px;
height: 28px;
position: absolute;
margin: 0px 0 0 -4px;
cursor: pointer;
font-size:10px;
color:#c0c0c0;
text-shadow:1px 1px 1px #fff;
-webkit-border-radius: 0 3px 3px 0px;
-moz-border-radius: 0 3px 3px 0px;
border-radius: 0 3px 3px 0px;
background-color:#fff !important;
background-repeat:repeat-x;
background-position:center bottom;
border-style:solid;
border-width:1px;
border-color:#ddd #ccc #ccc #ddd;
display:none;
}

Menu horizontal multe cores

Que tal colocar em seu blog um menu com estilo bem diferente dos convencionais visto por ai. Ultilizando cores que podem ser alteradas de acordo com as cores do seu blog ou site.
Siga o tutorial abaixo:



1 - Copie o codigo CSS abaixo:

/* = Menu Multe cor 
=============================== */
.c1, #blog h2 a {color:#71b50a;} /* verde */
.c2, #zine h2 a {color:#d81630;} /* marron */
.c3, #proj h2 a {color:#e18329;} /* Laranja */
.c4, #comm h2 a {color:#004883;} /* azul claro */
.c5, #shop h2 a {color:#099;}    /* azul */
.c6 {color:#fc0;} /* yellow */
.c7  #podc h2 a {color:#578092;}
/* backgrounds */
.b1 {background-color:#71b50a;}
.b2 {background-color:#d81630;}
.b3 {background-color:#e18329;}
.b4 {background-color:#004883;}
.b5 {background-color:#099;}
.b6 {background-color:#fc0;}
.b7 {background-color:#578092;}
/*-----------------------------------------------
BlogsEdit - Dicas, Ferramentas para blogs
     URL:   http://blogsedit.blogspot.com/
    Nome:   Menu horizotal Colorido
    Designer:   P.Victor
----------------------------------------------- */
/* ======== definições de cor ======== */
.mcblog {color:#71b50a;} /* verde */
.mczine {color:#d81630;} /* vermelho */
.mcproj {color:#e18329;} /* Laranja */
.mccomm  {color:#004883;} /* azul claro */
.mcshop  {color:#099;}    /* Azul */
.mcpodc  {color:#578092;} /* azul acinzentado */
    /* ======== CRAFT ======== */
.ccblog {color:#00adbf;} /* Azul */
.cczine {color:#d54a5c;} /* rosa */
.ccproj {color:#f9a976;} /* pêssego */
.cccomm {color:#9cc83e;} /* verde */
.ccshop {color:#543b27;} /* marrom */
.ccpodc {color:#828425;} /* verde escuro */

/* top nav colors */
ul#topnav {margin:0;}
ul#topnav li a:hover, ul#topnav li em a {background-color:#fff;font-style:normal;}
ul#topnav li.b1 a:hover, ul#topnav li.b1 em a {color:#71b50a;}
ul#topnav li.b2 a:hover, ul#topnav li.b2 em a {color:#d81630;}
ul#topnav li.b3 a:hover, ul#topnav li.b3 em a {color:#e18329;}
ul#topnav li.b4 a:hover, ul#topnav li.b4 em a {color:#004883;}
ul#topnav li.b5 a:hover, ul#topnav li.b5 em a {color:#099;}
ul#topnav li.b6 a:hover, ul#topnav li.b6 em a {color:#fc0;}
ul#topnav li.b7 a:hover, ul#topnav li.b7 em a {color:#578092;}

/* navigation */
ul#topnav {clear:both;height:2em;padding:0;}
ul#topnav li {width:152px;float:left;/* display:inline-block; */list-style:none inside;margin-right:6px;padding:2px;}
ul#topnav li.b5 {margin:0;}/*___ http://blogsedit.blogspot.com/ ___*/
ul#topnav li a {display:block;width:152px;float:left;text-align:center;font-size: 14px;font-weight:bold;color:#fff;text-decoration:none;line-height:1.7em;white-space:nowrap;}

2 - Cole antes de:

]]></b:skin>

3 - Copie o codigo HTML abaixo:

HOME
BlogsEdit
Vtop-videos
Projects
Forum/Community
Abolt

4 - Escolha onde quer que o menu apareça e cole.   Entre <body>aqui</body>

Espero que gostem!! Duvidas comentem abaixo.

Navegação Numerada para o blogger

Adicione em seu blog uma ferramenta que ajudará bastante seus usuários
"A navegação das paginas com numeros"


1 - Não é necessário Expandir modelos de widgets.

2 - Copie o codigo abaixo.

.blog-pager,#blog-pager{
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:12px;
width:500px;
}
.showpageNum a,.showpage a {
background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;
border:1px solid #97a7af;
margin:0px 1px 0 1px;padding:3px 8px;
text-decoration:none;
color:#333;line-height:14px;cursor:pointer;white-space:nowrap;
-webkit-border-radius:3px;-moz-border-radius:3px;
}
.showpageNum a:hover,.showpage a:hover {
background-image:url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png');
border:1px solid #e4905a;color:#e4905a;text-decoration:none;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png') repeat-x;
margin:0 3px 0 3px;padding:3px 8px;
line-height:14px;cursor:pointer;white-space:nowrap;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold;
}

2 - Cole acima da tag:

]]></b:skin>

3 - Copie o java a baixo.

<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>;
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

4 - Cole acima de

/body

obs:Recomendo que use o ( Ctrl + F ) para pesquisar os codigos