Inicio     Anuncie     Equipe     Parceria     Editar #
Icon Icon

Fantástica Box para Seguir No Twitter Fixada no Blog com Efeito Jquery


Fantástica Box para Seguir no Twitter 
Vamos ao Tutorial:
 
1º – Acesse o Painel do seu Blog e clique na Guia Modelo.

2º – Em seguida, clique em Editar HTML.

3º – Segure as Teclas CTRL+F e procure por:
]]></b:skin>

4º – E Acima dele cole o Seguinte código:

#bcf-box, #bcf-box * {}
#bcf-box {bottom: -300px;font: 13px "Helvetica Neue",sans-serif;position: fixed;right: 10px;z-index: 999999;}
.loggedout-follow-typekit {margin-right: 4.5em;}
#bcf-box a.bcf-box-b {background-color: #464646;background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px);border: 0 none;box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);color: #CCCCCC;display: block;float: right;font: 13px/28px "Helvetica Neue",sans-serif;letter-spacing: normal;outline-style: none;outline-width: 0;overflow: hidden;padding: 0 10px 0 8px;text-decoration: none !important;text-shadow: 0 -1px 0 #444444;}
#bcf-box a.bcf-box-b {border-radius: 2px 2px 0 0;}
#bcf-box a.bcf-box-b span {background-attachment: scroll;background-clip: border-box;background-color: transparent;background-image: url(http://dl.dropbox.com/u/44914301/codigos/boxs-seguir/v2/twitter-icon.png);background-origin: padding-box;background-position: 0px 1px;background-repeat: no-repeat;padding-left: 20px;}
#bcf-box a:hover span, #bcf-box a.bcf-box-b.open span {/*background-position: 0 -117px;*/color: #FFFFFF !important;}
#bcf-box a.bcf-box-b.open {background: none repeat scroll 0 0 #333333;}
#box-bcf-v2 {background: none repeat scroll 0 0 #464646;border-radius: 2px 0 0 0;color: #FFFFFF;margin-top: 27px;padding: 15px;width: 200px;}
div#box-bcf-v2.open {box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
#box-bcf-v2 div {overflow: hidden;}
#bcf-box h3, #bcf-box #box-bcf-v2 h3 {color: #FFFFFF;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 20px;font-weight: 300;margin: 0 0 0.5em !important;text-align: left;text-shadow: 0 1px 0 #333333;}
#bcf-box #box-bcf-v2 p {color: #FFFFFF;font: 300 15px/1.3em "Helvetica Neue",Helvetica,Arial,sans-serif;margin: 0 0 1em;text-shadow: 0 1px 0 #333333;}
#box-bcf-v2 p a {margin: 20px 0 0;}
#bcf-box #box-bcf-v2 p.bit-contador-assinantes {font-size: 13px;}
#box-bcf-v2 input[type="submit"] {-moz-transition: all 0.25s ease-in-out 0s;border: 1px solid #282828;border-radius: 5px 5px 5px 5px;box-shadow: 0 1px 0 #444444 inset;color: #CCC;padding: 6px 20px;text-decoration: none;text-shadow: 0 1px 0 black;background: #606060;background: -moz-linear-gradient(top, #606060 1%, #2D2D2D 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#606060), color-stop(100%,#2D2D2D));background: -webkit-linear-gradient(top, #606060 1%,#2D2D2D 100%);background: -o-linear-gradient(top, #606060 1%,#2D2D2D 100%);background: -ms-linear-gradient(top, #606060 1%,#2D2D2D 100%);background: linear-gradient(top, #606060 1%,#2D2D2D 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#2d2d2d',GradientType=0 );text-transform: uppercase;cursor: pointer;border-image: initial;}
#box-bcf-v2 input[type="submit"]:hover {background: -moz-linear-gradient(center top , #333333 0%, #222222 100%) repeat scroll 0 0 transparent;box-shadow: 0 1px 0 #4F4F4F inset;color: #FFFFFF;text-decoration: none;}
#box-bcf-v2 input[type="submit"]:active {background: -moz-linear-gradient(center top , #111111 0%, #222222 100%) repeat scroll 0 0 transparent;box-shadow: 0 -1px 0 #333333 inset;color: #AAAAAA;text-decoration: none;}
#box-bcf-v2 input[type="text"] {border-radius: 3px 3px 3px 3px;font: 300 15px "Helvetica Neue",Helvetica,Arial,sans-serif;border: 1px solid black;background: #EDEDED;background: -moz-linear-gradient(top, #EDEDED 2%, #DBDBDB 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#EDEDED), color-stop(100%,#DBDBDB));background: -webkit-linear-gradient(top, #EDEDED 2%,#DBDBDB 100%);background: -o-linear-gradient(top, #EDEDED 2%,#DBDBDB 100%);background: -ms-linear-gradient(top, #EDEDED 2%,#DBDBDB 100%);background: linear-gradient(top, #EDEDED 2%,#DBDBDB 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dbdbdb',GradientType=0 );padding: 5px !important;border-image: initial;outline: none;}
#box-bcf-v2 input[type="text"]:focus {border: 1px solid black;background: #F7F7F7;background: -moz-linear-gradient(top, #F7F7F7 2%, #EAEAEA 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#F7F7F7), color-stop(100%,#EAEAEA));background: -webkit-linear-gradient(top, #F7F7F7 2%,#EAEAEA 100%);background: -o-linear-gradient(top, #F7F7F7 2%,#EAEAEA 100%);background: -ms-linear-gradient(top, #F7F7F7 2%,#EAEAEA 100%);background: linear-gradient(top, #F7F7F7 2%,#EAEAEA 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 );outline: navajoWhite;border-image: initial;}
#box-bcf-v2.open {display: block;}
#bcf-box-botao {margin: 0 auto;text-align: center;}
#box-bcf-v2 #bcf-box-creditos {border-top: 1px solid #3C3C3C;font: 11px "Helvetica Neue",sans-serif;margin: 10px 0 -15px;padding: 7px 0;text-align: center;}
#box-bcf-v2 #bcf-box-creditos a {background: none repeat scroll 0 0 transparent;color: #AAAAAA;text-decoration: none;text-shadow: 0 1px 0 #262626;}
#box-bcf-v2 #bcf-box-creditos a:hover {background: none repeat scroll 0 0 transparent;color: #FFFFFF;}
.twitter-follow-button {margin: 0 auto;}

5º – Depois, segure as Teclas CTRL+F novamente e procure por:
</head>

6º – E Acima dele cole o Seguinte código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
jQuery.extend(jQuery.easing, {
easeOutCubic: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
});
jQuery(document).ready(function () {
var isopen = false,
bitHeight = jQuery('#box-bcf-v2').height();
setTimeout(function () {
jQuery('#bcf-box').animate({
bottom: '-' + bitHeight - 30 + 'px'
}, 200);
}, 300);
jQuery('#bcf-box a.bcf-box-b').click(function () {
if (!isopen) {
isopen = true;
jQuery('#bcf-box a.bcf-box-b').addClass('open');
jQuery('#bcf-box #box-bcf-v2').addClass('open')
jQuery('#bcf-box').stop();
jQuery('#bcf-box').animate({
bottom: '0px'
}, {
duration: 400,
easing: "easeOutCubic"
});
} else {
isopen = false;
jQuery('#bcf-box').stop();
jQuery('#bcf-box').animate({
bottom: '-' + bitHeight - 30 + 'px'
}, 200, function () {
jQuery('#bcf-box a.bcf-box-b').removeClass('open');
jQuery('#bcf-box #box-bcf-v2').removeClass('open');
});
}
});
});
</script>

7º – E por último, segure as Teclas CTRL+F e procure por:
<body>

8º – E Abaixo dele cole o Seguinte código:

<div class='loggedout-follow-normal' id='bcf-box'>
<a class='bcf-box-b' href='javascript:void(0)'><span id='bcf-box-texto'>Siga-nos no Twitter</span></a>
<div id='box-bcf-v2'>
<p>Gostou do Nosso Blog? Então Siga nosso Blog no Twitter:</p>
<p style='height: 25px;'><a href="https://twitter.com/NOME DO SEU TWITTER class="twitter-follow-button" data-show-count="false" data-lang="pt" data-size="large">Siga @NOME DO SEU TWITTER</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></p>
<div id='bcf-box-creditos'><a href='http://www.blogandocomfacilidade.com/' target='_blank'>Designer Completo Create</a></div>
</div><!-- #box-bcf-v2 -->
</div><!-- #bcf-box -->
  • Lembre-se de Substituir o campo Nome do Perfil no Twitter”. Você pode ter dificuldade para encontrar, mas procure no código, você encontrará. Um Nome do Perfil no Twitte é, por exemplo:bcf_oficial.
9º – Depois clique em Salvar Modelo.
Creditos :

0

0 comentários:

Postar um comentário