Tutorial Criar Box para Assinar Feed Fixada


Versão Completa de Demonstração da Box para Assinar Feed Fixada
Veja a Demonstração: http://demo6bcf.blogspot.com/
Hoje, iremos aprender a inserir uma Fantástica Box para Assinar Feed que fica Fixada no Blog, e ainda com Efeito Jquery. Esse Código Estava Disponível Apenas para WordPress, até que eu resolvi converte-lo para Blogger, e com alguns detalhes inclusos e alguns bugs corrigidos, além da compatibilidade com o Feedburner, que até então só era compatível com uma ferramenta de Assinar Feed do WordPress. Ele é muito elegante e Bonito, além de contar com um efeito muito legal em Jquery, que puxa a box para cima quando clicada, fazendo com que apareça os campos para preencher.
Eu fiz umas mudanças no Código e deixei-o com um Caixa de Inserir E-mail mais bonita, além de mudar muita coisa. Achei que os leitores gostariam de ver esse Plugin em Versão Blogger, só quero lembrar que não sei o nome o Plugin. Ficou Muito Legal, Vejam a Demonstração:

http://demo6bcf.blogspot.com/
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/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;}
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(&#39;#box-bcf-v2&#39;).height();
      setTimeout(function () {
          jQuery(&#39;#bcf-box&#39;).animate({
              bottom: &#39;-&#39; + bitHeight - 30 + &#39;px&#39;
          }, 200);
      }, 300);
      jQuery(&#39;#bcf-box a.bcf-box-b&#39;).click(function () {
          if (!isopen) {
              isopen = true;
              jQuery(&#39;#bcf-box a.bcf-box-b&#39;).addClass(&#39;open&#39;);
              jQuery(&#39;#bcf-box #box-bcf-v2&#39;).addClass(&#39;open&#39;)
              jQuery(&#39;#bcf-box&#39;).stop();
              jQuery(&#39;#bcf-box&#39;).animate({
                  bottom: &#39;0px&#39;
              }, {
                  duration: 400,
                  easing: &quot;easeOutCubic&quot;
              });
          } else {
              isopen = false;
              jQuery(&#39;#bcf-box&#39;).stop();
              jQuery(&#39;#bcf-box&#39;).animate({
                  bottom: &#39;-&#39; + bitHeight - 30 + &#39;px&#39;
              }, 200, function () {
                  jQuery(&#39;#bcf-box a.bcf-box-b&#39;).removeClass(&#39;open&#39;);
                  jQuery(&#39;#bcf-box #box-bcf-v2&#39;).removeClass(&#39;open&#39;);
              });
          }
      });
  });
</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'>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'>
<script language='javascript' src='http://dl.dropbox.com/u/44914301/codigos/boxs-seguir/v1/assinantes.js?uri=NOME DO SEU FEED AQUI' type='text/javascript'/> Leitores Assinaram </p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NOME DO SEU FEED AQUI&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><p><input name='email' onblur='this.value=(this.value==&quot;&quot;) ? &quot;Digite Seu E-mail&quot; : this.value;' onfocus='this.value=(this.value==&quot;Digite Seu E-mail&quot;) ? &quot;&quot; : this.value;' style='width: 95%; padding: 1px 2px&apos; type=&apos;text' type='text' value='Digite Seu E-mail'/></p>
<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>
                    <div id='bcf-box-creditos'><a href='http://www.somegadownload.com/' target='_blank'> <a href="http://somegatutorial.blogspot.com</a></div>
        </div><!-- #box-bcf-v2 -->
    </div><!-- #bcf-box -->
  • Lembre-se de Substituir os 3 Campos que Dizem “Nome do seu Feed”. Você pode ter dificuldade para encontrar, mas procure no código, você encontrará. Um Nome de Feed é por Exemplo: Somegatutorial/Feed.
9º – Depois clique em Salvar Modelo.
Walber 09:45 Nenhum comentário

Nenhum comentário :

Postar um comentário

Assinar: Postar comentários ( Atom )

Páginas

Links

Like us