Agora vocês vao aprender a colocar a caixa de curti, NA FRENTE DO BLOG
1º - Acesse o Painel Blogger e clique na Guia Modelo.
2º - Em seguida clique no Botão Editar HTML.
3º - Depois Segure as teclas CTRL+F e procure por:
</head>
4º - E ACIMA dele cole o seguinte código:
<link media="screen" rel="stylesheet" href="http://dl.dropbox.com/u/44914301/codigos/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/44914301/codigos/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
$.colorbox({width:"700px", inline:true, href:"#subscribe"});
}
});
</script>
5º - Em Seguida Segure as teclas CTRL+F novamente e procure por:
]]></b:skin>
6º - E ACIMA dele cole o seguinte código:
#subscribe {font: 12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}
.box-tagline {color: #999;font-size: 14px;margin: 0;text-align: center;}
.box-side.left {padding: 0 30px 0 15px;border-right: 1px solid #ecedf3;}
.box-icon {width: 72px;height: 54px;padding: 6px 0 0 0;margin: 0 auto;}
.box-icon a.rss{display: block;width: 70px;height: 56px;margin: 0 auto;}
.box-icon a{display: block;width: 72px;height: 54px;}
.box-icon a.email img,.box-icon a.rss img {margin: -5px 0 0;border: 0 none;}
.box-side h4, .box-side h4 a {font-size: 14px;line-height: 14px;color: #f26535;font-weight: bold;}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {font-size: 11px;color: #5e6066; line-height: 18px;margin: 0 0 20px 0;}
.box-side h4 a:hover {color: #f26535;}
.demo {display:none;}
#subscribe{font:12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited{text-decoration:none;}
#subs-container{position:relative;padding:35px 0 30px;}
.box-icon{width:72px;height:54px;margin:0 auto;padding:6px 0 0;}
.box-icon a.rss{display:block;width:70px;height:56px;margin:0 auto;}
.box-icon a{display:block;width:72px;height:54px;}
.box-icon a.email img,.box-icon a.rss img{border:0 none;margin:-5px 0 0;}
.box-side h4,.box-side h4 a{font-size:14px;line-height:14px;color:#f26535;font-weight:700;}
.box-side h4{margin:20px 0 10px;}
.box-side h5{font-size:11px;color:#5e6066;line-height:18px;margin:0 0 20px;}
.box-side h4 a:hover{color:#f26535;}
#cboxLoadedContent {overflow: hidden !important;}
7º - E agora segure as teclas CTRL+F e desta vez procure por:
<body>
8º - E ABAIXO dele cole o seguinte código:
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h2 class='box-title' style='text-transform: uppercase;color: #2C2D31;font-size: 20px;font-weight: 700;text-align: center;margin: 10px 0;'>Curta Nossa Página do Facebook!</h2>
<div class='clearfix' id='subs-container' style='position: relative;padding: 35px 0 0px;'>
<div class='box-side left' style='width:130px;text-align: center;border-right:1px solid #ecedf3;padding:0 20px 0 15px;'>
<li style='font-size: 14px;font-family: arial;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfpIUYsHttzSSoIz3_xG9E6UhGb83T7tb0cYnOFVEgORXOrfofuWAL2lC21cfFoCoGWeZH-1fPd1_jcQAbEGqx6vwLu2izpS3mMyi1pHTXxhLyHKTXM3bPhwNFIFl5PY9vErRRndg4Xk8/s1600/facebook.png'/></li>
</div>
<div class='box-side right' style='height: 265px;float:right;margin-top:-236px;margin-right:25px;'>
<div class='facebook' style='margin-top: 90px;margin-left: -240px;'><script src='http://static.ak.connect.facebook.com/connect.php' type='text/javascript'/><script type='text/javascript'>FB.init("03e59f87270d961f8eefad76d5e70643");</script><fb:fan connections='26' css='http://dl.dropbox.com/u/44914301/codigos/css/facebook-estilo.css' logobar='0' profile_id='245873348802443' stream='0' width='480'/> </div></div></div></div></div>
9º - Em seguida clique em Salvar Modelo (lembre-se de substituir o ID da Página).
http://www.youtube.com/watch?v=L17uyBRXzbI video aula
0 comentários:
Postar um comentário