12 de maio de 2016

Box para seguir no twitter fixada no blog com efeito jQuery


No Artigo de Hoje, nós iremos disponibilizar a Versão 1 da nossa box fixada no Blog, desta vez viemos com a versão para Twitter, apesar de mais simples e mais compacta, apenas contando com um botão para Seguir, a versão do Twitter continua trazendo a forma simples e bonita de ganhar seguidores, além de leve e simples, e que não atrapalha o leitor, como caixas pesadas que abrem automaticamente, ela ainda faz com que o perfil do Twitter do seu blog ganhe mais destaque de forma elegante.
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:
#codigosblogger-box, #codigosblogger-box * {}#codigosblogger-box {bottom: -300px;font: 13px "Helvetica Neue",sans-serif;position: fixed;right: 10px;z-index: 999999;}.loggedout-follow-typekit {margin-right: 4.5em;}#codigosblogger-box a.codigosblogger-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;}#codigosblogger-box a.codigosblogger-box-b {border-radius: 2px 2px 0 0;}#codigosblogger-box a.codigosblogger-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;}#codigosblogger-box a:hover span, #codigosblogger-box a.codigosblogger-box-b.open span {/*background-position: 0 -117px;*/color: #FFFFFF !important;}#codigosblogger-box a.codigosblogger-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;}#codigosblogger-box h3, #codigosblogger-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;}#codigosblogger-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;}#codigosblogger-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;}#codigosblogger-box-botao {margin: 0 auto;text-align: center;}#box-bcf-v2 #codigosblogger-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 #codigosblogger-box-creditos a {background: none repeat scroll 0 0 transparent;color: #AAAAAA;text-decoration: none;text-shadow: 0 1px 0 #262626;}#box-bcf-v2 #codigosblogger-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('#codigosblogger-box').animate({bottom: '-' + bitHeight - 30 + 'px'}, 200);}, 300);jQuery('#codigosblogger-box a.codigosblogger-box-b').click(function () {if (!isopen) {isopen = true;jQuery('#codigosblogger-box a.codigosblogger-box-b').addClass('open');jQuery('#codigosblogger-box #box-bcf-v2').addClass('open')jQuery('#codigosblogger-box').stop();jQuery('#codigosblogger-box').animate({bottom: '0px'}, {duration: 400,easing: "easeOutCubic"});} else {isopen = false;jQuery('#codigosblogger-box').stop();jQuery('#codigosblogger-box').animate({bottom: '-' + bitHeight - 30 + 'px'}, 200, function () {jQuery('#codigosblogger-box a.codigosblogger-box-b').removeClass('open');jQuery('#codigosblogger-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='codigosblogger-box'><a class='codigosblogger-box-b' href='javascript:void(0)'><span id='codigosblogger-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;'><iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='https://platform.twitter.com/widgets/follow_button.1324331373.html#_=1324781680884&_version=2&enableNewSizing=false&id=twitter-widget-4&lang=pt&preview=true&screen_name=NOME DO PERFIL NO TWITTER&show_count=false&size=l' style='width: 350px; height: 28px; ' title='Seguir no Twitter'/></p><div id='codigosblogger-box-creditos'><a href='http://www.codigosblogger.com/' target='_blank'>Desenvolvido por Codigos Blogger</a></div></div><!-- #box-bcf-v2 --></div><!-- #codigosblogger-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 Twitter é, por exemplo: blogger.

9º – Depois clique em Salvar Modelo.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

0 comentários: