Morbi sollicitudin
tes
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"
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;
}
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 = "float" ;
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() {
$('.main3 .widget-content').hide();
$('.main3 h2:first').addClass('active').next().slideDown('slow');
$('.main3 h2').click(function() {
if($(this).next().is(':hidden')) {
$('.main3 h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
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() {
$('.main3 .widget-content').hide();
$('.main3 h2:first').addClass('active').next().slideDown('slow');
$('.main3 h2').click(function() {
if($(this).next().is(':hidden')) {
$('.main3 h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</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 == "static_page"'>
<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='"Link para " + 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='"Link para " + 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 != "item"'>
<div class='post hentry'>
<div class='postright'>
<div class='arrow'/>
<div class='cover'>
<div class='date'>
<a expr:href='data:post.url' expr:title='"Abrir link " + data:post.title' rel='bookmark'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
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='"Link para " + 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='"Post: " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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='"Comentar em: " + 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 + "?&max-results=3"' expr:title='"Tags relacionadas : " + data:label.name' rel='tag'><data:label.name/></a>, <b:if cond='data:label.isLast != "true"'/>
</b:loop></b:if></div>
</div>
</div>
</div>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'><ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Início</a> »</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 != "true"'>,</b:if>
</b:loop>
»
</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='"Link para " + 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='"Link para " + 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>
<b:if cond='data:blog.pageType == "static_page"'>
<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='"Link para " + 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='"Link para " + 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 != "item"'>
<div class='post hentry'>
<div class='postright'>
<div class='arrow'/>
<div class='cover'>
<div class='date'>
<a expr:href='data:post.url' expr:title='"Abrir link " + data:post.title' rel='bookmark'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
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='"Link para " + 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='"Post: " + data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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='"Comentar em: " + 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 + "?&max-results=3"' expr:title='"Tags relacionadas : " + data:label.name' rel='tag'><data:label.name/></a>, <b:if cond='data:label.isLast != "true"'/>
</b:loop></b:if></div>
</div>
</div>
</div>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'><ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Início</a> »</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 != "true"'>,</b:if>
</b:loop>
»
</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='"Link para " + 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='"Link para " + 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.
Morbi sollicitudin venenatis massa
Phasellus egestas scelerisque dapibus
- 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
Curabitur ipsum arcu
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
Aliquam porttitor vestibulum
Aliquam porttitor vestibulum nunc, et varius lectus congue et. Mauris diam mauris, viverra eu vestibulum et, vehicula sed mi. Suspendisse in felis eu nisi pretium semper a ut ante. Pellentesque eget eros venenatis mi rhoncus dictum. Cras ut arcu ipsum, id euismod nulla. Vivamus molestie, turpis in commodo suscipit, dui massa varius nunc, vel rhoncus lorem massa nec leo. Fusce feugiat suscipit pharetra. Etiam faucibus mauris vel mi lacinia id vehicula nisi facilisis. Vestibulum luctus lorem in nisl sollicitudin mollis ac eget magna.
Phasellus sed urna lorem. Morbi ipsum lorem, gravida sed sollicitudin sed, scelerisque id metus. Pellentesque auctor, felis at sagittis facilisis, nisi erat hendrerit turpis, et molestie orci orci nec nulla. Donec facilisis felis eget orci placerat vel adipiscing urna dignissim. Sed eget purus nunc, quis euismod dolor. Nullam a tortor metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras et tincidunt velit. Donec arcu nisi, tincidunt consequat pharetra non, consequat nec magna. Aenean congue, ligula ac pharetra semper, arcu velit interdum velit, eu iaculis velit neque ac libero. Etiam dignissim justo non nibh congue molestie mollis augue eleifend. Nam in libero nulla.
Sed sit amet elementum nisl. Vestibulum ut felis augue, et feugiat massa. Aliquam fringilla, enim non semper condimentum, lectus turpis imperdiet lacus, aliquam ornare leo augue fermentum nisl. Nulla sapien odio, dictum nec bibendum a, fringilla quis ligula. Sed eget neque eget nisl varius pretium. Phasellus justo sem, rhoncus a porta non, mattis eu sem. In porttitor malesuada tellus, eget vestibulum nunc egestas eu. Vivamus et tellus metus.
Assinar:
Postagens (Atom)
Minha lista de blogs
-
-
O Blog Mudou!!!Há 7 anos
-
-
Agora sim!Há 11 anos
Comentários
Quem sou eu
Arquivo do blog
Tecnologia do Blogger.