Box Personalizada de Curtir FanPage no Facebook - Exclusivo

Nesta postagem compartilho com vocês está fan-box muito procurada na net; muito procurada por causa de seu formato bem diferenciado das demais box. Muita gente acha que é complicada colocar no blogger, outras dizem que precisa instalar plugin e por isso só funciona em Wordpress  mas, eu estou aqui para mostrar para vocês com exclusividade que não é verdade, que tem sim em HTML. Espero que gostem!!!

Torne-se membro do site, basta clicar no botão abaixo e clicar em Seguir:

Veja uma demonstração do código:
http://dicashotteste2.blogspot.com.br/

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

<style>
.faceDicasHot {
background:url(http://i.imgur.com/NJDPpp0.jpg) no-repeat;
padding-top: 12px;
height:116px;
width:320px;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-weight:bold;
font-size:18px;
text-align:left;
text-shadow:0 2px 0 #364B74;
letter-spacing: 0px;
margin: 10px 0px 0px 0px;
padding: 36px 20px 21px 56px;}
.fbox {margin: 16px 3px 0 0; }
.limitarbox {
width: 213px !important;
height: 53px !important;
overflow: hidden !important;
position: relative;
}
.fb-like-box-DicasHot {
background-color: none;
margin-top: -100px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -12px;
}
.fb-like {
margin-top: 4px;
text-align: center;
width: 213px;
}
</style>
<div class="faceDicasHot">
                  Curta nossa página
                  <div class="fbox">
<div id="fb-root"></div>
<script>
                      (function(d, s, id) {
                        var js, fjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id)) return;
                        js = d.createElement(s); js.id = id;
                        js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
                        fjs.parentNode.insertBefore(js, fjs);
                      }(document, 'script', 'facebook-jssdk'));</script>
<div class="limitarbox">
<div class="fb-like-box-DicasHot fb_iframe_widget" data-border-color="#292526" data-colorscheme="dark" data-header="false" data-height="350" data-href="http://www.facebook.com/dicashot" data-show-faces="true" data-stream="false" data-width="260" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;color_scheme=dark&amp;header=false&amp;height=350&amp;href=http%3A%2F%2Fwww.facebook.com%2Fdicashot&amp;locale=pt_BR&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=260"><span style="vertical-align: bottom; width: 260px; height: 350px;"><iframe name="f194ab85f4" width="260px" height="350px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/plugins/like_box.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D28%23cb%3Df2aa0399e%26domain%3Dwww.mechuta.com.br%26origin%3Dhttp%253A%252F%252Fwww.mechuta.com.br%252Ff1a3ec9218%26relation%3Dparent.parent&amp;color_scheme=dark&amp;header=false&amp;height=350&amp;href=http%3A%2F%2Fwww.facebook.com%2Fdicashot&amp;locale=pt_BR&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=260" style="border: none; visibility: visible; width: 260px; height: 350px;" class=""></iframe></span></div>
</div>
<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-action="like" data-colorscheme="light" data-href="http://www.facebook.com/dicashot" data-layout="button_count" data-send="false" data-show-faces="false" data-width="213" fb-xfbml-state="rendered"><span style="height: 20px; width: 91px;"><iframe id="f11203dd94" name="f3f131a8b4" scrolling="no" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?action=like&amp;api_key=&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D28%23cb%3Df3dca6bd64%26domain%3Dwww.mechuta.com.br%26origin%3Dhttp%253A%252F%252Fwww.mechuta.com.br%252Ff1a3ec9218%26relation%3Dparent.parent&amp;colorscheme=light&amp;extended_social_context=false&amp;href=http%3A%2F%2Fwww.facebook.com%2FDicashot&amp;layout=button_count&amp;locale=pt_BR&amp;node_type=link&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=213" style="border: none; overflow: hidden; height: 20px; width: 91px;"></iframe></span></div>
</div>
</div>
<span style="font-size: xx-small;">
</span> 
<div style="text-align: right;">
<span style="color: #eeeeee; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/2013/11/box-personalizada-de-curtir-fanpage-no.html" target="_blank"><span style="color: #eeeeee;">DicasHot</span></a></span></div>

Nas partes destacadas de azul, você vai substituir pelo nome da sua página no Facebook. Tendo feito isto, está pronto!!!

Deixe seu comentário.