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.