Carregando atualizações...

X
DH
E foi assim que aconteceu...
DH
A MULHER DOS SEUS SONHOS
Ana Otani e Sarah Caus em Live amadora no Instagram
Ana Otani e Sarah Caus em Live amadora no Instagram
Bella da Semana Mika
Bella da Semana Mika
Branquinha
Casal diferenciado
Garota linda ficando na webcam
Garota linda ficando na webcam
O tema de aniversario mais insano…
O tema de aniversario mais insano…
Negra muito gata peladona
Negra muito gata peladona
20 cosplayers muito bem feitas
20 cosplayers muito bem feitas
Novinha linda gravou peladinha na academia
Novinha linda gravou peladinha na academia
Whatsapp do SX
Whatsapp do SX

> > > > > > > >

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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitMWbWTvLJCUrMAskh0tOzMFjkzzLBcR3GuJCiGzkL-5F5sm9uV6v7Q2IpbEeFxuSW4hDunA2uBgfZWbSuADZAEeApql2Lm6xyDHcGgNv8nZsgH6uaxTxEwxGCk48TevA2R82CUFncDSw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI8d4r6YZt6hszYlFWUhttm2JXH3ZbH5jGglJpPT5gXiaG5_ITj2CLSqQgY0sZIvUt_gkBW7SV27eAf05solRUZOIyd3ZHIgErJ2Qe4tK5Y_2gpkVX1O-K-ukB3itihmJ29S-9L6TXeOo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjedbW5nUYCYY8RSwUSsK-BGs94smNoI0vdg8Us9ACBsu0CxDtAHjlXWpN0AmMnNc1ZIY4si_ulIq0P3wPtslOd2UyJbGp7bj-Gzi6IjrbldC7gAvo30mpW5zWJW5LjHukPpSlDVE8xnY0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD54rlmgioAhbDdhsxSorUQNxHNqkFgXJFuqReT_3NMf81wXLSkO5D-SnYP-mKaqAzakguYcgx6SxYWf1Hcy6h0Id03szd5jVfZqyy8nPkwMhBcUZfLx_07hpAf1T2N9TEYb9mcXAA6JY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLl6oeZx3LfCu_d65-KulA6P39C7pWLprxLHN4owHOHfWXOG4BZNHovJQsQKNUBxOh4YiMwy6z1voIdnwuhb6NTZIzUkpAAZAHp1LvI2cb20yKAw69Hsjfj8FFdRpe-W9RBubmvjkuOdY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX0NlnR88FujNmw4P9bmKDyThOTit3Rri1X4_vU5wuLS02-ixeZp2N2_9IQmkeIiYSFi3wxyLcsQzZzKEtNAt7qWReeXTr182m_Gjuok_7dgqsFY5qOZEPxvIZhoY2QuLBoKffG08ueb0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcVZBmLT5RoF0n3k_lNyqrxfIczofO8p6WuCx33wAirvvKQ0N6BqdnWoTBdDsscuY6SCThSb7c1T8Dyv7k-KqXoTJtLguAzAifBQazSxlmyRqSc1-wl2z9-HuWJ5ywxcg6iMmi6I71KMg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvF15kMAomZV09MGQssIiS788sT1rVhKp2wj-dvExNMmZi7181xk3eAqIAWHjBzy4kJStQsGOwjqmUwR-nxzLrXle8XIewdsDmHoG8vpTdVW_V2hbW965NmAKmMiCTyaD4nOfFaMY2S64/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_HNJDLw8amQ9i7vOvQ4kqDSVBCs6RdeSsnonhLle5DHwZdhr-DugMmPUvnTu_mTrf4nI5Jo9N2jgXKnq1XjybsyXZKIz1Cio5ngppPqke5xwWuuIM2M_Id-XYh90EHHU-eHK3k1h6kw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_HNJDLw8amQ9i7vOvQ4kqDSVBCs6RdeSsnonhLle5DHwZdhr-DugMmPUvnTu_mTrf4nI5Jo9N2jgXKnq1XjybsyXZKIz1Cio5ngppPqke5xwWuuIM2M_Id-XYh90EHHU-eHK3k1h6kw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_HNJDLw8amQ9i7vOvQ4kqDSVBCs6RdeSsnonhLle5DHwZdhr-DugMmPUvnTu_mTrf4nI5Jo9N2jgXKnq1XjybsyXZKIz1Cio5ngppPqke5xwWuuIM2M_Id-XYh90EHHU-eHK3k1h6kw/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

Categorias-tags:

COMENTÁRIOS FECHADO!

NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0