Estilos Fofos Prontos para seus Posts e Sidebars!

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:

copiar sourceprint?

001	/* Kawaii Posts By Roberta-reinokawaii.blogspot.com

002	---------------------------------------------------- *//**titulos**/

003	.post h3 a, .post h3 a:visited, .post h3, .comments h4 {

004	background: #fff;

005	color:#fcc;

006	font-size:22px;

007	font-family: 'Milonga', cursive;

008	text-shadow: 1px 2px 3px #fcc;

009	border-bottom: 2px dashed #eee;

010	text-align: right;

011

}

012	.post h3 a:hover {

013	color: #eee;

014	text-align: right;

015	-webkit-transition-duration: .30s;

016

}

017	/**area da postagem**/

018

.post{

019	background: #ffffff;

020	width: 600px;

021	color: #a1a1a1;

022	font-family: 'Milonga' cursive;

023	font-size: 12px;

024	text-shadow: 1px 2px 3px #eee;

025	text-align: justify;

026	border: 6px dashed #fee;

027	padding-right:10px;

028	padding-left: 10px;

029	box-shadow: 3px 4px 5px #bbb;

030	margin:10px 0;

031

}

032	/**rodape do post**/

033	.post-footer {

034	margin: .5em 0;

035	line-height: 1.6;

036	background: none;

037	color: #fcc;

038	width: 500px;

039	font-family: 'Milonga', cursive;

040	font-size: 12px;

041

}

042	.post-footer a{

043	color:#fcc;

044

}

045	.post-footer a:hover{

046	color:#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;

054	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXHgiqkqwMyBaIaqyMyQa8d148ls665J7KleWZ6LYvTF7GoLRPjmLxfV0_Us82rDtMY_pa9T85lpKq9_-4H8o1d_a1X4nKt9U-T_igbv9EybaQFhstL4qsEm9GD5G8mGDXHbobkWMi/s1600/favlaco.gif") no-repeat 0 2px;

055

}

056	/**selecao colorida para o blog todo**/

057	*::-moz-selection {

058	background: #fff !important;

059	color: #fcc !important;

060

}

061	*::selection {

062	background: #fff !important;

063	color: #fcc !important;

064

}

065	/**estilo do leia mais**/

066	.jump-link {

067	float: center;

068	font-weight: bold;

069	font-size: 26px;

070	font-family: 'Milonga' cursive;

071	text-align:right;

072	padding: 1px 2px;

073	margin-left:20px;

074

}

075	.jump-link a {

076	color: #fcc; /* Cor do texto */

077	text-decoration: none;

078	font-weight: bold;

079

}

080	.jump-link:hover {

081	color: #fee; /* Cor do texto */

082	text-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**/

093	u {/* Sublinhado */

094	text-decoration:none;

095	color:#61D2D6;

096	border-bottom: 1px solid #9BF0E9;

097	-webkit-transition: 0.4s;

098

}

099	u:hover {/* Sublinhado hover */

100	border-bottom: 1px solid #EDDE45;

101	-webkit-transition: 0.4s;

102

}

103	b, strong { /* Negrito */

104	color: #ED146F;

105	font-weight: bold;

106

}

107	i,em { /* Italico */

108	color: #EA3556;

109	text-decoration: none;

110

}

111	strike { /* Riscado */

112	text-decoration: strike;

113	color:#EB9F9F;

114

}

115	strike:hover { /* Riscado hover */

116	text-decoration: none;

117	color:#EB9F9F;

118

}

119	/**background e borda dos comentarios**/

120	.comments {

121	background: #fff;

122	width: 100%;

123	padding: 5px;

124	border: 6px dashed #fee;

125

}

2. Personalizando a Sidebar 

Em seguida, cole isso:

copiar sourceprint?

01	/* Kawaii Sidebar By Roberta-reinokawaii.blogspot.com

02	---------------------------------------------------- *//**area geral dos widgets**/

03	.sidebar .widget {

04	background: #fff;

05	margin: 10px 0;

06	width: 240px;

07	padding: 0 0 5px 0;

08	border-bottom: 5px solid #fcc;

09	color: #a1a1a1;

10	border: 6px dashed #fee;

11	padding: 4px;

12

}

13	/**titulos dos widgets**/

14	.sidebar .widget h2 {

15	background: #fcc;

16	width: 240px;

17	font-family: 'Milonga', cursive;

18	font-size: 20px;

19	color: #fee;

20	text-shadow: 1px 2px 3px #fcc;

21	border-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;

35	background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijZ5CRSL5yDvYfrPKIzuhD-i8G-CJRWGg-DWErd64xQs1NvykF4z7U4MOqu8XlEfY1axIq_zo6qDDOOEIuEL0ZrIMQEBOZXAree33Rgt1EA6wibnxGnsDMGcHk8xTYcvr8kZfRmhGE/s1600/mini-153.gif") no-repeat 0 2px;

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;

48	border-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:

copiar sourceprint?

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