jueves, julio 30, 2015

[ TutosBlogs ] ¿Como diseñar plantillas de blogger? ( Parte 7 )

By: Ghaaby Captor | Fecha: 7/30/2015 |
 mis loqueros!! y sigo con el diseño este es un poco mas largo pero es completo!





1) Justificar el texto

2) Cambiar el titulo 

3) Cambiar la fuente del titulo

4) Personalizar el tachado / subrayado / la negrita / cursiva

5) Personalizar el blockquote

6) Personalizar Lista con viñetas y numerada




HTML Color Codes








Estos son todos los bordes!



i {
text-decoration: none;
color: #68BBDE;
}

b{
color:#A901DB;
-webkit-transition-duration: 1.5s;
font-size:15px;
} b:hover {
-webkit-transition-duration: 1.5s;
color: #00BFFF;
}

STRIKE {text-decoration:none; background:transparent url(http://lh3.ggpht.com/_Bvhqq3YFEx4/THpy7CIo-0I/AAAAAAAAAF4/RMU68xlmAFo/bllineath3.png) repeat-x left 55%}


u {
text-decoration: none;
font-style: bold;
border-bottom: 2px solid #CAE5FF;
-webkit-transition: 0.5s;
} u:hover {
-webkit-transition: 0.5s;
border-bottom: 6px solid transparent;
}


.post ul {
list-style: none;
margin: 10px 0 0 20px;
padding: 0;
.post ul li {
color: #0174DF;
}
background:url(http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif) center left no-repeat;
margin:0; padding:3px 3px 3px 20px;
}


.post ol {
counter-reset: li;
margin-left: 0;
color: #A901DB;
padding-left: 0;
font-size: 18px;
text-shadow: 1px 1px 1px #ccc;
} .post ol li {
margin: 0 0 13px 2em !important;
list-style: outside none none; padding: 4px 8px !important;
.post ol li::before {
position: relative; } .post ol li:hover { color: #FF0080; }
background: rgba(0, 0, 0, 0) url("http://4.bp.blogspot.com/-PNoEkZjt9Wk/VbUsFLHveuI/AAAAAAAAacw/iUDT7gF58AY/s1600/star.png") no-repeat scroll left top;
color: #fff; content: counter(li, decimal); counter-increment: li; font-size: 16px; font-weight: bold; left: -1.5em; margin-right: 8px; padding: 5px 3px 4px 0 !important;
}
position: absolute; text-align: center; top: 0;
width: 27px;








.post-title{
font-family: 'Fjalla One', sans-serif;
color: #ccc;
font-size: 22px;
display: inline-block;
margin-top: -16px;
margin-bottom: -10px;
padding: 16px;
.post-title a:hover{
text-shadow: 3px 3px 1px #ffdbe2; } color: #FF0080;
}
text-decoration: none; text-shadow: 3px 3px 1px #ccc;


<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'/>


  
avatar
30 de julio de 2015, 6:55

hola :D sin duda son los mejores vídeos para que tu plantilla que de muy genial n_n .-. gracias

avatar
30 de julio de 2015, 8:02

Gracias por toda la información! con todo lo que sabes podrias llegar a crear un libro pdf (al estilo como la revista) sobre diseños de plantillas, a lo mejor te conviene para que no quede perdida la información, piensatelo! porque seria una pena que quedaran por ahi perdidas las entradas ^^
Saludos guapa!

avatar
30 de julio de 2015, 12:37

Hola!
Awww me ha encantado el tutorial de hoy, me haz ayudado muchísimo y gracias a todo lo que compartiste pude modificar muchas cosas en mi blog.
Gracias!
Lo único que no funciono en mi plantilla fue lo de cambiar las listas, pero ya veré a ver como lo cambio.
Besos

avatar
Yukii
Admin
30 de julio de 2015, 19:57

Hola!
Yo como e dicho antes soy muy mala editando jaja así que te agradezco mucho por subir este tipo de entradas jaj son de mucha ayuda :)
Muchos saludos!~