Carregando atualizações...

X
DH
E foi assim que aconteceu...
DH
Anitta com roupa cavada na favela do Rio de janeiro
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…
Teste de masculinidade
Teste de masculinidade
Então é essa que vocês querem de musa do blog?
Então é essa que vocês querem de musa do blog?
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