Instalando social widget com search box efeito esconder

Search Social widget animated


Hoje vamos compartilhar esse widget que faz a diferença isso tem redes sociais e também sistema de busca quando clicado isso esconde os botões de redes sociais para ter um efeito legal para adicionar isso no seu template siga os passos abaixo


Instalando social widget com search box efeito esconder 

Faça login no blogger então va no menu tema então editar HTML com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e antes disso copie e cole o seguinte código:

.search-sosprofil {
  position: relative;
  width: 250px;
}

#search-box {
  width: 100%;
  padding-right: 38px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#search-box form {
  position: absolute;
  top: 0;
  right: 38px;
  display: block;
  height: 30px;
  padding: 0;
  margin: 0px;
  border: 1px solid #dedede;
  border-radius: 3px;
  line-height: 30px;
  background: #fff;
}

#search-form,
.search-button {
  border: none!important;
  line-height: 28px
}

#search-form {
  color: gray;
  width: 100%;
  padding: 0 30px 0 10px;
  height: 28px;
  font-size: 14px;
  margin: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.search-button {
  padding: 0 10px;
  text-align: center;
  margin: 0;
  top: 1px;
  right: 1px;
  font-size: 16px;
  color: #888;
  position: absolute;
  background: none;
  cursor: pointer;
}

#search-form:focus,
#search-form:hover,
.search-button:focus,
.search-button:hover {
  border: none;
  outline: 0;
  color: #000
}

.sos-profil {
  position: absolute;
  top: 2px;
  right: 38px;
}

.sos-profil ul {
  padding: 0!important;
  margin: 0!important;
}

.sos-profil li {
  display: inline-block;
  margin-left: 5px
}

.sos-profil a {
  color: #555;
  font-weight: 500;
  font-size: 24px
}

.sos-profil a:hover {
  color: #000!important
}

#search-box,
#close-icon {
  display: none;
}

.search-icon {
  color: #555;
  float: right;
  cursor: pointer;
}

.search-icon .fa-search,
.search-icon .fa-times {
  color: #fff;
}


Se pretende colocar a caixa de buscas a direita então esse é o seguinte código:

.search-sosprofil {
  position: relative;
  width: 250px;
  float:right
}


Código Html 

<div class='search-sosprofil'>
  <div id='search-box'>
    <form action='/search' method='get'>
      <input id='search-form' itemprop='query-input' name='q' placeholder='Search here and hit enter' required='required' type='text' />
      <button class='search-button' title='Search' type='submit'><i class='fa fa-search'></i></button>
    </form>
  </div>
  <div class='sos-profil' id='sos-profil'>
    <ul>
      <li><a href='https://www.facebook.com/your-username' target='_blank' title='Facebook'><i class='fa fa-facebook-square fa-lg'></i></a></li>
      <li><a href='https://twitter.com/your-username' target='_blank' title='Twitter'><i class='fa fa-twitter-square fa-lg'></i></a></li>
      <li><a href='https://www.google.com/your-username' target='_blank' title='Google+'><i class='fa fa-google-plus-square fa-lg'></i></a></li>
      <li><a href='id.linkedin.com/in/your-username' target='_blank' title='LinkedIn'><i class='fa fa-linkedin-square fa-lg'></i></a></li>
      <li><a href='//www.youtube.com/c/your-username' target='_blank' title='Youtube'><i class='fa fa-youtube-square fa-lg'></i></a></li>
    </ul>
  </div>
  <div class='search-icon' onclick='openSosprofil()'>
    <div class="fa-stack" id="search-icon">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-search fa-stack-1x"></i>
    </div>
    <div class="fa-stack" id="close-icon">
      <i class="fa fa-square fa-stack-2x"></i>
      <i class="fa fa-times fa-stack-1x"></i>
    </div>
  </div>
</div>


Então instale o JS acima de </body> 

function openSosprofil() {
    var e = document.getElementById("sos-profil");
    "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
    var e = document.getElementById("search-box");
    "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
    var e = document.getElementById("search-icon");
    "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";
    var e = document.getElementById("close-icon");
    "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";
  };

Salve e pronto.

Click to comment