Box Com Botões CSS - Contador de Seguidores no Facebook e Twitter - Exclusivo
Nesta postagem compartilho com vocês está box inédita!!! A box é super criativa sem contar que deixa seu blog muito mais moderno... A box foi desenvolvida com botões CSS o que a torna muito mais chamativa.
Primeiramente vamos aplicar o estilo CSS. Para fazer isso... Entre em "Modelo" - "Editar HTML" e procure pela tag
]]></b:skin>
Tendo encontrada a tag, cole ACIMA dela o seguinte estilo css
/* Contador de Seguidores no Facebook e Twitter By DicasHot
----------------------------------------------------------------------------------------- */
#twitterfacebook {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNM0EcCU0JonnWP0rqaLhmlEfhZYMjCCaMCpiM1BgKzzgba5pZS1cqEI-w6_g-clSAbzqd_mBpWlllzsMjsvYipNgJk4ONslEM0vVlVgHVyqqH7G4HToBE9qyWzJwkWSU4BvUkV0aA11xR/s1600/fb-tt.png) no-repeat;
width: 305px;
height: 170px;
}
.fbcount {
position: relative;
text-align: left;
top: 7px;
left: 93px;
font-size: 35px;
font-family: 'Della Respira', serif;
color: #3c5b9b;
}
.fbcount span, .ttcount span {
color: #000;
font-size: 20px;
position: relative;
top: -30px;
left: 0;
}
.ttcount {
position: relative;
text-align: left;
top: -1px;
left: 93px;
font-size: 35px;
font-family: 'Della Respira', serif;
color: #2daae1;
}
.buttonsft {
position: relative;
top: -178px;
left: 184px;
width: 40px;
}
.curtir {
width: 93px;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOQYUUlALYIADvkcSqvptv4SGy360fzwHKKJyzTMu5XNo-6KSRqfeY3a7X9Rv_wkSI8VLcS3o3-nyd_7ZASM0qSIjdqzYTPuk5mVsQoBALX2fJR-75E2fJYmpgn1fvBs0CC6WOE56r0YE/s1600/curta.png) 0 0;
position: absolute;
}
.curtir:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOQYUUlALYIADvkcSqvptv4SGy360fzwHKKJyzTMu5XNo-6KSRqfeY3a7X9Rv_wkSI8VLcS3o3-nyd_7ZASM0qSIjdqzYTPuk5mVsQoBALX2fJR-75E2fJYmpgn1fvBs0CC6WOE56r0YE/s1600/curta.png) 0 -42px;
}
.seguir {
width: 93px;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL7V-3TQjexG5qyyyM-AyM-DIdISjxJkJA3gTm9M9KOry6DYN6KLI2wzZsFBRx_9abCIDMFrXo6MVAZhHm93LbsJwaYyVu_C45AptJ7jjhEVGQMWSZNTdz97wopIbU-vm5mSQGeelPqK-s/s1600/seguir.png) 0 0;
position: absolute;
margin-top: 90px;
}
.seguir:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL7V-3TQjexG5qyyyM-AyM-DIdISjxJkJA3gTm9M9KOry6DYN6KLI2wzZsFBRx_9abCIDMFrXo6MVAZhHm93LbsJwaYyVu_C45AptJ7jjhEVGQMWSZNTdz97wopIbU-vm5mSQGeelPqK-s/s1600/seguir.png) 0 -42px;
}
#sidebar-wrapper {
float:right;
width:317px;
margin: 1px -8px 10px 0px;
}
.sidebar h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNgmv0Y42TLO0hNoy61WTEf32x2DQSA5SptW01pFuDHVe48MdSyS9xWUtUVqtDHr_VGk1fH4eaxxsXxvtot9jwNGXIY4EmTfkvfbGsfMwnfEwJQCZT2Ct_wTA6HWWuQHR1asSNvhHt2bBK/s1600/sidebar-title.png) no-repeat scroll 0 0 transparent;
color:#cacaca;
font-family: 'Della Respira', serif;
font-size:18px;
text-transform: uppercase;
font-weight: normal;
text-align: left;
width: 305px;
margin: 10px 0 2px 0;
padding: 8px 0 15px 12px;
}
.sidebar .widget-content {
width:300px;
text-align: left;
color: #000;
margin: -6px 0 2px 4px;
}
.sidebar {
padding:0;
margin:0;
}
.sidebar ul{
list-style:none;
padding:0;
margin:0;
}
.sidebar li{
padding:0;
margin:0;
}
.sidebar .widget {
margin:0;
padding:0;
}
Tendo colado, pode salvar e fechar está parte de edição.
Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código
<div id="twitterfacebook">
<div class="fbcount">
36957<br /><span>curtiram</span>
</div>
<div class="ttcount">
1436<br /><span>seguiram</span>
</div>
<div class="buttonsft"><a class="curtir" href="https://www.facebook.com/dicashot" target="_blank"></a><a class="seguir" href="https://twitter.com/Samuel12Oficial" target="_blank"></a></div>
</div>
Widget by <a href="http://dicashot.blogspot.com/">DicasHot</a>
Tendo colado o código, basta fazer as modificações nas partes destacadas de AZUL e pronto!!!
Por favor!!! Não tire os créditos que estão no Gadget.
Deixe seu comentário!!!
