27 abril 2014

Posted at  12:25  |  in  

Estilos Fofos Prontos para seus Posts e Sidebars!


Nos posts:
Na sidebar:
E esse post torna-se um complemento para o tutorial de remover a borda serrilhada do modelo Travel; foi testado no modelo Simple também.
Vá em Modelo - Personalizar - Avançado - Deixe os planos de fundo transparentes (Plano de Fundo Principal, da Postagem e da Barra Lateral)...
1. Personalizando a área de Postagens
Ainda em Avançado, vá até Adicionar CSS e cole:
001/* Kawaii Posts By Roberta-reinokawaii.blogspot.com
002---------------------------------------------------- *//**titulos**/
003.post h3 a, .post h3 a:visited, .post h3, .comments h4 {
004background: #fff;
005color:#fcc;
006font-size:22px;
007font-family: 'Milonga', cursive;
008text-shadow: 1px 2px 3px #fcc;
009border-bottom: 2px dashed #eee;
010text-align: right;
011}
012.post h3 a:hover {
013color: #eee;
014text-align: right;
015 -webkit-transition-duration: .30s;
016}
017/**area da postagem**/
018.post{
019background: #ffffff;
020width: 600px;
021color: #a1a1a1;
022font-family: 'Milonga' cursive;
023font-size: 12px;
024text-shadow: 1px 2px 3px #eee;
025text-align: justify;
026border: 6px dashed #fee;
027padding-right:10px;
028padding-left: 10px;
029box-shadow: 3px 4px 5px #bbb;
030margin:10px 0;
031}
032/**rodape do post**/
033.post-footer {
034  margin: .5em 0;
035  line-height: 1.6;
036background: none;
037color: #fcc;
038width: 500px;
039font-family: 'Milonga', cursive;
040font-size: 12px;
041}
042.post-footer a{
043color:#fcc;
044}
045.post-footer a:hover{
046color:#fcc;
047}
048/**estilos das listas**/
049.post ul li {
050 list-style: none;
051 margin: 0;
052 padding: 0;
053    padding: 0 0 4px 12px;
055}
056/**selecao colorida para o blog todo**/
057*::-moz-selection {
058background: #fff !important;
059color: #fcc !important;
060}
061*::selection {
062background: #fff !important;
063color: #fcc !important;
064}
065/**estilo do leia mais**/
066.jump-link {
067float: center;
068font-weight: bold;
069font-size: 26px;
070font-family: 'Milonga' cursive;
071text-align:right;
072padding: 1px 2px;
073margin-left:20px;
074}
075.jump-link a {
076color: #fcc; /* Cor do texto */
077text-decoration: none;
078font-weight: bold;
079}
080.jump-link:hover {
081color: #fee; /* Cor do texto */
082text-decoration:none;
083}
084/**efeito nas imagens**/
085.post-body img:hover {-moz-opacity:0.30; opacity:0.30;-khtml-opacity:0.50;-webkit-transition:  0.4s; -moz-transition: 0.4s;transition: 0.4s;}
086/**tamanho padrão para imagem**/
087.post a img, .post img {
088  max-width: 530px;
089  margin: 0 auto;
090  padding: 5px;
091}
092/**formatacao de texto**/
093u {/* Sublinhado */
094text-decoration:none;
095color:#61D2D6;
096border-bottom: 1px solid #9BF0E9;
097-webkit-transition: 0.4s;
098}
099u:hover {/* Sublinhado hover */
100border-bottom: 1px solid #EDDE45;
101-webkit-transition: 0.4s;
102}
103b, strong { /* Negrito */
104color: #ED146F;
105font-weight: bold;
106}
107i,em { /* Italico */
108color: #EA3556;
109text-decoration: none;
110}
111strike { /* Riscado */
112text-decoration: strike;
113color:#EB9F9F;
114}
115strike:hover { /* Riscado hover */
116text-decoration: none;
117color:#EB9F9F;
118}
119/**background e borda dos comentarios**/
120.comments {
121background: #fff;
122width: 100%;
123padding: 5px;
124border: 6px dashed #fee;
125}

2. Personalizando a Sidebar 
Em seguida, cole isso:
01/* Kawaii Sidebar By Roberta-reinokawaii.blogspot.com
02---------------------------------------------------- *//**area geral dos widgets**/
03.sidebar .widget {
04background: #fff;
05margin: 10px 0;
06width: 240px;
07padding: 0 0 5px 0;
08border-bottom: 5px solid #fcc;
09color: #a1a1a1;
10border: 6px dashed #fee;
11padding: 4px;
12}
13/**titulos dos widgets**/
14.sidebar .widget h2 {
15background: #fcc;
16width: 240px;
17font-family: 'Milonga', cursive;
18font-size: 20px;
19color: #fee;
20text-shadow: 1px 2px 3px #fcc;
21border-bottom: 10px solid #eeffff;
22}
23/**estilos das listas**/
24#sidebar ul {
25 list-style: none;
26 margin:0 0 10px 0;
27 padding:0;
28}
29.sidebar ul li {
30 list-style: none;
31 margin: 0;
32 padding: 0;
33 border-bottom:1px dotted #C1C1C1;
34    padding: 0 0 4px 12px;
36}
37/**links**/
38.sidebar .widget a:link {
39  color: #fcc;
40  text-decoration: none;
41}
42.sidebar .widget a:visited {
43  color: #fcc;
44}
45.sidebar .widget a:hover {
46  color: #fee;
47  text-decoration: none;
48border-bottom: 1px dotted #fcc;
49}

A visualização é automática; edite como preferir, mas peço que mantenha os créditos ok? Clique no botão Aplicar ao Blog quando terminar de editar. Volte para Modelo, e em Editar HTML acrescente abaixo de<head> essa fonte fofinha:
1<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'/>

Os títulos de contagem de comentários ficam personalizados iguais aos dos posts; verifique se você já usa algum dos estilos, por exemplo, se já estiver usando css para o leia mais, para não ficar repetido, excluindo um dos dois de seu template. Pronto; salve e essa parte em sua edição está prontinha ou quase pronta, caso adicione mais estilos. 

http://reinokawaii.blogspot.com.br/2013/06/css-para-posts-e-sidebar.html

Share this post

About Naveed Iqbal

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim venenatis fermentum mollis. Duis vulputate elit in elit. Follow him on Google+.

0 comentários:

About-Privacy Policy-Contact us
Copyright © 2013 Testes para Blogs. Blogger Template by Bloggertheme9
Published..Blogger Templates. Powered by Blogger.
back to top