Mostrando postagens com marcador CSS. Mostrar todas as postagens

Pague com um Twitter, Gostei ou Google +1


Propaganda é a alma do negócio e nada melhor do que o Facebook, Twitter e Google +1 para espalhar seu blog pela internet. Marqueteiros, Blogueiros e todos os profissionais do ramo sabem o quanto a mídia social é importante para a sobrevivência e para expansão dos websites, além de garantir um influxo de visitantes verdadeiros, esses visitantes podem também compartilhar a informação que encontraram no seu blog gerando o que se chama de marketing viral. Isto custa centenas de dolares se você decidir pagar por um serviço desse mas aqui no Templates para o Blogger você consegue isso com este simples código HTML.


Basta você editar as partes em vermelho e você tera o seu motor de promoção na mídia social grátis, sem custo algum, basta inserir o código abaixo premiando o compartilhamento de postagens suas. A parte em azul você deletar assim que estiver pronto com as partes em vermelho


Como funciona? O código abaixo insere um bloqueio temporário de um link de download, ou de qualquer coisa que você desejar esconder, assim que o usuário compartilhar através do Twitter, facebook ou google +1 o link que você escondeu passa a aparecer!









****
<html xmlns:fb="http://ogp.me/ns/fb#">
    <head>
        <title>Pague com um Twitter, Joinha do Facebook ou Google +1</title>
        /*  Pagamento Social por Templates para Blogger (2013)       */
        /*  Você está livre para usar, modificar ou republicar este código  */
    </head>
    <body>
    <div id="fb-root"></div>
    <script type="text/javascript">
 
        function labnol() {
          // A URL que os usuário vão fazer o download depois de dar  Gostei/tweet/+1
          var url = "http://templates-parablogger.blogspot.com.br/";  
          url = "<a href='" + url + "'>Clique aqui</a> para baixar esse arquivo.";
          document.getElementById("restricted").innerHTML = url;
        }
 
        window.fbAsyncInit = function() {
          FB.init({ status : true, cookie : true, xfbml  : true });
          FB.Event.subscribe('edge.create', function(response) { labnol(); });
        };
 
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
 
        window.twttr = (function (d,s,id) {
          var t, js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
          js.src="//platform.twitter.com/widgets.js"; 
          fjs.parentNode.insertBefore(js, fjs);
          return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
        }(document, "script", "twitter-wjs"));
 
        twttr.ready(function (twttr) {
          twttr.events.bind('tweet', function(event) {
            labnol();
          });
        });
 
        (function() {
          var po = document.createElement('script'); 
          po.type = 'text/javascript'; po.async = true;
          po.src = 'https://apis.google.com/js/plusone.js';
          var s = document.getElementsByTagName('script')[0]; 
          s.parentNode.insertBefore(po, s);
        })();
    </script>
 
     <div id="restricted">
 
      // Texto Padrão para quem for Twittar seu Blog    
      <a href="https://twitter.com/share"                                       
          data-text="Templates, Dicas, CSSe muito mais para Blogger Grátis no http://templates-parablogger.blogspot.com.br/" 
          data-via="eraizel" class="twitter-share-button" data-lang="br"></a>
 
      // A URL que o usuário precisa dar +1 no Google Plus
      <g:plusone size="medium" callback="Templates para Blogger"
          href="https://plus.google.com/111640408293412710367"></g:plusone>
 
      // O URL completo da sua página no Facebook vai aqui
      <fb:like href="https://www.facebook.com/pages/Templates-para-o-Blogger/583548061679594" send="false" 
          layout="button_count" width="220" show_faces="false"></fb:like>
 
     </div>
    </body>
  </html>
****

Efeitos 3D em Textos com CSS para o Blogger

Criar effeitos em 3D com CSS ficou muito mais fácil, veja abaixo que efeitos legais você pode criar com um simples código que funciona com uma Widget ou como efeito 3D no bem no meio do seu texto.



Para isso basta você editar o código abaixo na parte em vermelho com o seu texto, se você desejar alterar o tamanho do texto basta alterar a parte em azul


<style>
#animationWrapper  {
  width:200px;
  font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
  background:#222;
  padding:40px;
}

/* link which encapsulates SPANs */
#animationWrapper a {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 42px;
  line-height: 0.9em;
  margin-bottom: 10px;
  display: block;
  position: relative;
  color: #E58;
  text-decoration: none
}

/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
  -webkit-transition: all 0.12s ease-out;
  -moz-transition: all 0.12s ease-out;
  -o-transition: all 0.12s ease-out;
  -ms-transition: all 0.12s ease-out;
  transition: all 0.12s ease-out;
}

#animationWrapper span {
  display: block;
  color: #555;
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* special size for the first item */
#animationWrapper .span1 {
  font-size: 58px;
  line-height: 0.8em;
}

#animationWrapper a:hover {
    color: #fff ;
    top: -3px;
    left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
  color:#fff;
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}
</style>
<center>
<div id="animationWrapper">
<a href="http://templates-parablogger.blogspot.co.uk/">
    <span class="span1" style="margin-left: -20px;">Exemplo</span>
    <span class="span2" style="margin-left: -20px;">Efeitos</span>
    <span class="span3" style="margin-left: -20px;">3D em</span>
    <span class="span4" style="margin-left: -20px;">Textos</span>
  </a>
</div>
</center>

Se você preferir poderá fazer o download do efeito em 3d para o blogger em css através do link abaixo


CSS3 Puro com Menu Drop Down Multi-nivel




Adicionando um belo menu drop-down para o blog aumenta a beleza. Os Menus também ajudam os seus leitores a navegar facilmente através blog além de possibilitar que um único visitante veja mais páginas do seu site do que ele inicialmente teria visto caso haja dificuldade de navegação. Isso também é projetado com o uso de CSS3 puro como nós compartilhamos anteriormente. Este menu foi desenhado por Nick La do site webdesignerwall. Como sempre, eu tentei o meu melhor para explicar em um passo a passo o processo de instalação. Então, você só terá o trabalho de copiar e colar o código. Você pode adicionar esse menu como um widget HTML / JavaScript para que você não tenha editar o seu modelo :). Vamos ver como adicioná-lo ao blogger abaixo. 


Como Adicionar CSS3 Menu Suspenso Para O Blogger?


  • Vá para o Painel do Blogger> Projeto> Layout. (Em novo Painel de Interface do Usuário> Layout)
  • Clique em adicionar um Gadget que aparece  logo abaixo do cabeçalho (veja imagem abaixo)





(Nota - Se você não tem layout como na imagem acima deixe um comentário com o seu URL do blog eu irei ajudá-lo) 


  • Cole o código abaixo,


<style>
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcAnZeGhBVXVR2t3tJHochEKgnSl_ljXVDBZgyaQeUmDEGX_ZnC033wgL9l-Byp6PqOQ7P4ykYe3MOh5zUs9pmIvH_-4nT1SbC15YdRzrsr0EujmQNRJrPgfv7RHUuJSs2J6QLqz9Uaw/s1600/hb-gradient.png) repeat-x 0 -110px;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    width: 100%
}

#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    font-family: calibri;
}


/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding: 8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}

#nav a:hover {
    background: #000;
    color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcAnZeGhBVXVR2t3tJHochEKgnSl_ljXVDBZgyaQeUmDEGX_ZnC033wgL9l-Byp6PqOQ7P4ykYe3MOh5zUs9pmIvH_-4nT1SbC15YdRzrsr0EujmQNRJrPgfv7RHUuJSs2J6QLqz9Uaw/s1600/hb-gradient.png) repeat-x 0 -40px;
    color: #444;
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

#nav ul a:hover {
    background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcAnZeGhBVXVR2t3tJHochEKgnSl_ljXVDBZgyaQeUmDEGX_ZnC033wgL9l-Byp6PqOQ7P4ykYe3MOh5zUs9pmIvH_-4nT1SbC15YdRzrsr0EujmQNRJrPgfv7RHUuJSs2J6QLqz9Uaw/s1600/hb-gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
    display: block;
}

/* level 2 list */
#nav ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcAnZeGhBVXVR2t3tJHochEKgnSl_ljXVDBZgyaQeUmDEGX_ZnC033wgL9l-Byp6PqOQ7P4ykYe3MOh5zUs9pmIvH_-4nT1SbC15YdRzrsr0EujmQNRJrPgfv7RHUuJSs2J6QLqz9Uaw/s1600/hb-gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}

#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}

#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#nav {
    display: inline-block;
}

html[xmlns] #nav {
    display: block;
}

* html #nav {
    height: 1%;
}
</style>
<ul id="nav">
  <li>
            <a href="http://www.helperblogger.com/">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Folder 2</a>
            <ul>
                <li>
                    <a href="#">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.helperblogger.com/">Create This</a>
        </li>
    </ul>
Agora substitua os # com seus links e mude Pasta1, Pasta2 assim por diante com o texto que você quer que apareça no menu. 

Personalizações



Nota - eu recomendo que você use um editor de HTML para fazer suas mudanças. 


Precisa de Mais Ajuda?

Muitos blogueiros novatos encontram problemas ao executar tarefas simples como esta na adição de links e textos. Se você está tendo problemas, para fazer isso basta fazer uma esquema como se fosse uma árvore, todavia se eu notar que muita gente está tendo o problemas eu posso fazer um vídeo ensinando como criar. Sinta-se livre para me perguntar qualquer coisa.
Copyright © 2013 Template para Blogger | Free Blogspot Templates Traduzido por: Templates para Blogger