Cambiar: Inicio/Entradas antiguas/Nuevas entradas por una imagen
Este es el 1ºtutorial que hago de editar el HTLM!!Asi que espero que os guste!! Es un tutorial de como cambiar al final de la pagina el sitio que pone entradas recientes/Pagina principal/Entradas antiguas por la imagen que tu quieras!!
(Clik en leer mas para seguir viendo la entrada)
Para eso hay que editar el HTLM de tu blog!
Muy importante:Antes de hacer cambios en la plantilla hacer una copia de seguridad en tu blog!
Pues vamos a Plantilla-Editar HTLM
Para entradas recientes
Dale a Ctrl+F y busca <data:newerPageTitle/> y cambialo por <img src='URL de la imagen'/>
Para cambiar el de la pagina principal:
Dale a Ctrl+F y busca <data:homeMsg/> y cambialo por <img src='URL de la imagen'/>
Para cambiar entradas antiguas:
Dale a Ctrl+F y busca <data:olderPageTitle/> y cambialo por <img src='URL de la imagen'/>
Iconos que podeis utilizar
Creditos:XX
Poner un separador al final de la entrada
Cuanto tiempo sin escribir!!Entre examenes,clases por la tarde,apenas tengo tiempo de escribir,tengo unas ganas de que llegen las vacaciones de verano...
Pero bueno,intentare escribir mas amenudo,asi que traigo un tutorial de como cambiar el separador normal de blogger:
Pues vamos a Plantilla>Edicion HTLM>Ctrl+f>. post {
y pega el siguiente codigo abajo de text-align: left
Ejemplo:
background: url(URL DE TU DIVISOR)no-repeat;
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
Aquí os dejo algunos separadores que podeis utilizar:
Espero que os haya gustado,si teneis algun problema o no os funciona ponozmelo en los comentarios,ami me funciono bien,pero si teneis algun problema intentare solucionarlo
Creditos:X
Cambiar el borde de la entrada de tu blog
Lo que tienes que hacer es ir a Plantilla > HTLM > Ctrl+f >Buscas : SOLID
Te apareceran varios SOLID asi que tendras que repetir la busqueda varias veces asta que ayas sustituido todos.
(Clik en leer mas para ver el resto de la entrada)
Y cambias los SOLID por el borde que tu quieras,aqui os dejo los tipos de bordes que podeis poner,debajo de cada tipo de borde pone el nombre que teneis que poner por SOLID :
Dashed Double Dotted Outset
Creditos: X
Cambiar el color de la seleccion
Os traigo un tutorial de como cambiar el color de la seleccion de tu blog,la seleccion de todas las páginas siempre es un fondo azul y las letras de color blanco:
(Clik en leer mas para ver el resto de la entrada)
-Ir a Plantilla >HTLM>Dale a Ctrl+f>y buscas ]]></b:skin>
Y pegas este codigo detras de ]]></b:skin>
/* Color texto seleccionado */::-moz-selection {background: #F0FFFF;color:#FFFFFF;}
}
Y ahora si quieres editarlo
-Para cambiar el color del fondo del seleccionado cambia #F0FFFF(lo que esta en rojo) Por el color que quieras
-Para cambiar el color de la letra cambia #FFFFFF(Lo que esta en naranja) por el color que quieras
PD:Clik aqui para ver el codigo de los colores en HTLM
Creditos:X
Como poner un icono en el titulo del post
Hoy publico 2 veces porque mañana seguramente no podre publicar ya que tengo toda la tarde ocupada,este es un tutorial un poco lioso,asi que si lo quieres hacer hazlo con calma porque aun hay que seguir unos cuantos pasos,este es un tutorial para poner en los titulos de tus post los iconos que tu quieras
-Lo 1º es ir a: Plantilla>Edicion HTLM>Ctrl+F>Y buscas <h3 class='post-title entry-title' itemprop='name'>
-Y te tendra que aparecer esto:
 |
| Si no te aparece esto vuelve a repetir la busqueda por que creo que hay 2 codigos iguales. |
<a expr:href='data:post.url'><img src='URL DE TU IMAGEN'/><data:post.title/></a>Lo que esta en rojo lo cambias por la direccion de el icono que tu quieras,le das a guardar y listo.
PD:Si tu ya tienes efectos en tus post:Cajas,cintas,o algun otro código HTLM alomejor no te funciona.
Poner una imagen a los anonimos de blogger
Este es un tutorial que saque de el blog de: Mundo Kawaii Sofi asi que los creditos de esta entrada son todos para ella.
Este tutorial como ya dice el titulo es de como poner la imagen que tu quieras a la gente anonima que comente en tu blog
Si tu permites que en tu blog pueda comentar todo tipo de personas,cuando alguien anonimo comente en blogger por defecto va a poner el icono de una persona en azul oscuro:
Plantilla>Editar HTLM>Ctrl+F>Y buscas ]]></b:skin>
Y pegas antes este codigo:
Lo que esta en rojo lo cambias por la direccion de el icono que quieres poner..avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {opacity:0;}.avatar-image-container {background:url(URL DE LA IMAGEN);}
PD: La imagen que pongas no puede ser mayor que 50 x 50,aqui os dejo unos avatares que podeis poner si quereis:
Efecto opaco en las imagenes
Y tambien hoy es viernes,asi que tendre mas tiempo para poder escribir,este es un tutorial que yo siempre estube buscando pero no lo encontre,asi que nunca lo pude llegar a poner y hoy justo lo vi,pena que ya tenga puesto mi marco a las imagenes,pero pense que alomejor a vosotros os gustaría:
Es un efecto que vuelve las imagenes de el blog mucho mas claras y al pasar el cursor se vuelven al tono normal,aqui unos ejemplos:
 |
| Como se puede ver con este efecto las imagenes se ven mucho mas claras de lo normas |
 |
| Aqui pase el cursor por la imagen de la entrada y se volvio mas oscura que las otras |
Plantilla>Editar HTLM>Ctrl+F>Y buscas </head>
Y pegas detras de </head> este código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>Le das a guardar y listo!! =3
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>
Espero que lo hayais entendido bien,si tienes alguna duda,o no os funciona o cualquier cosa lo pones en los comentarios e intentare ayudar!
Como hacer que el nombre de tu blog se mueva
Esta vez os traigo un tutorial muy facil de hacer,muchos blogs en las pestañas,en el explorador y en la barra de herramientas,el nombre de sus blogs se les mueve( Si quereis ver el efecto podeis ver el blog de -AllCuteAnime-) pues en esta entrada os pondre como podeis ponerlo en vuesto blog
Teneis que ir a Plantilla>Editar HTLM>Ctrl+F>Y buscas <head>
y despues de <head> pegas el siguiente codigo:
<script>
//<![CDATA[
var txt=" Título del blog ";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
//]]>
</script>
Y con eso ya deveria de funcionar todo perfectamente n//n
Como ponerle un fondo al borde de las imagenes
Normalmente el marco de las imagenes que cuelgas en los post o gadget o son blancos o transparentes por defecto,pues con este tutorial podras cambiar ese marco por la imagen o fondo que te quieras,ademas es un tutorial muy facil y con un codigo muy pequeñito
aqui os dejo una imagen para que veais a el marco que me refiero:
 |
| Esta imagen pertenece a el blog de Lunany |
Plantilla>Edicion HTLM>Ctrl+f>Y buscas:]]></b:skin>
Cuando lo encuentres pega este codigo atras:
Y con eso tendria que funcionar!.post img {background: url("URL DE TU IMAGEN") repeat;border-radius:20px 0 20px 0px;border:1px solid #969696;box-shadow:2px 2px 2px #c0c0c0;}
Donde pone URL DE LA IMAGEN lo cambias por la direccion de el fondo que os guste.Efecto en el titulo de tu blog
Os traigo un tutorial bastante facil de como poner un efecto a los post de tu blog cuando les pasas el cursor por encima,este tutorial queda muy bien y ami me gusta mucho,le de un toque original a tu blog.
Aqui os dejo unas imagenes de como es el efecto,las imagenes las hice de el blog de:coco teen
El titulo de el post normal:
Pues para poner el efecto ir a >Plantilla> Edicion HTLM>Ctrl+F>Y buscash3.post-title a:hover
Y encontraras el codigo de esta manera:
h3.post-title a:hover{Pues ahora remplaza ese codigo por este:
text-decoration: underline;
h3.post-title a:hover { text-decoration: none; color:#F307AC;/* Color del texto al pasar el cursor */ letter-spacing: 4px;En lo que esta en rojo pon el color HTLM que quieras que tenga el titulo al pasar el cursor
PD:Si quieres que el titulo de la entrada tambien este centrado tienes que ir aPlantilla>Edicion HTLM>Ctrl+f>Y buscas h3.post-title {
Y pegas abajo de ese codigo:
text-align:center
y creo que con eso tendría que funcionar todo n_n Si lo intentas y tienes algun problema ponlo en los comentarios haber si puedo ayudar en algo :D
Creditos a:
Como poner una imagen de fondo al pasar el cursor por un link
Hola!! -^.^-
Este es un tutorial para editar los links de tu blog y cuando pases el cursor por alguno que aparezca la imagen que tu quieras,aqui os pongo un ejemplo que hice un mi blog:
-Yo quiero que al pasar el cursor aparezca de fondo esta imagen:
-El efecto que hace con este tutorial:
Pues para ponerlo teneis que ir a Plantilla>HTLM>Ctrl+F>Buscas ]]></b:skin>
Y antes de el pegas:
PD: Lo que esta en azul lo cambias por la URL de la imagen que tu quieres poner ;Da{
text-decoration:none ;
color:#BDA291 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ; }
a:hover{
color:#fff ;
background:url(http://data.whicdn.com/images/43688874/Sanrio-Puroland-58_large.jpg);
background-position:50% 80%;
background-size:400px;
}
Efecto Blockquote
Igualmente tenia muchas ganas de escribir,asi que saque un poco de tiempo y me anime.
Esta vez es un tuto de como colocar un efecto de Blockquote,un Blockquote es un recuadro que se coloca en las entradas adornado muy kawaii donde dentro suele haber un tipo de mensaje importante o código
Seguro que lo habeis visto en miles de blog,ya que yo no tengo ese efecto en mi blog, hice una captura de el blog de mi amiga Kirah que ella si que lo tiene para mostrarlo:
Bueno,espero que despues de esto os hayais hecho una idea,pues traigo un tutorial de un blockquote,en concreto este(En la imagen no se precia muy bien,pero es muy bonito:
 |
| Blockquote normal |
 |
| Al pasar el cursor |
- Vas a Plantilla > Edición HTLM > Y buscas ]]></b:skin>
- Y luego copias antes de ]]></b:skin> el siguiente código
blockquote{Verde: URL de la imagen de fondo
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-hbGRCqttyWgiRRXsGWgguiiYdRbFos0z8uejs6WEicSHHboJ5Cbfq3UEpeUjWh-YeqsRoy2FQrj6UQicggDHiiTQloSUcHDDUG2oF47CnBK7xZDqmHZ84meg02ZlPmXx0ltwqqqXbLR/s1600/grey.png
);
padding:10px;
border-radius:10px;
border-left:10px solid #CCC4FB;
border-right:10px solid #CCC4FB;
border-top:2px solid #DED9FC;
border-bottom:2px solid #DED9FC;
color:#808080;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
font-family:calibri
}
blockquote:hover{
border-radius:20px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-box-shadow: 0px 0px 8px #B0AAFF;
-moz-box-shadow: 0px 0px 8px #B0AAFF;
box-shadow: 0px 0px 8px #B0AAFF;
}
Naranja: Color de los bordes
Salmón: Color de las sombras
Y con esto ya tendría que servir,porcierto luego cuando quieras aplicar el Blockquote a tu entrada tienes que hacer esto:
- Escribir con normalidad tu entrada y luego seleccionar el texto que quieras que vaya en el Blockquote
- Cuando lo tengas seleccionado dale a la opción de "Cita" en la entrada
Poner un botón de Follow flotante
Al final si que cambie el nombre de el blog...Estoy contenta con el cambio,el diseño sigue siendo el mismo,no he cambiado nada,pero no se se me hace raro,aunque creo que hice bien
No he cambiado la URL de el blog aun,seguramente lo deje asi
Este es un tutorial muy facil,y es de como poner un boton de seguir el blog que va flotando en la esquina derecha:
,aqui os dejo una prueba que hice en mi blog,el que yo le puse es muy sencillo,luego se puede editar mas:
Diseño>Añadir Gadget>HTLM/Javascrip>Y pegas este código:
><div style="position:fixed; top :5px; right:5px; padding:5px; border:1pxdashed #FFAAAA; background:#fff;"><a style="color:#7B7A7A; text-decoration:none; font-family:calibri; font-size:12;" href="http://www.blogger.com/follow-blog.g?blogID=5592144585522485075">Follow | </a> <a style="color:#7B7A7A; text-decoration:none; font-family:calibri; font-size:12;"href="http://www.blogger.com/home">Dashboard </a> </div>Verde:Grosor del borde
Naranja:Tipo de borde
Rojo:Color del borde
Azul:Color de las letras
Rosa:ID del blog *(Mas abajo de la entrada esplico que es eso)
Verde azulado:Lo que quieres que ponga el recuadro,lo puedes sustituir por "Sigueme" o lo que quieras
*Para conseguir la ID de tu blog lo que tienes que hacer es una vez en blogger clikar dentro de tu blog y poner los números que haya en la dirección:
Espero que os haya gustado y que dejeis vuestro comentario!
No hay comentarios:
Publicar un comentario