Sroller do template colorido

Scroller ou scroll é a barra de rolagem que aparece nos blogs e sites para que façamos a navegação na vertical, muito embora existam os que façam também na horizontal.  Nos navegadores que aceitam CSS é possível dar um charme a mais ao layout de seu blog, dando integração e leveza ao template. Pura estética, mas que ajuda a deixar o template mais bonito. A máxima sempre vale, a de que Deus reside nos detalhes.

De fácil instalação, basta copiar o código e colar na parte de personalização do Blogger.




Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/*SCROLL BAR*/
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-track {
background:#FFF;
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#F78121; /*Cor do botão */
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb:active {
background:#888;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3);
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

»»Leia mais...

Mini postagens com efeito hover

DEMO

Estou deixando pra vocês essa dica para deixar a área de postagem do Blogger mais sofisticada na página inicial. Consegui este hack destrinchando um template que baixei na rede. Não sei se deve ou se pode fazer isso, mas enfim, sabem, como fiz pra mim, me sinto na obrigação de ensinar para vocês e sei que estão doidinhos pra saber.


A primeira coisa a fazer é ir em configuração e fazer algumas modificações




Siga o exemplo:

Em formato de data, selecione a 1° opção.

Em formato de data e hora, selecione a 4° opção.

Em formato de data e hora do comentário, selecione a 3° opção.

Salve e vamos dar início a segunda parte.






Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Hack para o template do Blogger, implementado em  abril de 2013.

Procure por:


.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

Substitua por:


.date-header span {
 display:none;
}

Procure por </head>

Acima dele cole este próximo código.

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 100;
summary_img = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'.';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<div class="crop"><img src="'+img[0].src+'" width="298px;" /></div>';
summ = summary_img;
}
var summary = imgtag + '<div class="posting">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<script src='https://sites.google.com/site/djogzs/js/accordion-menu.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;.main3 .widget-content&#39;).hide();
$(&#39;.main3 h2:first&#39;).addClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
$(&#39;.main3 h2&#39;).click(function() {
if($(this).next().is(&#39;:hidden&#39;)) {
$(&#39;.main3 h2&#39;).removeClass(&#39;active&#39;).next().slideUp(&#39;slow&#39;);
$(this).toggleClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
}
});
});
</script>

 Agora vamos procurar por

 Agora que encontrou, clique na seta ao lado do código.

 Pronto. Procure pela seguinte parte:


<b:includable id='post' var='post'>...</b:includable>

Substitua por:

<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>


  <div class='pagepost'>
 <div class='title'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h2>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' expr:title='&quot;Link para &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url' expr:title='&quot;Link para &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
    </b:if>
    </div>
    <div class='cover'>
      <p><data:post.body/></p>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  </div>
<b:else/>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <div class='post hentry'>
    <div class='postright'>
    <div class='arrow'/>
      <div class='cover'>
<div class='date'>
      <a expr:href='data:post.url' expr:title='&quot;Abrir link &quot; + data:post.title' rel='bookmark'>
      <script type='text/javascript'>
      var timestamp = &quot;<data:post.timestamp/>&quot;;
      if (timestamp != &#39;&#39;) {
      var timesplit = timestamp.split(&quot;,&quot;);
      var date_yyyy = timesplit[2];
      var timesplit = timesplit[1].split(&quot; &quot;);
      var date_dd = timesplit[2];
      var date_mmm = timesplit[1].substring(0, 3);
      }
      </script>
     <span class='day'><script type='text/javascript'>document.write(date_dd);</script></span>
       <p class='bulan'><script type='text/javascript'>document.write(date_mmm);</script></p>
      <p class='tahun'><script type='text/javascript'>document.write(date_yyyy);</script></p></a>
    </div>
<a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h2>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' expr:title='&quot;Link para &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url' expr:title='&quot;Post: &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
    </b:if>



<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style='clear: both;'/> <!-- clear for photos floats -->
<div class='jomore'>
<div class='jomorelink'><a class='anes' expr:href='data:post.url'>Leia mais</a></div>
  <b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='&quot;Comentar em: &quot; + data:post.title'>
<b:if cond='data:post.numComments == 0'>0 Comentários<b:else/><b:if cond='data:post.numComments == 1'> 1 Comentário<b:else/><data:post.numComments/> Comentários</b:if></b:if></a></b:if>
<div class='categ'><b:if cond='data:post.labels'>Tag: <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url + &quot;?&amp;max-results=3&quot;' expr:title='&quot;Tags relacionadas : &quot; + data:label.name' rel='tag'><data:label.name/></a>, <b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop></b:if></div>


</div>

      </div>
   
    </div>
  </div>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'><ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Início</a> &#187;</li><li>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if></li><li>
<data:post.title/></li></ul>
</div>
</b:if>


<div class='title'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h2>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' expr:title='&quot;Link para &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url' expr:title='&quot;Link para &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
    </b:if>
    </div>

    <div class='data'>
      <b:if cond='data:top.showAuthor'>
        <span class='author'>Postado por : <data:post.author/></span>
      </b:if>
      <b:if cond='data:post.dateHeader'>
        <span class='clock'><data:post.dateHeader/></span>
      </b:if>
    </div>
  <div class='pagepost'>
    <div class='cover'>
      <p><data:post.body/></p>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>

      <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> </div>

    </div>
  </div>
</b:if>
</b:if>
</b:includable>

Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/*Breadcrumb ---------------------------------------*/
.breadcrumb {
list-style: none;
overflow: hidden;
text-align: left;
color: #222;
width: 650px;
font-size: 12px;
height: 40px;
z-index: 9;}
.section {margin:auto;}
.breadcrumb ul{margin:auto;}
.breadcrumb li {
position: relative;
display: block;
color: black;
float: left;
text-decoration: none;
font-weight: 300;
font-size: 10pt;
letter-spacing: 0.02em;
padding: 10px 10px;}
.home-link {
display:none;}
#blog-pager-newer-link {
float: right;
color: white;
padding: 10px;
text-align: center;
overflow: hidden;}

/*Abaixo código dos posts ---------------------------------------------------*/
.postim{
background:#000;
padding:10px;
margin-top:10px;}
.pagepost a{color:#2B5797;text-decoration:underline;}
.pagepost a:hover {color:#2B5795;}
.widget {margin: auto;}
.cover {margin:0 0;overflow:hidden;}

/*Titulo postagem -----------------------------------------*/
h2#blog-desc {
padding: 3px;
text-align: left;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 20pt;
margin-left:10px;
letter-spacing: 0.01em;
color: #000000;
margin-left: 30px;}
.title h2{
text-decoration: none;
padding: 10px;
margin-bottom: 15px;
line-height: 30px;
text-align: left;
font-weight: normal;
margin: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 20pt;
letter-spacing: 0.01em;
color: #fff;}
.title h2 a:link, .title h2 a:visited{
color:#000;text-decoration: none;}
h2.pagetitle{
font-size:14px;
padding:10px 0px;
font-weight:normal;
margin-right:10px;
color:#6F6753;
text-align:right;
text-shadow: 0px 1px 1px black;}
.item-title a {font-size:20pt;
padding-bottom: .2em;}
#main2 .widget-content, #main3 .widget-content, #main4 .widget-content, #main5 .widget-content, #main6 .widget-content {
overflow: hidden;
color: #222;
padding: 20px;
padding-bottom:10px;
background: #fafafa;
font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 10pt;
letter-spacing: 0.02em;
line-height: 20px;
border: 1px solid #ddd;
box-shadow: 0 8px 10px rgba(221, 221, 221, 0.5);}
h3.openpost:hover {cursor:pointer;}
#main3 h2:hover {cursor:pointer;}
#main2 h2, #main3 h2, #main4 h2, #main5 h2, #main6 h2 {
border: 1px solid #ddd;
text-align: left;
margin: auto;
padding: 5px 5px;
padding-left: 15px;
background: #77C2A7;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
font-weight: normal;
font-size: 13pt;
letter-spacing: 0.01em;
color: #fff;
border-bottom: 0px;}
#main2 ul li a:link, #main2 ul li a:visited, #main3 ul li a:link, #main3 ul li a:visited, #main4 ul li a:link, #main4 ul li a:visited, #main5 ul li a:link, #main5 ul li a:visited, #main6 ul li a:link, #main6 ul li a:visited {-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
font-weight: 200;
font-size: 10pt;
letter-spacing: 0.01em;
line-height: 24pt;
font-smooth: always;
color: ##8AA6B4;}
#main2 ul li, #main3 ul li, #main4 ul li, #main5 ul li,#main6 ul li {border-bottom: 1px solid #DDD;}
#main2 ul li a:hover, #main3 ul li a:hover, #main4 ul li a:hover, #main5 ul li a:hover, #main6 ul li a:hover {color:#2D89EF;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;}

.crop {
width: 298px;/*Imagens*/
height: 168px;
position: relative;
overflow: hidden;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
float: left;
border: 1px solid #eee;}
.blognames {margin:auto;}
.pagepost a {text-decoration: underline;}
.pagepost img{
max-width:550px;
padding: 3px;
border: 1px solid #DDD;
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
height:auto;}
.bigcom {width: 234px;text-align: center;}
.posted {
width: 300px;
border-right: 1px solid #ddd;
text-align: center;}
.tombolbacktotop a{color:#8AA6B4;}
.tombolbacktotop {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
font-size: 25px;
border: 1px solid #ddd;
border-radius: 50px;
width: 30px;
height: 30px;
padding-right: 0px;
padding-bottom: 8px;
padding-left: 6px;
margin: auto;
margin-top: -20px;
background: #000;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
color: #8AA6B4;}
.topwrap {width: 100%;
position: relative;
height: 20px;
text-align: center;}
.profile-name-link {
background: no-repeat left top;
display: inline;
min-height: 20px;
padding-left: 20px;}

/*Menu de navegação ------------------------------------*/
#blog-pager-older-link {
float: left;
padding:5px;
text-align: center;
overflow: hidden;}
#blog-pager-older-link a:hover {margin-left:20px;}
#blog-pager-newer-link a:hover {margin-right:20px;}
#blog-pager-older-link a, #blog-pager-newer-link a {
color: #fafafa;
line-height: 33px;
padding: 4px 25px 4px 25px;
background: #cc0000;
border: 1px solid #6AB790;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-radius: 5px;}
#blog-pager {
color: #DDD;
text-align: center;
text-transform: capitalize;
font-size: 16px;
float: left;
font-weight: normal;
letter-spacing: -1px;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 625px;
border: 1px solid #ddd;
border-radius: 5px;}


/*Data-------------------------------------------*/
.date {
-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
text-decoration: none;
color: #222;
padding: 5px;
opacity:0;
text-align: center;
position: absolute;
line-height: 30px;
font-weight: normal;
font-size: 11px;
z-index: 12;
top: 43px;
left: 0px;}
.date a:visited {color:#fff;}
.date a:hover {color:#FFF;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;}
.date a {color:#222;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.5s ease-in-out;}
.day, p.tahun, p.bulan {-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;}
.day {
clear: both;
font-size: 20px;
display: block;
padding: 7px;
line-height: 30px;
text-align: center;
background: #000;
border-radius: 50px;
left: 80px;
position: absolute;
top: 5px;
width: 30px;
height: 30px;
border: 1px solid #ddd;}
p.bulan {
padding-top: 15px;
clear: both;
font-size: 15px;
display: block;
padding: 7px;
line-height: 30px;
text-align: center;
background: #eee;/*bot mês */
border-radius: 50px;
left: 80px;
position: absolute;
top: 57px;
width: 30px;
height: 30px;
border: 1px solid #ddd;}
p.tahun {
line-height: 30px;
clear: both;
font-size: 14px;
display: block;
padding: 7px;
line-height: 30px;
text-align: center;
background: #eee;/*ano*/
border-radius: 50px;
left: 80px;
position: absolute;
top: 110px;
width: 33px;
height: 33px;
border: 1px solid #ddd;
}

/*Titulo posts----------------------------------------*/
.post h2{
text-align: left;
color: #666;
padding: 5px 5px 5px 15px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #ccc;
font-weight: normal;
font-size: 12pt;
letter-spacing: -1px;
line-height: 25px;
height: 25px;
width: 278px;
overflow: hidden;
border: 1px solid #ddd;
text-shadow: 1px 1px 0px #fff;
z-index: 10;}
.post h2 a:link,.post h2 a:visited{
color:#000;}
h3.post-title, .comments h4 {
text-align: left;
padding: 5px 5px 5px 15px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #fafafa;
font-weight: normal;
font-size: 12pt;
letter-spacing: -1px;
line-height: 25px;
height: 25px;
width: 238px;
overflow: hidden;
border: 1px solid #ddd;
text-shadow: 1px 1px 0px #fff;
z-index: 10;}

/*Leia mais ---------------------------------------------*/
.jomore {
font-size: 11px;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
font-weight: normal;
width: 600px;
height: 170px;
position: absolute;
opacity:0;
top:10px;}

.jomorelink{
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 24;
text-align: center;
height: 25px;
border: 1px solid #ddd;
width: 90px;
font-family: arial;
background: #fff;/*Cor botão leia mais */
padding: 2px;
line-height: 25px;
border-radius: 5px;
position: absolute;
top: 0px;
left: 193px;}
.jomorelink a:hover{color:#ffffff;}
.jomorelink:hover, a.comment-link:hover{background:#cc0000;color:#000000;}

/*Post----------------------------------------------------*/
.post {
  margin: 0 0 $(post.margin.bottom) 0;}
.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);
  background: $(image.background.color);
  border: 1px solid $(image.border.color);
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}
.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);}
.post-body .tr-caption-container {
  color: $(image.text.color);}
.post-body .tr-caption-container img {
  padding: 0;
  background: transparent;
  border: none;
  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0 0 rgba(0, 0, 0, .1);}
.post-header {
  margin: 0 0 1.5em;
  line-height: 1.6;
  font-size: 90%;}
.post-footer {
  margin: 20px -2px 0;
  padding: 5px 10px;
  color: $(post.footer.text.color);
  background-color: $(post.footer.background.color);
  border-bottom: 1px solid $(post.footer.border.color);
  line-height: 1.6;
  font-size: 90%;}

/*Data------------------------------------------------*/
.date {
-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
text-decoration: none;
color: #222;
padding: 5px;
opacity:0;
text-align: center;
position: absolute;
line-height: 30px;
font-weight: normal;
font-size: 11px;
z-index: 12;
top: 43px;
left: 0px;}
.date a:visited {color:#222;}
.date a:hover {color:#000;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;}
.date a {color:#222;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.5s ease-in-out;}
.day, p.tahun, p.bulan {-moz-transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;}
.day {
clear: both;
font-size: 20px;
display: block;
padding: 7px;
line-height: 30px;
text-align: center;
background: #fafafa;
border-radius: 50px;
left: 80px;
position: absolute;
top: 5px;
width: 30px;
height: 30px;
border: 1px solid #ddd;
}

/*Data hover------------------------------------------*/
.day:hover, .tahun:hover, .bulan:hover {border:1px solid #6AB790;
line-height: 36px;
background:#cc0000;
color:#fafafa;
width: 35px;
height: 35px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}

.arrow{
position:absolute;
top:50px;
left:-10px;
height:30px;
width:10px;
}

.data{
padding: 3px;
font-size: 15px;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
letter-spacing: 0.01em;
color: #fff;
border-top: 1px solid #ddd;
}
.author,.clock{
padding: 3px 20px;
margin: 0px 0px 0px -10px;
font-size: 17px;
color: #000;
}
a {
color: #222;
text-decoration: none;
}
a:visited {
color: #000;
}
a:hover, a:active {
color: #000;
text-decoration:none;
}

.post:hover .date {opacity:1;
}
.post:hover .day {
left: 10px;-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post:hover p.bulan{
left: -20px;-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post:hover p.tahun{
left: 10px;-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.postmeta, .postinfo{
background:#F5ECC1;
padding:3px 10px;
border:1px solid #DFD5A7;
font-size:10px;
text-transform:uppercase;
}
.post {
background: #fafafa;
display: inline;position:relative;
width: 300px;
box-shadow: -5px 8px 10px rgba(221, 221, 221, 0.5);
margin-bottom: 50px;
margin-right: 25px;
float: left;}

.postright{
position: relative;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_RBsHWs75MyI0geqqCGVMyw93lMSdzK9O5dbBPuh4XobqJ-QfLws5BSgQ7x6zDfTbd12c_XAzzjGmo8VuLAllQifTvCM2YhFnJ0OqNZG68IkRTbNQLiAQqZnajBdq4UISCEHNFPdU1ec4/s1600/Image49.png') no-repeat center center;
min-height: 205px;
}
.postright img{-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
.post:hover .post h2 {background:77C2A7;color:#fafafa;}
.post:hover .categ {top: 196px;}
.post:hover a.comment-link {top:155px;}
.post:hover .jomorelink {top:155px;}

.pagepost{
width: 610px;
float: left;
padding: 20px;
line-height: 1.8;
margin-bottom: 25px;
font-weight: 300;
font-size: 11pt;
letter-spacing: 0.02em;
}
.posting {
padding: 10px;
width: 198px;/*Area da postagem ao passar mouse*/
text-align: justify;
font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 10pt;
letter-spacing: 0.02em;
line-height: 25px;
position: absolute;
border-right: 1px solid #ddd;
left: 80px;
height: 149px;
background: #fafafa;
border-left: 1px solid #ddd;
opacity: 0;
z-index: 1;
top: 37px;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}



/*Post hover ----------------------------------------------*/

.posting:hover {opacity:1;-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.post:hover .posting {opacity:1
}
.post:hover .crop{
margin-left: -50px;filter: saturate(0.0);
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-o-filter: saturate(0.0);
-ms-filter: saturate(0.0);}
.post:hover .jomore {opacity:1;
}

/*Area footer post pequeno---------------------------------------*/
.categ {
box-shadow: -5px 8px 10px rgba(221, 221, 221, 0.5);
padding-left: 5px;
border-right: 1px solid #ddd;
width: 286px;
overflow: hidden;
background: #fafafa;
padding: 6px;
border: 1px solid #ddd;
position: absolute;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
top: 196px;
}
.categ a:link,.categ a:visited {
text-decoration:none;
padding: 3px;
}

/*Area comentário-----------------------------------------*/

.comments .comments-content {
margin-bottom: 16px;}
.comments .comment-block {
margin-left: 75px;
position: relative;
border: 1px solid #DDD;
background: white;
padding: 10px;
border-radius: 5px;
min-height: 83px;
}
.comments .comments-content .user {
font-style: normal;
font-weight: 200;
font-size: 14pt;
letter-spacing: 0.01em;
color: #000;
}
.comments {
clear: both;
background: #FAFAFA;
padding: 30px;
}
.comments .comments-content .datetime {
float: right;
margin-right: 10px;
font-style: normal;
font-weight: 200;
font-size: 10pt;
letter-spacing: 0.01em;
color: #fff;
margin-top: 4px;
}

a.comment-link {
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 2;
text-align: center;
height: 25px;
background: #fafafa;
line-height: 25px;
border-radius: 5px;
font-size: 11px;
color: #000;
font-family: 'Open Sans', sans-serif;
width: 90px;
overflow: hidden;
padding: 2px;
border: 1px solid #ddd;
position: absolute;
top: 0px;
left: 90px;
}

a.comment-link:hover{background:#cc0000;color:#ffffff;}
.comments .comments-content {
margin-bottom: 16px;
}
.comments .comment-block {
margin-left: 75px;
position: relative;
border: 1px solid #DDD;
background: white;
padding: 10px;
border-radius: 5px;
min-height: 83px;
}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
margin: 0 10px 10px;
}
#commentsbox {
margin:0;
width: 585px;
padding: 20px;
}
h3#comments{
font-size30px;
font-family: 'Open Sans', sans-serif;
color:#ffffff;
font-weight:normal;
padding:10px 10px ;
background:#D3D4CE;
margin-top:10px;
}
ol.commentlist {
margin:0px 0 0;
clear:both;
overflow:hidden;
list-style:none;
}
ol.commentlist li {
margin:0px 0;
line-height:18px;
padding:10px;
background:#78786D;
}
ol.commentlist li .comment-author {
color:#ffffff;
}
.comment-body {
margin: auto;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
padding: 5px;
}
ol.commentlist li .comment-author a:link,ol.commentlist li .comment-author a:visited{
color:#ffffff;
font-weight:bold;
text-decoration:none !important;font-size:15px;font-family: 'Open Sans', sans-serif;}
}
ol.commentlist li .comment-author .fn {
color:#000;
}
ol.commentlist li .comment-author .avatar{
float:right;
background:#fff;
padding:3px;
}
.comments .comments-content .comment-content {
text-align: justify;
border-bottom: 1px solid #DDD;
padding-top: 10px;
font-style: normal;
font-size: 11pt;
letter-spacing: 0.01em;
color: #000;
}
.comments .comment .comment-actions a {
padding: 5px;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: #fafafa;
margin: 5px;
background: #77C2A7;
position: relative;
text-shadow: 1px 1px 1px #362c30;
border-radius: 5px/15px;
}
.comments .comments-content .comment-replies {
margin-left: 65px;
margin-top: 1em;
}

.comments .avatar-image-container img {
max-width: 50px;
}

.comments .comments-content .inline-thread {
padding: .5em 0em;
}
.comments h4{
background: #fff;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 15pt;
letter-spacing: 0.01em;
color: #000;}
.comments .continue a {
padding: 5px;
font-size: 13px;
text-decoration: none;
text-align: center;
color: #222;
margin-left: 75px;
background: white;
border: 1px solid #DDD;
border-radius: 5px;
}
a.comment-link {
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 2;
text-align: center;
height: 25px;
background: #fafafa;
line-height: 25px;
border-radius: 5px;
font-size: 11px;
color: #000;
font-family: 'Open Sans', sans-serif;
width: 90px;
overflow: hidden;
padding: 2px;
border: 1px solid #ddd;
position: absolute;
top: 0px;
left: 90px;
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Agora é hora de ajustar a largura  do blog.

»»Leia mais...

Imagem de fundo no scroller

DEMO

Deixar o blog mais organizado, mais bonito, mais simétrico, mais personalizado. Quem não gosta ? Quem não quer ? Mais uma diquinha, scroller,  a barra de rolagem do Blogger,  com imagem de fundo. Fácinho de implementar e pode fazer aquela diferença no layout do blog.




Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/*Scroller ------------------------------------*/

::-webkit-scrollbar-thumb:vertical {
background: #B7D3D3;
height:50px;
border: 2px solid #fff;
box-shadow: 2px 2px 4px #808080;
-moz-box-shadow: 2px 2px 4px #808080;
-webkit-box-shadow: 2px 2px 4px #808080;
-khtml-box-shadow: 2px 2px 4px #808080;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color: #B7D3D3; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3DGuuotAMF6QAXXZJPmUn-tXSXobfGa7d046WAquCCy7SGps8uzOcm5I6AkGj1I7SRaO1IgDjJgoad0OmEvPIth08T0n9zrW-4eomSQa2j_bptwlIUASjqYMHYLaeuqPGfPeU7ZwgAlo/s1600/paisley-sweetheart-free-cute-twitter-background-404x288.jpg) repeat;
box-shadow: -3px -2px 10px #808080;
-moz-box-shadow: -3px -2px 10px #808080;
-webkit-box-shadow: -3px -2px 10px #808080;
-khtml-box-shadow: -3px -2px 10px #808080;}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

 Se quiser trocar a imagem de fundo, basta trocar o código em amarelo e para trocar a cor do botão, troque o código na cor verde.

»»Leia mais...

Fita de fundo dos títulos dos posts com CSS

CSS é capaz de uma infinidade de modificações no layout de um blog. Para dar este efeito de fita com a pontinha dobrada nos títulos dos posts, basta seguir a dica do  post.


Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Hack para o template do Blogger, implementado em  abril de 2013.

Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código abaixo e cole no local indicado.

/*Título dos posts-----------------------------------------------*/

h3.post-title {
position:relative;
display:block;
overflow:hidden;
width: 100%;/*Aqui a comprimento da faixa*/
height: 2em;
margin: 5px 0 0 -28px;
padding:2px 4px 4px 40px;
background: #333;/*Aqui a cor de fundo da faixa*/
border: 1px solid #555;/*Aqui a cor da borda*/
border-radius:10px 10px 0 0;
line-height:1.10em;
}

.trih3 {display: block;
z-index: -1;
height: 0px;
width: 0px;
margin: -12px 0 0 -40px;
border: 12px solid transparent;
border-right: 12px solid #222; /*Aqui a cor de fundo do triangulo*/
}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Agora volte na parte do editor de modelos do layout

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

 Agora vamos procurar por

 Agora que encontrou, clique na seta ao lado do código.

 Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte:




<b:includable id='post' var='post'>...</b:includable>

Procure  então por:

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

O que você precisará fazer é trocar todo este trecho por este abaixo

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
<div class='trih3'/>
    </b:if>

Salve e está pronto


Créditos: OloBlogger

»»Leia mais...

Ocultar/mostrar elementos no Blogger

O Blogger talvez seja a plataforma gratuita que mais dê possibilidades de personalização do blog. É possível fazer com os templates hospedados no Blogger uma infinidade de modificações e implementações tão variadas que por vezes tenho que conferir o código fonte para ter certeza de se tratar mesmo de um blogger/blogspot. Além do layout,  por vezes  necessitamos de códigos que ajudtaem a carregar o blog com maior rapidez e uma boa pedida é termos elementos em páginas específicas, deixando o blog mais leve e melhorando assim sua indexação. Esta postagem pretende te dar uma idéia de como ocultar ou mostrar elementos em páginas específicas. Por exemplo, suponhamos que seu blog tenha os posts relacionados e que você deseje que apareça apenas nas páginas internas de seu blog, para isso é necessário usar um código específico ao abrir o código (antes do código em si).

Para implementar esse hack é necessário ter algum conhecimento em HTML, vá então ao editor de seu blog.

Ao encontrar a parte do código que queira ocultar/mostar insira o código abaixo, as partes grifadas em cinza. Note que o código inicia e depois fecha com </b:if>, conforme está grifado. E é desta forma que os códigos sempre deverão ser usados.



ex:

<b:if cond='data:blog.pageType == "item"'>
AQUI O CÓDIGO DOS POSTA RELACIONADOS
</b:if>




OCULTAR ELEMENTOS

• Para que o elemento não apareça na página inicial o código será esse:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
código do que não quer que apareça na página inicial
</b:if>

• Para que o elemento não apareça nas páginas das postagens

<b:if cond='data:blog.pageType != "item"'>
código do que não quer que apareça nas páginas das postagens
</b:if>

• Para que o elemento não apareça nas páginas estáticas

<b:if cond='data:blog.pageType != "static_page"'>
código do que não quer que apareça nas páginas estáticas
</b:if>

• Para que o elemento não apareça nas páginas de arquivo, marcadores e página inicial

<b:if cond='data:blog.pageType == "item"'>
código do que não quer que apareça em arquivos, marcadores e página inicial
</b:if>

MOSTRAR ELEMENTOS

• Para mostrar o elemento apenas na página inicial, o código será este

<b:if cond='data:blog.url == data:blog.homepageUrl'>
código do que quer mostrar apenas na página inicial
</b:if>

• Para mostrar o elemento apenas na página de postagens

<b:if cond='data:blog.pageType == "item"'>
código do que quer mostar apenas nas páginas das postagens
</b:if>

• Para mostrar o elemento apenas nas páginas estáticas

<b:if cond='data:blog.pageType == "static_page"'>
código do que quer mostrar apenas nas páginas estáticas
</b:if>

• Para mostrar apenas nas páginas de arquivos, marcadores e página inicial

<b:if cond='data:blog.pageType != "item"'>
código do que quer mostrar apenas em arquivos, marcadores e página inicial
</b:if>

• Para mostrar apenas na página de um post específico

<b:if cond='data:blog.url == "endereço do post"'>
código do que quer mostrar apenas em uma página específica
</b:if>

»»Leia mais...

Última postagem maior com posts menores ao lado na primeira página do Blogger

Que tal dar a seu blog uma aparência mais inusitada, facilitar a navegação do leitor e economizar espaço na primeira página do template de seu blog ? Este é um hack antiguinho que, se não me engano foi introduzido na blogosfera pela Ariane do Templates para o Novo Blogger. Dei uma atualizada no código HTML, mas está bem básico, prometendo aqui fazer mais dois códigos mais incrementados...



Vá até o modelo de seu blog e clique em Editar HTML.

Ao abrir a janela, clique em Ir para um widget e depois clique em Blog1

 Agora clique na setinha para abrir o código

Depois que abrir, clique novamente na setinha, para abrir o seguinte trecho:


 <b:includable id='main' var='top'>...</b:includable>



É dentro desta tag que encontraremos o código.

Agora, procure por:

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

Troque-o por:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<p><data:post.body/></p>
</div>
<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

 Procure agora por: <b:skin>...</b:skin>

E abaixo dele, cole o próximo código.

<!-- Design post grande-->
<style>
#first{
width: 60%; /*largura do post grande*/
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
}

.first-body{
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
}

#first h3{
display:block;
margin: 10px auto;
width: 100%;
padding: 0px 0px 4px 0px;
line-height:1.4em;
}
.first-body img{ /* estilo para as imagens */
padding:10px;
}
</style>
<!-- Design posts pequenos-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post{
border-top: 1px solid #eee;
width:38%;/*largura dos posts pequenos*/
height:180px;/*comprimento dos posts pequenos*/
font-size: 10px; /*tamanho da fonte dos posts*/
margin:12px 2px 15px 5px;
float:left;
overflow:hidden;
padding:2px;
line-height:1.4em;
font-size:12px;
}
.post-body{
height: 140px;/*largura do corpo das postagens */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-body img{
width: 95%;
height: 110px;/*largura das imagens dos posts */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post-body iframe{
width: 95%;
height: 120px;/*largura das imagens dos iframes */
padding: 0px;
margin:5px 2px 2px 2px;
line-height:1.4em;
}
.post h3{
height: 30px;
font-size: 11px;/*tamanho da fonte do título*/
margin:0px;
padding:0px 0 5px 0px;
line-height:1.4em;
letter-spacing:1px;
}
.post h3 a, .post h3 a:visited, .post h3 strong{ display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
border:none;
padding:0 0 0;
}
.date-header{display:none;}
.post img{border:none;}
.post-footer{display: none;}


#showlink{
padding: 1px 3px 0 0;
margin: 0 2px 0 0;
float:right;
font-size: 10px;
}
</style>
</b:if>
</b:if>

SALVE!


Gostei muito, ficou legal Elke mas, cade o menu de navegação do blog ???

Calma apressadinho, agora vamos acrescentar mais um código...

Procure agora por  <b:includable id='nextprev'>...</b:includable> e abara a setinha que tem ao lado.

Cole então o código abaixo logo depois de <b:includable id='nextprev'>

<div style='clear: both;'/>

Salve e aproveite seu layout bacanudo :-)

»»Leia mais...

Posts relacionados em slide do Vagabundia

Como acho este slide de posts relacionados do Vagabundia o que há de melhor em matéria de posts relacionados, refiz este tutoraial para vocês, a aprtir das alterações soifridas pelo editor de imagens do Blogger, em abril de 2013.

Ariane refez um de seus templates, o Pinup e implementou este hack. Eu curiosa como o cão fui conferir a dica no blog Vagabundia. Fiquei perdidinha no post do J.Mujir, mas eis que gritei um help e a Ariane me indicou o caminho das pedras, para implementar o tal dos posts resumidos em forma de slide. (Ariane, obrigada ;-)



Vá até o Modelo de seu blog, clique em Editar HTML

Agora clique em "Editar modelo" e em Ctrl e F.

 

Ao abrir a janela procure por:


<skin>...</b:skin>  

Abaixo dele, cole o próximo código:

<!-- Posts relacionados com Slide by JMiur -->
<script type='text/javascript'>
//<![CDATA[
// <!-- Posts relacionados com Slide by JMiur -->
// <!-- http://vagabundia.blogspot.com/ -->
var reltitulosslider = new Array();
var relurlsslider = new Array();
var relresumenslider = new Array();
var relimagenslider = new Array();
var reltituloscantidadslider = 0;
var relmaxamostrarslider = 20; // establecer cantidad de entradas
var relmaxlenslider = 75; // longitud del texto del resumen
var relimagenpodefectoslider = "URL_IMAGENxDEFECTO";
var SRwidth = 144; // ancho de cada DIV
var SRmin = 0;
var SRmax = -2160; // longitud máxima = (SRwidth * relmaxamostrarslider) - (SRwidth * VISIBLES) - SRwidth (en este caso son 4 visibles)
function leerpostetiquetasslider(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    if (i==json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    reltitulosslider[reltituloscantidadslider] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relresumenslider[reltituloscantidadslider] = eliminattagsslider(postcontent,relmaxlenslider);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relimagenpodefectoslider;
    }
    relimagenslider[reltituloscantidadslider] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relurlsslider[reltituloscantidadslider] = entry.link[k].href;
        break;
      }
    }
    reltituloscantidadslider++;
  }
}
function mostrarrelacionadosslider() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relurlsslider.length; i++) {
    if(!containsslider(tmp, relurlsslider[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relurlsslider[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulosslider[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relresumenslider[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relimagenslider[i];
    }
  }
  reltitulosslider = tmp2; relurlsslider = tmp; relresumenslider = tmp3; relimagenslider = tmp4;
  for(var i = 0; i < reltitulosslider.length; i++){
    var indice = Math.floor((reltitulosslider.length - 1) * Math.random());
    var tempTitle = reltitulosslider[i]; var tempUrls = relurlsslider[i];
    var tempResumen = relresumenslider[i]; var tempImagen = relimagenslider[i];
    reltitulosslider[i] = reltitulosslider[indice]; relurlsslider[i] = relurlsslider[indice];
    relresumenslider[i] = relresumenslider[indice]; relimagenslider[i] = relimagenslider[indice];
    reltitulosslider[indice] = tempTitle; relurlsslider[indice] = tempUrls;
    relresumenslider[indice] = tempResumen; relimagenslider[indice] = tempImagen;
  }
  var cuantosPosts = 0;
  var r = Math.floor((reltitulosslider.length - 1) * Math.random());
  var rini = r;
  var salida;
  var dirURL = document.URL;
  while (cuantosPosts < relmaxamostrarslider) {
    if (relurlsslider[r] != dirURL) {
      salida = "<div class='relspostsslider'>";
      salida += "<a href='" + relurlsslider[r] + "' rel='nofollow'  target='_blank' title='" + reltitulosslider[r] + "'><img src='" + relimagenslider[r] + "' /></a>";
      salida += "<h6><a href='" + relurlsslider[r] + "' target='_blank'>" + reltitulosslider[r] + "</a></h6>";
      salida += "<p>" + relresumenslider[r] + " ... </p>";
      salida += "</div>";
      document.write(salida);
      cuantosPosts++;
      if (cuantosPosts == relmaxamostrarslider) { break; }
    }
    if (r < reltitulosslider.length - 1) {
      r++;
    } else {
      r = 0;
    }
    if(r==rini) { break; }
  }
}
function eliminattagsslider(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen = resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}
function containsslider(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}

function desplazarrels(direccion) {
  var div = document.getElementById("postsrelacionadoscontenedor");
  var pos = parseInt(div.style.left);
  pos = pos + (SRwidth * direccion);
  if(pos > SRmin) { return }
  if(pos < SRmax) { return }
  div.style.left = pos + "px";
}

//]]>
</script>

<style>
/* al rectángulo contenedor lo centramos, le damos altura y eliminamos los saltos de línea indeseados */
  #postsrelacionadosslider {
    margin:15px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    height: 190px;
    position: relative;
    width:100%; border: 0px;
  }
#postsrelacionadosslider h2{font-size: 14px;text-indent: 20px; }
 #postsrelacionadosslider br { display:none; }
 /* las imágenes que sirven para navegar las posiconamos una a cada extremo */
  #relleft { left: -5px; }
  #relright { right: 0; }
  .sflecha { height: 150px; position: absolute; width: 15px; }
  .sflecha img { height: 150px; width: 15px; border: 0px solid}

  /* al rectángulo central lo dimensionamos, lo posicionamos e impedimos que se deborde */
  #postsrelacionadosinner {margin:0px;padding:0px;
    height: 152px;
    left: 15px;
    overflow: hidden;
    position: absolute;
    width: 96%; /* es el ancho real de cada post resumido por la cantidad visible, en este caso 4 */
  }
  /* esta será la &quot;tira&quot; a desplazar */
  #postsrelacionadoscontenedor {
    height: 180px;
    position: absolute;
    width: 2800px; /* es el ancho real de cada post resumido por la cantidad a mostrar, en este caso 20 */
    /* el efecto */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }

  /* cada post resumido */
  .relspostsslider {
     background: -webkit-linear-gradient(#808080, #eee);
   background: -moz-linear-gradient(#808080, #eee);
   background: -o-linear-gradient(#808080, #eee);
    float: left;
    height: 150px;
    margin: 0 1px;
    overflow: hidden;
    padding: 0 4px;
    text-align: center;
    width: 129px;border:1px solid #ccc;
  }

  /* los contenidos de esos posts resumidos */
  .relspostsslider a {
    color: #000;
    display: inline;
    font-size: 11px;
    line-height: 1;
  }
  .relspostsslider img {
    height: 82px;
margin: 1px auto;
    padding:5px 5px 5px;background: #fff;
    width: 95px;border:1px solid #000;
  }
  .relspostsslider h6 {
    display: table-cell;
    height: 5em;
    margin: 0;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
    width: 130px;
  }
  .relspostsslider p {display:none;}
</style>
<!-- FIM posts relacionados com Slide by JMiur -->

Salve.


Salve.

Clique então em "Ir para um widget" e depois em Blog1

Clique agora na setinha para abrir...

Procure por:  <b:includable id='post' var='post'>...</b:includable>

Ao encontra-lo, clique na setinha para expandir mais uma vez o código.

 Procure então por:

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

Abaixo da parte do código em azul, cole este código abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetasslider&amp;max-results=50&quot;' type='text/javascript'/>
</b:if>

Agora procure por:

 <div class='post-footer-line post-footer-line-1'>

E abaixo dele, cole este próximo código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='postsrelacionadosslider'>
<h2>Posts Relacionados</h2>

  <a class='sflecha' href='javascript:void(0);' id='relleft' onclick='desplazarrels(1);'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPPq_A57PHQhtbTE0NfMg2k-VhcSkorc1Jvnl3zM6atyNHPo1nlikJiCSyzqZHUrj3ltpN86JcMhvxPJlWxqcEMogLD0t5dbke_f0i32LowyCtDUgrMKy-cPYXAHvfq6MzpA8h48qSn6U/s1600/LWicoleft.png'/>
  </a>
  <div id='postsrelacionadosinner'>
    <div id='postsrelacionadoscontenedor' style='left:0'>
      <script type='text/javascript'>mostrarrelacionadosslider();</script>
    </div>
  </div>
  <a class='sflecha' href='javascript:void(0);' id='relright' onclick='desplazarrels(-1);'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rXr0iFF4u09FgW7FnPVtX9bxmiMbhhRlWsQyZ1kzDBgmu3opDiGhqzZILyPhLgKxkX6jUVBNAFuehfRdTno-W-J7F1LnbmnuPuC0Hsd3T-Xklb7jmgu9_4uuKgxVazdAMpp59Q3bIfzx/s1600/LWicoright.png'/>
  </a>
</div>
</b:if>

»»Leia mais...