.

sexta-feira

Textual description of firstImageUrl

Box Com Caixa de Pesquisa e Ícones Para Redes Sociais Com Efeito Hover

ACESSOS:
Deixe seu comentário


Nesta postagem compartilho com vocês esta box com redes sociais com efeito hover e incluído também uma caixa de busca muito elegante.

Para coloca-la no blogger... Entre em "Modelo" - "Editar HTML" e procure pela tag
]]></b:skin>
Tendo encontrada a tag, cole ACIMA dela o seguinte estilo css
.mok-metro-social
{
width:300px;
}
.mok-metro-social li
{
position:relative;
cursor:pointer;
padding:0;
list-style:none;
}
.mok-metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd
{
z-index:7;
float:left;
margin:2.5px;
position:relative;
display:block;
}
.mok-metro-social .tw
{
background:url(http://2.bp.blogspot.com/-esAYhZ0WX_8/UievR71RCfI/AAAAAAAAApY/3HmVHf-eFL4/s1600/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .fb
{
background:url(http://1.bp.blogspot.com/-8MhaSUxfs54/UievaWwh8wI/AAAAAAAAApg/Ayc_QDOhaSs/s1600/facebookf.png) no-repeat center center #1f69b3;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .gp
{
background:url(http://2.bp.blogspot.com/-QlFzrzjV2rk/UieviI3X_gI/AAAAAAAAApo/NV2RE4PdGag/s1600/google+plus.png) no-repeat center center #da4a38;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social .fd
{
background:url(http://2.bp.blogspot.com/-neaIqhI7NFY/Uievy52cmgI/AAAAAAAAApw/azxdLdwJaqE/s1600/feed.png) no-repeat center center #e9a01c;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.mok-metro-social li:hover .fb
{
background:url(http://4.bp.blogspot.com/-kFk6DAJxw-0/Uiev-p5EWkI/AAAAAAAAAp4/GIZSL2C4HdM/s1600/facebookfh.png) no-repeat center center #1f69b3;
 box-shadow:0px 0px 6px 3px #217BC0;
-webkit-box-shadow:0px 0px 6px 3px #217BC0;
-moz-box-shadow:0px 0px 6px 3px #217BC0;
-o-box-shadow:0px 0px 6px 3px #217BC0;
-ms-box-shadow:0px 0px 6px 3px #217BC0;
}
.mok-metro-social li:hover .tw
{
background:url(http://3.bp.blogspot.com/-KLRuyWFyE0g/UiewdiriHeI/AAAAAAAAAqA/EF5yeDFuDRk/s1600/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;
 box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.mok-metro-social li:hover .gp
{
background:url(http://1.bp.blogspot.com/-yRxV_RgEMKo/UiewmTs9LXI/AAAAAAAAAqI/b98sq1Hfm_o/s1600/google+plush.png) no-repeat center center #da4a38;
 box-shadow:0px 0px 6px 3px #F43431;
-webkit-box-shadow:0px 0px 6px 3px #F43431;
-moz-box-shadow:0px 0px 6px 3px #F43431;
-o-box-shadow:0px 0px 6px 3px #F43431;
-ms-box-shadow:0px 0px 6px 3px #F43431;
}
.mok-metro-social li:hover .fd
{
background:url(http://3.bp.blogspot.com/-DOnoIiGQ24Y/UiewuIglIaI/AAAAAAAAAqQ/j_k3cilHxhU/s1600/feedh.png) no-repeat center center #e9a01c;
 box-shadow:0px 0px 6px 3px #e9a01c;
-webkit-box-shadow:0px 0px 6px 3px #e9a01c;
-moz-box-shadow:0px 0px 6px 3px #e9a01c;
-o-box-shadow:0px 0px 6px 3px #e9a01c;
-ms-box-shadow:0px 0px 6px 3px #e9a01c;
}
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
}   
/* Form wrapper styling */
.form-wrapper {
    width: 280px;
}
/* Form text input */
.form-wrapper input {
    width: 215px;
    height: 20px;
    padding: 10px 5px;
    float: left;  
    font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
box-shadow: 0 0 6px rgba(0,0,0,.3) inset;
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    border-color: #51a7e8;
   box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}  
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 75px;
    background:url(http://3.bp.blogspot.com/-rN3GsiXDYw0/Uiew1zZQMsI/AAAAAAAAAqY/LxeFBxaOJz0/s1600/1367665345_search.png) no-repeat center center #a1488c;
    border-radius: 0 0 0 0;    
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
} 
.form-wrapper button:hover{   
      background:url(http://3.bp.blogspot.com/-rN3GsiXDYw0/Uiew1zZQMsI/AAAAAAAAAqY/LxeFBxaOJz0/s1600/1367665345_search.png) no-repeat center center #a1488c;
box-shadow:0px 0px 6px 3px #44D816;
-webkit-box-shadow:0px 0px 6px 3px #000;
-moz-box-shadow:0px 0px 6px 3px #000;
-o-box-shadow:0px 0px 6px 3px #000;
-ms-box-shadow:0px 0px 6px 3px #000;
} 
.form-wrapper button:active,
.form-wrapper button:focus{ 
    background:url(http://3.bp.blogspot.com/-rN3GsiXDYw0/Uiew1zZQMsI/AAAAAAAAAqY/LxeFBxaOJz0/s1600/1367665345_search.png) no-repeat center center #a1488c;
    outline: 0; 
}
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #a1488c transparent;
    top: 12px;
    left: -6px;
}
.form-wrapper button:hover:before{
    border-right-color: #a1488c;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #a1488c;
}    
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   
Agora, feche a seção editar html.

Agora entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código
<div class="mok-metro-social">
<li><a class="fb" href="http://www.facebook.com/"></a></li>
<li><a class="tw" href="http://twitter.com/"></a></li>
<li><a class="gp" href="https://plus.google.com/"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/"></a></li>
<form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;">
<input id="form-wrapper input" name="q" placeholder="  Buscar.... " required="" type="text">
<button type="submit"></button>
</form></div>
Tendo feito isto, basta salvar e pronto!!!

Cursos On-line 24 Horas - Educação a Distância de Qualidade
RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}


 
.