tes




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/AVvXsEgvdM4Wo6b9dlGglkLSBx6BflCKoVXavsORdTGOHulTcz4-nfNldgCHIQxSszVxo5naxoG8660DX0NjVxphqGKg_5xQx2I8oMOooLXma_X0H2vy489jZWlOQQhB-ylngJnXcRrh5-bhaxGh/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.



0

0 comentários:

Morbi sollicitudin venenatis massa



Morbi sollicitudin venenatis massa. Mauris imperdiet elit et tortor ultrices blandit. Integer convallis orci vitae facilisis fermentum. Etiam odio mi, porttitor nec feugiat vitae, laoreet et nisi. Curabitur ornare faucibus consectetur. Mauris at orci ac erat dictum accumsan. Vestibulum laoreet condimentum turpis vel pulvinar. Cras eros odio, lacinia id placerat in, malesuada ut libero. Donec auctor eu nulla at tristique. Nulla et fermentum neque. Mauris dapibus eleifend lorem in fringilla. Maecenas sed purus quis nunc ullamcorper lobortis non ut lectus. Aliquam cursus dictum turpis eget accumsan. Etiam massa dolor, euismod ut diam molestie, adipiscing fringilla enim. Maecenas facilisis augue sapien, sed sagittis arcu cursus in. Nulla vel nibh nec urna feugiat eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent blandit tincidunt lorem, non auctor ligula faucibus vitae. Duis viverra aliquet pretium. Aenean tortor sem, placerat nec interdum non, mollis non nulla. Sed pulvinar leo a odio sagittis, ut rhoncus est feugiat. Aenean ac imperdiet nisi. Duis sed justo a lacus ultrices volutpat nec eu sapien. Cras pellentesque odio quis arcu tincidunt, sit amet blandit mi venenatis. Cras pharetra, urna quis pellentesque congue, erat diam pretium lorem, nec porta metus tortor vitae diam. Proin convallis sit amet mauris id auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla fringilla a orci sed scelerisque. Integer faucibus arcu nec turpis facilisis, sodales dictum velit aliquet. Ut facilisis mi ultricies bibendum sodales. Vestibulum pretium tellus id augue tincidunt, at lobortis nulla placerat. In cursus felis interdum vestibulum vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vel ultrices eros. Etiam tempor, quam eu elementum tempus, sapien mauris interdum nunc, ac dignissim enim ipsum eget nisl. Aenean et pretium purus. Quisque feugiat congue laoreet. Curabitur a fermentum orci. Praesent porttitor libero non dolor pellentesque venenatis. Morbi in tellus non enim sagittis mattis. Nulla rutrum, arcu in cursus commodo, nisl ligula consequat dui, at sagittis orci turpis ut sapien. Proin dignissim pretium fermentum. Sed at lacinia dui. Quisque a convallis diam, sed tristique purus. Maecenas non condimentum quam. Quisque tempus malesuada odio, in viverra dui tincidunt non. Integer congue interdum risus id congue. Sed id risus tincidunt, accumsan felis vel, malesuada odio. Curabitur id fringilla lorem, in consequat orci. Praesent scelerisque rhoncus eros in viverra. Maecenas posuere, velit at semper mattis, nunc erat volutpat eros, at lobortis lectus augue ac mi. Aenean odio enim, vulputate nec quam in, mollis fringilla magna. Nunc sit amet sagittis metus, nec faucibus neque. Phasellus eu mauris orci.
1

1 comentários:

Phasellus egestas scelerisque dapibus



 Proin eu dui mi. Phasellus egestas scelerisque dapibus. Sed vel viverra ante. Etiam vitae pulvinar purus. Aliquam dui nisi, commodo et ultrices pharetra, cursus a tellus. Donec pretium consequat suscipit. Duis pellentesque libero risus, sed laoreet urna dignissim in. Sed sit amet diam dictum, fermentum urna et, convallis nisl. Fusce fringilla enim quis semper viverra. Duis iaculis mi risus, sit amet pellentesque ligula adipiscing non.


  • Nulla eget purus at urna interdum dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nulla dictum nulla sit amet justo fermentum, id convallis odio mollis. Aliquam ac tristique diam, non mattis nibh. Nulla gravida non urna ultricies tristique. 
  • Quisque vel vulputate nunc, vitae auctor quam. Sed sollicitudin orci et erat euismod, et commodo dui mattis. In vitae nunc id lacus dapibus egestas eu eu diam. Praesent vehicula tortor accumsan, auctor urna vitae, pharetra ipsum. Pellentesque quis lectus ac neque volutpat rhoncus. In hac habitasse platea dictumst. Sed luctus feugiat erat posuere euismod. Quisque tincidunt sagittis nulla, id convallis turpis fermentum vitae. Maecenas ut consequat risus. Suspendisse congue augue sed erat faucibus, sed elementum erat blandit. Aliquam lacinia auctor nibh in bibendum. Phasellus quis tellus luctus, sagittis odio non, consequat nulla. Integer bibendum fermentum pellentesque. Vivamus id volutpat augue. Etiam vitae purus non nulla fermentum tristique. 
  •  Nunc id dolor adipiscing, interdum neque in, posuere libero. Aenean blandit augue id nunc tempor fringilla. Integer sit amet volutpat mauris. Vestibulum eu lacinia felis. Sed iaculis, nisl in gravida cursus, dui est fringilla sem, vel interdum mi est ac massa. Praesent lacinia posuere ultrices. Suspendisse id purus non lorem pharetra scelerisque at eu metus. Mauris pellentesque tincidunt enim, ut tincidunt lorem consequat id. Nulla orci nunc, scelerisque quis rutrum vitae, cursus ultricies lacus. Aenean sed feugiat diam. Morbi consectetur massa id enim venenatis, faucibus feugiat libero sodales. Aliquam erat volutpat. 
  • Praesent blandit molestie risus, a commodo quam tincidunt nec. Praesent non leo magna. Suspendisse non erat mauris. Nam ullamcorper nulla ut aliquam convallis. Vestibulum convallis, orci a iaculis venenatis, enim purus euismod leo, vitae bibendum dolor dolor at justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse convallis, magna non bibendum condimentum, elit lectus iaculis elit, sed rhoncus neque magna ut velit. Pellentesque mauris quam, ultricies nec lacus ac, consequat venenatis est. Nam orci nisi, aliquet fringilla ligula ac, vulputate gravida neque. Nunc rutrum quis sapien vel placerat. Fusce vel libero imperdiet urna feugiat mattis. Curabitur non imperdiet sem
2

2 comentários:

Curabitur ipsum arcu



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ipsum arcu, bibendum non libero a, faucibus interdum magna. Proin eu dui mi. Phasellus egestas scelerisque dapibus. Sed vel viverra ante. Etiam vitae pulvinar purus. Aliquam dui nisi, commodo et ultrices pharetra, cursus a tellus. Donec pretium consequat suscipit. Duis pellentesque libero risus, sed laoreet urna dignissim in. Sed sit amet diam dictum, fermentum urna et, convallis nisl. Fusce fringilla enim quis semper viverra. Duis iaculis mi risus, sit amet pellentesque ligula adipiscing non. Nulla eget purus at urna interdum dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nulla dictum nulla sit amet justo fermentum, id convallis odio mollis. Aliquam ac tristique diam, non mattis nibh. Nulla gravida non urna ultricies tristique. Quisque vel vulputate nunc, vitae auctor quam. Sed sollicitudin orci et erat euismod, et commodo dui mattis. In vitae nunc id lacus dapibus egestas eu eu diam. Praesent vehicula tortor accumsan, auctor urna vitae, pharetra ipsum. Pellentesque quis lectus ac neque volutpat rhoncus. In hac habitasse platea dictumst. Sed luctus feugiat erat posuere euismod. Quisque tincidunt sagittis nulla, id convallis turpis fermentum vitae. Maecenas ut consequat risus. Suspendisse congue augue sed erat faucibus, sed elementum erat blandit. Aliquam lacinia auctor nibh in bibendum. Phasellus quis tellus luctus, sagittis odio non, consequat nulla. Integer bibendum fermentum pellentesque. Vivamus id volutpat augue. Etiam vitae purus non nulla fermentum tristique. Nunc id dolor adipiscing, interdum neque in, posuere libero. Aenean blandit augue id nunc tempor fringilla. Integer sit amet volutpat mauris. Vestibulum eu lacinia felis. Sed iaculis, nisl in gravida cursus, dui est fringilla sem, vel interdum mi est ac massa. Praesent lacinia posuere ultrices. Suspendisse id purus non lorem pharetra scelerisque at eu metus. Mauris pellentesque tincidunt enim, ut tincidunt lorem consequat id. Nulla orci nunc, scelerisque quis rutrum vitae, cursus ultricies lacus. Aenean sed feugiat diam. Morbi consectetur massa id enim venenatis, faucibus feugiat libero sodales. Aliquam erat volutpat. Praesent blandit molestie risus, a commodo quam tincidunt nec. Praesent non leo magna. Suspendisse non erat mauris. Nam ullamcorper nulla ut aliquam convallis. Vestibulum convallis, orci a iaculis venenatis, enim purus euismod leo, vitae bibendum dolor dolor at justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse convallis, magna non bibendum condimentum, elit lectus iaculis elit, sed rhoncus neque magna ut velit. Pellentesque mauris quam, ultricies nec lacus ac, consequat venenatis est. Nam orci nisi, aliquet fringilla ligula ac, vulputate gravida neque. Nunc rutrum quis sapien vel placerat. Fusce vel libero imperdiet urna feugiat mattis. Curabitur non imperdiet sem
0

0 comentários:

Nulla dictum nulla sit amet justo fermentum




Nulla dictum nulla sit amet justo fermentum, id convallis odio mollis. Aliquam ac tristique diam, non mattis nibh. Nulla gravida non urna ultricies tristique. Quisque vel vulputate nunc, vitae auctor quam. Sed sollicitudin orci et erat euismod, et commodo dui mattis. In vitae nunc id lacus dapibus egestas eu eu diam. Praesent vehicula tortor accumsan, auctor urna vitae, pharetra ipsum. Pellentesque quis lectus ac neque volutpat rhoncus. In hac habitasse platea dictumst. Sed luctus feugiat erat posuere euismod. Quisque tincidunt sagittis nulla, id convallis turpis fermentum vitae. Maecenas ut consequat risus. Suspendisse congue augue sed erat faucibus, sed elementum erat blandit. Aliquam lacinia auctor nibh in bibendum. Phasellus quis tellus luctus, sagittis odio non, consequat nulla. Integer bibendum fermentum pellentesque. Vivamus id volutpat augue. Etiam vitae purus non nulla fermentum tristique. Nunc id dolor adipiscing, interdum neque in, posuere libero. Aenean blandit augue id nunc tempor fringilla. Integer sit amet volutpat mauris. Vestibulum eu lacinia felis. Sed iaculis, nisl in gravida cursus, dui est fringilla sem, vel interdum mi est ac massa. Praesent lacinia posuere ultrices. Suspendisse id purus non lorem pharetra scelerisque at eu metus. Mauris pellentesque tincidunt enim, ut tincidunt lorem consequat id. Nulla orci nunc, scelerisque quis rutrum vitae, cursus ultricies lacus. Aenean sed feugiat diam. Morbi consectetur massa id enim venenatis, faucibus feugiat libero sodales. Aliquam erat volutpat. Praesent blandit molestie risus, a commodo quam tincidunt nec. Praesent non leo magna. Suspendisse non erat mauris. Nam ullamcorper nulla ut aliquam convallis. Vestibulum convallis, orci a iaculis venenatis, enim purus euismod leo, vitae bibendum dolor dolor at justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse convallis, magna non bibendum condimentum, elit lectus iaculis elit, sed rhoncus neque magna ut velit. Pellentesque mauris quam, ultricies nec lacus ac, consequat venenatis est. Nam orci nisi, aliquet fringilla ligula ac, vulputate gravida neque. Nunc rutrum quis sapien vel placerat. Fusce vel libero imperdiet urna feugiat mattis. Curabitur non imperdiet sem
0

0 comentários: