Tutorial - Como Colocar Caixa de Assinar Feed Fixa No Rodape




Entre no painel de seu blog e clique em design, editar html 
de ctrl+f e procure por: ]]></b:skin>




Acima de ]]></b:skin> 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/v1/feed-icon.png);background-origin: padding-box;background-position: 0px 2px;background-repeat: no-repeat;padding-left: 18px;}
#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;}


Agora procure por: </head>


Cole o seguinte código acima de : </head>

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>


Agora procure por: <body>


Cole o seguinte código abaixo de: <body>

<div class='loggedout-follow-normal' id='bcf-box'>
<a class='bcf-box-b' href='javascript:void(0)'><span id='bcf-box-texto'>Receba Nosso Feed</span></a>
<div id='box-bcf-v2'>
<p>Receba Todas as Nossas Atualizações em Seu E-mail:</p>
<p class='bit-contador-assinantes'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO SEU FEED AQUI" target='_blank'><input name='email' style='width: 95%; padding: 1px 2px' type='text' placeholder='Digite Seu E-mail'/>
<input name='uri' type='hidden' value='NOME DO SEU FEED AQUI'/>
<input name='loc' type='hidden' value='pt_BR'/><input type='submit' value='Assinar'/></form>
</p>
<div id='bcf-box-creditos'><a href='URL DO SEU BLOG' target='_blank'>NOME DO SEU BLOG</a></div>
</div><!-- #box-bcf-v2 -->
</div><!-- #bcf-box -->




No ultimo código vai ta escrito "NOME DE SEU FEED AQUI" faça as alterações e visualize se deu certo salve e pronto ! 

Nenhum comentário:

Postar um comentário

Postagem mais recente Postagem mais antiga Página inicial