Como colocar separadores entre as postagens

Colocar separadores entre os posts tornando-os mais apresentáveis e organizados.

Para colocá-los basta irmos em Design> Editar HTML, marcar a caixinha expandir modelos de widget e procurar pela linha:

<b:include data='post' name='post'/>

E logo abaixo cole o seguinte:

<center><img src='URL da imagem'/></center>

Basta colocar a URL da imagem no lugar indicado e teremos um separador nas postagens do blog.

Se preferir apenas uma linha, o código será esse:

<hr style='align:center; background:#660000;  border:0px; height:2px; width:1O0%;'/>

Em background, coloque a cor de sua preferência, em height, a altura da linha e em width a largura em porcentagem.

Clique em "Leia Mais".

Como Colocar Widget Últimas Novidades no Blogger

Widget últimas novidades que exibe de maneira automática as postagens recentes do blog e com ícones das principais redes sociais.

Colocar algo de destaque no blog pode ser um ponto crucial e fundamental para alcançar o objetivo desejado. Entre algumas opções que deparamos nem sempre são o que esperávamos e outras são muito complicadas para serem adaptadas às nossas exigências e, por isso, acabamos desistindo de colocar uma funcionalidade que tanto almejamos.

Um dos widgets de destaque mais procurados pelos blogueiros é o “Últimas Novidades” ou muitas vezes encontrados em templates profissionais intitulado de “Breaking News”. Esse código, por ser um pouco complexo, nem sempre é disponibilizado pela questão de estarem em templates pagos e praticamente “forçando” os donos de blogs a adquiri-los para poder usufruir dessa funcionalidade.

Widget Últimas Novidades (Breaking News) em seu blog

Aqui não te forçamos a nada e por isso trazemos esse sensacional Widget Últimas Novidades e ainda te ensinamos como colocar em seu blog. Com essa ferramenta, serão exibidas as postagens recentes “passando em fila” para que sejam apreciadas pelos visitantes e os mesmos possam saber que aqueles são novos artigos publicados em seu blog. Além disso, nesse widget você ainda poderá adicionar suas páginas e/ou perfis nas redes sociais e uma opção de contato, complementados com um atrativo efeito visual ao passar o mouse sobre os ícones, deixando-os com cor de fundo predominante de cada rede social.

O tutorial é bem simples e prático, após a conclusão seu blog contará com esse atrativo tão desejado e procurado que agora está em fácil alcance de suas mãos.

Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Colocar widget últimas novidades no Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

/*BREAKING NEWS BLOGGER WIDGET-------------*/

.head_brnews{

height:30px;background:#fff;width:100%;max-width:1160px;margin:0 auto;border-style: solid ;

border-width: 1px;border-color: #cccccc;overflow: hidden;width: 938px;margin-top:20px;}

.breaking-news{

float:left;

height:30px;

position:relative;

overflow:hidden;

margin-bottom:20px;

}

.breaking-news {

width:648px;font-family: 'Bree Serif', serif;}

.breaking-news marquee {

padding-top:5px;

}

.samazhlo {

background: #4371CF;position:absolute;

float: left;

padding: 0 10px;

height: 32px;

line-height: 30px;

color: #FFF;

font-family: Oswald,arial,Georgia,serif;

text-transform: uppercase;

font-size: 10pt;

margin-right: 10px;}

.breaking-news h4{

background: #9EC22D;

display:block;

float:left;

padding:0 10px;

height:32px;

line-height:30px;

color:#FFF;

font-family: Oswald,arial,Georgia,serif;

text-transform:uppercase;

font-size:10pt;

margin-right:10px

}

.breaking-news ul{

float:left

}

.breaking-news a:hover{

color:#333;

}

.breaking-news ul li{

float:left;

display:block;

list-style:none;

}

.breaking-news ul a{

padding:1px;

display:block;

color:#333;

white-space:nowrap;

float:left;

line-height:30px;

font-size:13px;

font-family: 'Droid Serif', serif;

display:hidden;

}

.breaking-news span{

display:block;

float:left;

padding:1px 10px;

color:#333;

font-size:12px;

line-height:30px;

}

#social { height:30px; float: right; }

#social .social_header { margin-bottom: 10px; }

#social a { border-left: 1px solid #ccc; transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; -webkit-transition: all 0.6s; }

#social a:hover {transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; -webkit-transition: all 0.6s; }

#social a.facebook { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:0px -30px; background-size: 270px 60px;  }

#social a:hover.facebook { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:0px 0px; background-size: 270px 60px;  background-color:#436eac; }

#social a.twitter { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-30px -30px; background-size: 270px 60px; }

#social a:hover.twitter { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-30px 0px; background-size: 270px 60px;  background-color:#0598c9; }

#social a.flickr { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-60px -30px; background-size: 270px 60px; }

#social a:hover.flickr { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-60px 0px; background-size: 270px 60px;  background-color:#e33b7e; }

#social a.pinterest{ display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-90px -30px; background-size: 270px 60px; }

#social a:hover.pinterest { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-90px 0px; background-size: 270px 60px;  background-color:#cb2027; }

#social a.googleplus { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-120px -30px; background-size: 270px 60px; }

#social a:hover.googleplus { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-120px 0px; background-size: 270px 60px;  background-color:#d64b2e; }

#social a.vimeo { display:block; float:left; height:30px; width:30px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-150px -30px; background-size: 270px 60px; }

#social a:hover.vimeo { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-150px 0px; background-size: 270px 60px;  background-color:#86ae24;}

#social a.youtube { display:block; float:left; height:30px; width:60px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-180px -30px; background-size: 270px 60px; }

#social a:hover.youtube { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-180px 0px; background-size: 270px 60px;  background-color:#e32114;}

#social a.mail { display:block;float:left; height:30px; width:32px; text-indent:-9999px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-240px -30px; background-size: 270px 60px; }

#social a:hover.mail { background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9FwjTfrphXzg6Lz2OVwYysHEo-WPqJDKDCfXoAdli9HjRX1PJ9d5JyV2umvvfWGhMJR14ozinhCOj2hStl1rs0xjAIPFdf1-Ub3Z-FKLQe3ZybssTDK_H2BjcVFF7WHTH4G2_wwY__Tt/s1600/socials@2x.png'); background-position:-240px 0px; background-size: 270px 60px;  background-color:#bc75d6;}

* Atenção: Para ajustar a largura total é necessário que configure em conjunto os dois trechos destacados em VERDE.

* Destacado em LARANJA, é a cor de fundo do título "Últimas Novidades", altere caso desejar.

>> Pesquise agora por </head>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'/>

>> Pesquise agora por </header> ou <div id='header-wrapper'>

>> Logo ABAIXO da tag encontrada, cole o seguinte código:

<div class='head_brnews'>

<div class='breaking-news'><div class='samazhlo'>Ultimas Novidades</div> 

<script type='text/javascript'>

//<![CDATA[

function RecentPostsScrollerv2(json) {

 var sHeadLines;

 var sPostURL;

 var objPost;

 var sMoqueeHTMLStart;

 var sMoqueeHTMLEnd;

 var sHeadlineTerminator;

 var sPostLinkLocation;

 try {

  sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";

  if (nWidth) {

   sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";

  } else {

   sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";

  }

  if (nScrollDelay) {

   sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";

  }

  if (sDirection) {

   sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";

   if (sDirection == "left" || sDirection == "right") {

    sHeadlineTerminator = "&nbsp;&nbsp;";

   } else {

    sHeadlineTerminator = "\<br/\>";

   }

  }

  if (sOpenLinkLocation == "N") {

   sPostLinkLocation = " target= \"_blank\" ";

  } else {

   sPostLinkLocation = " ";

  }

  sMoqueeHTMLEnd = "\</MARQUEE\>"

  sHeadLines = "";

  for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {

   var objPost = json.feed.entry[nFeedCounter];

   if (nFeedCounter == json.feed.entry.length) break;

   for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {

    if (objPost.link[nCounter].rel == 'alternate') {

     sPostURL = objPost.link[nCounter].href;

     break;

    }

   }

   sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;

  }

  

  if (sDirection == "left") {

   sHeadLines = sHeadLines + "&nbsp;&nbsp;";

  } else if (sDirection == "right") {

   sHeadLines = "&nbsp;&nbsp;" + sHeadLines;

  } else if (sDirection == "up") {

   sHeadLines = sHeadLines + "\<br/\>";

  } else {

   sHeadLines =  "\<br/\>" + sHeadLines;

  }

  document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)

 } catch (exception) {

  alert(exception);

 }

}

//]]>

</script>

  <script type='text/javascript'>

 var nMaxPosts =6;

        var nWidth = 100;

        var nScrollDelay = 90;

        var sDirection = &quot;left&quot;;

        var sOpenLinkLocation = &quot;N&quot;;

        var sBulletChar = &quot;&gt;&gt;&quot;;

</script>

<script src='/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=6' type='text/javascript'/>

  </div>

<!--Social Icons Started -->

<div id='social'>

<a class='facebook' href='http://www.facebook.com/' />

<a class='twitter' href='https://twitter.com/' />

<a class='flickr' href='http://www.flickr.com/' />

<a class='pinterest' href='http://pinterest.com/' />

<a class='googleplus' href='https://plus.google.com/' />

<a class='vimeo' href='http://vimeo.com/' />

<a class='youtube' href='http://www.youtube.com/' />

<a class='mail' href='mailto:info@hhh.com' />

</div>

<!--Social Icons End-->

</div>

* Em VERMELHO, substitua pelos links nas redes sociais correspondentes.

* Em AZUL, substitua pelo seu endereço de E-mail.

>> Clique em "Visualizar", se estiver tudo normal clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Tutorial concluído!! aproveite essa excelente ferramenta que trará um maior destaque aos posts recém publicados em seu blog e que possibilitará uma maior interatividade com seus leitores para que eles fiquem sempre bem informados com relação a atualizações.

Clique em "Leia Mais".

Customizando o gadget slide II

Expliquei anteriormente  como aumentar o tamanho do slide do Blogger usando CSS e apesar de ter funcionado para mim, parece que algumas pessoas não conseguiram obter o mesmo resultado. Continuei pesquisando sobre o assunto e encontrei uma outra maneira de redimensionar e dar algum estilo para o gadget. O resultado pode ser visto aqui  (é o primeiro slide, com borda rosa). O Google AJAX Feed API forneceu o código completo que carrega do slide no blog e com isso é possível fazer algumas modificações:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" 

 type="text/javascript"></script>

    <style type="text/css">

      #picasaSlideshow {

        width:  250px;

        height: 200px;

        margin-bottom: 5px;

        padding: 5px;

        border: 5px solid #000;

      }

    </style>

    <script type="text/javascript">

    google.load("feeds", "1");

    function OnLoad() {

      var feed  = "Coloque aqui a URL do FEED";

      var options = {

        displayTime:2000,

        transistionTime:600,

        numResults : 8,

        scaleImages:true,

        maintainAspectRatio : false,    

        fullControlPanel : true,

      };

      var ss = new GFslideShow(feed, "picasaSlideshow", options);

    }

    google.setOnLoadCallback(OnLoad);

    </script>

<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>

<a href="http://templatesparanovoblogger.blogspot.com/2009/07/customizando-o-gadget-slide-ii.html">Custom Slideshows.</a>

Copie este código, vá em Layout e clique em Adicionar Elemento de Página. Escolha entre as opções o gadget HTML/JavaScript e cole o código, salvando-o e arrastando para a sidebar ou para qualquer outra parte em que desejar mostrar o slide no blog (sobre os posts, em crosccol, abaixo dos posts, footer, etc).

O que deve ser modificado no código:

O primeiro a fazer é obter a url do feed do album que pretende exibir. Se for um album do Picasa, a url deve se apresentar desta maneira:

http://picasaweb.google.fr/data/feed/base/user/NAME/

albumid/NUMBER?kind=photo&alt=rss&authkey=KEY&hl=en

como obter a url do feed do album do Picasa

Você poderá exibir albuns do Flickr, Photobucket, Tinypic, ImageShack...bastando copiar e colar a url do feed no local indicado no código.

O que está em destaque na cor verde é o que você pode alterar em relação ao tamanho, bordas e espaçamento do slide.

Para alterar o número de imagens a serem exibidas, modifique o número neste trecho:

numResults : 8

Para controlar o tempo de transição das imagens :

displayTime:2000,

Para que haja um link na imagem que leve ao album original, acrescente (justo após displayTime:2000, nos códigos em azul):

linkTarget : google.feeds.LINK_TARGET_BLANK,

Por padrão, a transição das imagens faz uma pausa quando se coloca o cursor do mouse sobre uma imagem. Você pode modificar isso acrescentando a seguinte linha:

pauseOnHover : false

Para mostrar miniaturas das imagens em tamanho médio, acrescente:

thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM

Para mostrar miniaturas em tamanho pequeno:

thumbnailSize : GFslideShow.THUMBNAILS_SMALL

Para mostrar o Painel de Controle com ícones pequenos (o painel aparece quando se passa o cursor do mouse sobre o slide), acrescente estas linhas, nesta ordem:

fullControlPanel : true,

fullControlPanelSmallIcons : true,

Para saber mais, visite a página do Google AJAX Feed API

Clique em "Leia Mais".