Tutor Fast ♔: Personalizar os Posts // + modelos

adorable, despicable me, bananas, aww, cute, minions

Oiie minions *-* , novo tutorial ensinando a personalizar a area de postagem. Irei deixar alguns modelos e espero que gostem.

Let's Go!!

- Vá até Modelo >> Editar HTML >> Aperte Ctrl+ F e pesquise /* Posts irá encontrar um código mais ou menos assim:::::::::

/* Posts
----------------------------------------------- */
.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);
}

.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
}

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
}

.main-inner .column-center-inner .section {
  margin: 0 $(main.section.margin);
}

.post {
  margin: 0 0 $(post.margin.bottom) 0;
}

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 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%;
}

#comments .comment-author {
  padding-top: 1.5em;

  border-top: 1px solid $(body.rule.color);
  background-position: 0 1.5em;
}

#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

#comments .avatar-image-container img {
  border: 1px solid $(image.border.color);
}

Apague tudo e no lugar coloque o código de um modelo abaixo de sua preferencia.

- MODELO 1

CÓDIGO

/* Posts
----------------------------------------------- */
h3.post-title {
padding: 9px;
color:#ffffff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJ2QPxZ6qkK0zWShykWXGU2G-9k2o96OrtWZvOYOumnSA6KI1ydD6Boqs-Lsv0vC2FR6HOT9WnRTFNci4QXLRlge-yuC2txFE-4isE_49VBZO_yMSQcmixsVXO-wT-zMNeuIw9opquvQh/s1600/parapostar4.png);
border-bottom: 2px solid #EEA2AD;
font-family: "simple";
font-size: 25px;
text-align: center; /* posicionamento do título */
text-shadow: 1px 2px 3px #CDC1C5;
-webkit-transition-duration: 0.50s;
}
h3.post-title a {
color: #66648a; /* cor do título em estado normal */
-webkit-transition-duration: 0.50s;
}
h3.post-title a:hover {
color: #8B636C; /* cor do título em estado normal */
-webkit-transition-duration: 0.50s;
}

.date-header span {
color: white;
font-family: FONTE DA DATA;
background: #5CACEE; /* cor de fundo */
text-align:center;/* alinha o texto */
font-size: 11px; /* tamanho da letra */
width: 45px;/* largura */
height: 44px;/* altura */
float:left;
margin-left: -54px;
padding: 5px;
list-style:none;
position: absolute;
border-bottom: 2px solid #EEA2AD;
-webkit-transition-duration: .30s;
}
.date-header span:hover {
-webkit-transition-duration: .30s;
}

.main-inner {
padding-top: 35px;
padding-bottom: 65px;
}
.main-inner .column-center-inner {
padding: 0 0;
}
.main-inner .column-center-inner .section {
margin: 0 1em;
}
.post {
background: #FFFFFF;
padding-bottom:1.5em;
border: 1px solid #9AC0CD;
margin: 0 0 35px 0;
}
.post-body {
width: 95%;
padding: 20px;
font-size: 90%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: transparent;
border: 1px solid transparent;
-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: 5px;
}
.post-body .tr-caption-container {
color: #e06666;
}
.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 a:link {
color: #66648a;
text-decoration: none;
-webkit-transition-duration: .40s;
}
.post-footer a:visited {
color: #66648a;
text-decoration: none;
webkit-transition-duration: 0.40s;
}
.post-footer a:hover {
-webkit-transition-duration: .40s;
color: #b1b0c6;
}
.post-footer {
text-align: center;
margin-top: 30px;
margin-bottom: -22px;
background: #63B8FF;
padding: 5px;
font-family: "handy";
font-size: 10px;
color: #000000;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid transparent;
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid transparent;
}
.post-body img {
max-width: 98%;
}

@font-face {
font-family: "Simple";
src: url("http://static.tumblr.com/jxlyjkb/3LBmpn15n/bebasneue.otf");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "handy";
src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');
}

- MODELO 2

CÓDIGO

/* Posts
----------------------------------------------- */
h3.post-title {
padding: 7px;
color:#EE7AE9;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-K4kUaMtZY_2f1fdaQpfEb_ebvfzMI3ZmyVsgrfLNgROEgVDnV24zesbnqB3KZtPqJ0Qc03j9pbJSSAunHVMAAg-hWm-ALv8SQeh070jbaXHtDN_iG_NiJBSe-kHnYFkDgmiT4E7XkyLx/s1600/parapostar1.png);
border-bottom: 1px dashed #8B8B7A;
font-family: FONT DO TITULO DO POST;
font-size: 25px;
text-align: center; /* posicionamento do título */
text-shadow: 1px 2px 3px #CDC1C5;
-webkit-transition-duration: 0.50s;
}
h3.post-title a {
color: #EE7AE9; /* cor do título em estado normal */
-webkit-transition-duration: 0.50s;
}
h3.post-title a:hover {
color: #8B636C; /* cor do título em estado normal */
-webkit-transition-duration: 0.50s;
}

.date-header span {
color: #8B2252;
font-family: FONTE DA DATA;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdp2cGcW8G0OTVrXaPt3D9g2hQYRAb-7mPjzDG27_N2_LJzbgdTuVJDc12c3wx1ls1oq0t-6xHeN-acoyhajjK6sBSGYgNBIp7zNGDTaupGaeNDEw3ZqpfRT-YADtu8HHPNKzjQIEfW_uw/s1600/date-22.png');
background-repeat: no-repeat;
text-align:center;/* alinha o texto */
font-size: 14px;
width: 80px;/* largura */
height: 80px;/* altura */
float:left;
margin-left: -85px;
margin-top: 5px;
padding: 9px 1px 2px 1px;
overflow:hidden;
line-height: 18px;
word-spacing: 25px;
-webkit-transition-duration: .30s;
}
.date-header span:hover {
-webkit-transition-duration: .30s;
-webkit-animation: datee 1s;
}

.main-inner {
padding-top: 35px;
padding-bottom: 65px;
}
.main-inner .column-center-inner {
padding: 0 0;
}
.main-inner .column-center-inner .section {
margin: 0 1em;
}
.post {
background: #FFFFFF;
padding-bottom:1.5em;
border: 1px solid #FFBBFF;
margin: 0 0 35px 0;
}
.post-body {
width: 95%;
padding: 20px;
font-size: 90%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: transparent;
border: 1px solid transparent;
-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: 5px;
}
.post-body .tr-caption-container {
color: #e06666;
}
.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 a:link {
color: #66648a;
text-decoration: none;
-webkit-transition-duration: .40s;
}
.post-footer a:visited {
color: #66648a;
text-decoration: none;
webkit-transition-duration: 0.40s;
}
.post-footer a:hover {
-webkit-transition-duration: .40s;
color: #b1b0c6;
}
.post-footer {
text-align: center;
margin-top: 30px;
margin-bottom: -22px;
background: #FFBBFF;
padding: 5px;
font-family: "handy";
font-size: 10px;
color: #000000;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid transparent;
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid transparent;
}
.post-body img {
max-width: 98%;
}


@font-face {
font-family: "handy";
src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');
}

@-webkit-keyframes datee {
25% { -webkit-transform: scale(1.1); } 35%{ -webkit-transform: scale(0.8);}
45% { -webkit-transform: scale(1.1);} 45% { -webkit-transform: scale(0.8);} 
55% { -webkit-transform: scale(1.1);} 65% { -webkit-transform: scale(0.8); }
}

- MODELO 3

CÓDIGO

/* Posts
----------------------------------------------- */
h3.post-title {
padding: 9px;
color:#ffffff;
border-bottom: 1px dashed #B4CDCD;
font-family: "simple";
font-size: 23px;
text-align: center; /* posicionamento do título */
-webkit-transition-duration: 0.30s;
}
h3.post-title a {
color: #66648a; /* cor do título em estado normal */
-webkit-transition-duration: 0.30s;
}
h3.post-title a:hover {
color: #8B636C; /* cor do título em estado normal */
-webkit-transition-duration: 0.30s;
}

.date-header span {
border-radius: 2px;
color: white;
font-family: handy;
background: #CDC1C5; /* cor de fundo */
text-align:center;/* alinha o texto */
font-size: 8px; /* tamanho da letra */
width: 45px;/* largura */
height: 44px;/* altura */
float:left;
margin-left: -59px;
padding: 5px;
list-style:none;
position: absolute;
box-shadow: inset 0 0 6px #FFFFF0;
outline: solid 1px white;
outline-offset: -4px;
-webkit-transition-duration: .50s;
}
.date-header span:hover {
outline: solid 1px transparent;
outline-offset: -10px;
-webkit-transition-duration: .50s;
}

.main-inner {
padding-top: 35px;
padding-bottom: 65px;
}
.main-inner .column-center-inner {
padding: 0 0;
}
.main-inner .column-center-inner .section {
margin: 0 1em;
}
.post {
box-shadow: 0 0 6px black;
background: #FFFFFF;
padding-bottom:1.5em;
border: 1px solid #9AC0CD;
margin: 0 0 35px 0;
border-radius: 7px;
}
.post-body {
width: 95%;
padding: 20px;
font-size: 90%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: transparent;
border: 1px solid transparent;
-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: 5px;
}
.post-body .tr-caption-container {
color: #e06666;
}
.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 a:link {
color: #66648a;
text-decoration: none;
-webkit-transition-duration: .40s;
}
.post-footer a:visited {
color: #66648a;
text-decoration: none;
webkit-transition-duration: 0.40s;
}
.post-footer a:hover {
-webkit-transition-duration: .40s;
color: #b1b0c6;
}
.post-footer {
box-shadow: inset 0 0 6px #FFFFF0;
box-shadow: 0 0 6px black;
text-align: center;
margin-top: 20px;
margin-left: 6px;
margin-right: 6px;
margin-bottom: -10px;
background: #CDC1C5;
padding: 5px;
font-family: "handy";
font-size: 10px;
color: #000000;
outline: solid 1px white;
outline-offset: -4px;
border-radius: 3px;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid transparent;
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid transparent;
}
.post-body img {
max-width: 98%;
}

@font-face {
font-family: "Simple";
src: url("http://static.tumblr.com/jxlyjkb/3LBmpn15n/bebasneue.otf");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "handy";
src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');
}

Quem gostou comenta.
NÃO REBLOGUE!

Tutor Fast ♔

02 fevereiro 2014

Personalizar os Posts // + modelos

Nenhum comentário:

Postar um comentário