Box Personalizada de Curtir FanPage no Facebook e Seguir no Twitter

Nesta postagem compartilho com vocês esta box super elegante para deixar o Design do seu blog ainda melhor!!!

Já havia mostrado a algum tempo atrás uma box semelhante a essa. 

Caso queria ver este outro modelo, veja:
http://dicashot.blogspot.com.br/2013/11/box-personalizada-de-curtir-fanpage-no.html

Para ver uma demonstração desse código, basta clicar no link abaixo:
http://vovoxarope.blogspot.com.br/

Para coloca-la no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag

]]></b:skin>

Tendo encontrada a tag, ACIMA dela cole o seguinte código

/* Box Personalizada de Curtir FanPage no Facebook e Seguir no Twitter By DicasHot
------------------------------------------------------------------------------------------------------------------------- */
#facebox {
background: url(http://i.imgur.com/rPN8KIf.png) no-repeat;
width: 312px;
height: 215px;
margin: 0 0 10px 0;
}
.curta {
width: 300px;
height: 52px;
background: url(http://i.imgur.com/uQDFg9d.png) no-repeat;
position: relative;
top: 6px;
left: 6px;
z-index: 999;
}
.bgblack {
width: 292px;
height: 137px;
position: relative;
background: url(http://i.imgur.com/0got4zG.png) no-repeat;
top: 14px;
left: 10px;
z-index: 888;
}
.likesface {
width: 292px;
height: 30px;
position: relative;
top: 14px;
left: 0;
text-align: center;
color: #fff;
font-size: 22px;
font-family: 'Luckiest Guy', cursive;
text-shadow: 1px 1px 2px #000;
}
.movelike {
width: 59px;
height: 22px;
overflow: hidden;
position: relative;
top: 58px;
left: 110px;
}
.likebutton {
position: relative;
top: -57px;
left: -64px;
}
.boxmove {
width: 306px;
height: 209px;
position: relative;
top: -186px;
left: 3px;
overflow: hidden;
z-index: 1;
}
.boxfaces {
position: relative;
top: -99px;
left: -11px;
}
#ttbox {
background: url(http://i.imgur.com/5xbWudc.png) no-repeat;
width: 312px;
height: 54px;
margin: 0 0 10px 0;
}
.ttcount {
width: 220px;
height: 24px;
position: relative;
top: 15px;
left: 58px;
text-align: left;
color: #fff;
font-size: 18px;
font-family: 'Luckiest Guy', cursive;
text-shadow: #35a7cf 1px -1px, #35a7cf -1px 1px, #35a7cf 1px 1px 2px, #35a7cf -1px -1px;
z-index: 5;
}
.seguir {
width: 62px;
height: 22px;
position: relative;
top: -7px;
left: 240px;
z-index: 20;
}

Tendo colado o código, salve e pode fechar, por que esta parte já está finalizada.

Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

<div id='facebox'>
<div class='curta'></div>
<div class='bgblack'>
<div class='likesface'>
<script src='http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=395132073931880' type='text/javascript'></script> 1025 pessoas <br/> já curtiram. Curta também!
</div>
<div class='movelike'>
<div class='fb-like-box likebutton' data-colorscheme='light' data-header='true' data-height='225' data-href='https://www.facebook.com/dicashot' data-show-border='false' data-show-faces='true' data-stream='false' data-width='200'></div>
</div>
</div>
<div class='boxmove'>
<div class='fb-like-box boxfaces' data-colorscheme='light' data-header='false' data-height='500' data-href='https://www.facebook.com/dicashot' data-show-border='false' data-show-faces='true' data-stream='false' data-width='400'></div>
</div>
</div>
<div id='ttbox'>
<div class='ttcount'>1000seguidores</div>
<div class='seguir'><a class='twitter-follow-button' data-lang='pt' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/DicashotBlogger'>Seguir</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>                                                                                                                                                   Widget by <a href="http://dicashot.blogspot.com.br/2014/04/box-personalizada-de-curtir-fanpage-no.html" target="_blank">DicasHot</a>

Substitua as partes destacadas de azul. Tendo feito isto, está pronto!!!

Deixe seu comentário.