Personaliza Tu BLog X Completo
17:39
Trucos | PerSonaLiZa
Tu BloG
Tu BloG
eN Este Blog encontRaras MuchA InfoRmacioN de ComO PerSonaliZar Tu Blog
Si deseas ver la imagen en grande da clic sobre de ella.
================================================
Principiantes:
Principiantes:
ComO AñaDir 1 EntrAda HTLM
================================================
Para que sirve esto? para que puedas añadir cosas a tu blog como:
· reloj /imagenes fijas o gif /traductores/plantillas/contadores/banners y mucho mas ...
1. Entramos a nuestro blog y nos dirigimos a Diseño
2. busca añadir un gadget
3. Te saldrá una nueva ventanita ahí da clic en HTLM/javascript
4._Te saldrá una nueva ventana
Titulo: si deseas puedes escribir un titulo del gadget que vayas anexar no es necesario si no lo deseas puedes dejar el espacio en blanco.
Contenido: Pega el codigo de lo que vayas anexar a tu blog,
Guardar: para que se publique tu gadget.
Cancelar: si deseas que ya no se publique
Atrás: para volver a las opciones de gatget
¡No T Olvides comentAr!
======================================================
Principiantes:
Como editar las plantillas q te da blogger:
Cambiar la plantilla/el fondo/tamaño/tipo y color de letras...
=======================================================
Como Cambiar la plantilla que te da blogger- 1º inicia la sesión en blogger
- de ahí nos vamos a Plantilla
- Nos enviara a la pagina en donde están todas las plantillas disponibles, ahí podemos elegir cualquiera de las que se muestran.
Como cambiarle el fondo- En la pestaña de plantilla, nos da una vista previa de nuestro blog y como se ve en un móvil.
- Da clic en la opción de personalizar
- Da clic en FONDO
- Te saldrá una ventanita blanca con una pestaña hacia abajo da clic ahí
- ahí podemos elegir una imagen que te proporciona blogger o cargarla desde tu pc para ponerla como fondo de tu blog.
Del lado derecho saldrán los diferentes estilos con los que cuenta la pagina y a la izquierda la vista previa de la imagen a poner solo da clic sobre de ellas una vez que desees una da clic en finalizar.
Si deseas una imagen que tengas en tu PC da clic en:
Subir imagen- Seleccionar archivo-buscas tu imagen y clic en finalizado.
- Si ya no deseas la imagen da clic en eliminar imagen- clic en aceptar para suprimir la imagen.
Como ajustar el ancho d tu pagina- Nos vamos a la 3º opción q dice
- AJUSTAR ANCHO
- ahi movemos las flechas para poder ajustar nuestra pagina a nuestro justo
- Para q nuestra información ocupe todo el blog arrastra la flechita hacia la derecha
- o si deseas q l la barra lateral se haga + pequeña arrastra la flechita de la barra de abajo hacia la izquierda.
- Muevela poco a poco y ve como va quedando n la parte de abajo d tu blog
Como cambiar el diseño- Es decir como se presenta nuestro blog que seria con plantillas predeterminadas de blogger en la anterior de AJUSTAR ANCHO seria algo asi como hacerlo manualmente y en esta opción de
DISEÑO
- Podemos escojer si deseamos q en nuestro blog tenga todo el ancho para la informacion
- o podemos seleccionar q tenga barras laterales ya sea n la parte izq. o derecha
- si deseamos 1 o 2 barras laterales q estas nos sirven para poner + información como títulos o algún algún otro adorno.
- y cambiar la forma de pie de pagina s decir lo que esta al final d nuestro blog
Como cambiar el color y tipo de letra- Como verán es sencillo simplemente escoge la parte del texto q deseas cambiarle el color o el tipo de letra y listo.
====================================
Principiantes:
Como poner una imagen en la cabecera de nuestro blog
====================================
- Entra a Diseño
- Ahí busca el gadget de Cabecera y da clic en editar
- Da clic en seleccionar archivo para buscar una imagen desde tu PC
- o escribe la URL de la imagen que deseas poner como cabecera
- Puedes modificar el titulo de tu blog
- Puedes añadir alguna descripción referente a tu blog
Selecciona la ubicación de la imagen de cabecera
- Detrás de titulo y descripción: La imagen quedara atrás
- En lugar del titulo y descripción: solo quedara la imagen
- Colocar la descripción después de la imagen: quedara la imagen y abajo tu descripción.
¡No T Olvides comentAr!
====================================================
Configura los comentarios de tu blog
==================================================
==================================================
- Entramos a Configuración
- Clic en Entradas y comentarios ya ahí comenzamos a configurar
-Ubicación: puedes escoger debajo, pagina completa, ventana emergente los usuarios irán a otra ventana a dejar el comentario
entrada incrustada a continuacion los usuarios haran el comentario dentro de las misma ventana.
-Quien puede realizar Comentarios:
aqui puedes seleccionar culaquiera: y todas las personas pueden comentar aunq no tengan cuenta. usuarios registrados solo las personas q cuentan con un ID pueden comentar.
usuarios con cuenta google y solo miembros del blog.
-Moderación de comentarios aqui selecciona siempre para q no aparesca el mensaje n automatico si no q tu los revises y ya despues tu selecciona si deseas publicarlos solo n las entradas publicadas hace seleccionas el o los dias nunca para q se publiquen automaticamente.
-¿Mostrar verificación de la palabra para comentarios? SI para q aparesca n la parte de abajo un codigo d letras,te ayudará a reducir los comentarios no deseados NO para q no aparesca y los publiquen en automatico.
-Enlaces de retroceso Los enlaces de retroceso te permiten realizar el seguimiento de otras páginas web que tienen enlaces hacia tus entradas.
-Mensaje del formulario de comentarios ahi scribe algun mensaje q desees q aparesk n la prte de aariba del recuadro del mensaje x ejemplo: gracias x tus comentarios.
¡No T Olvides comentAr!
=======================================================================================
Como buscar mas rápido y fácil alguna parte del codigo en el editor d HTLM
====================================================================================
====================================================================================
- Esto es en cualquier pagina puedes buscar cualquier palabra o parte de un código HTLM
- Presiona las sig. teclas de tu teclado al mismo tiempo
- Ctrl + F
- ahí escribe la parte del codigo q buscas y listo
=======================================================================
CoMo hacer Un Fondo para nuestro blog
=======================================================================
=======================================================
CoMo modificar las partes de nuestra template
======================================================
======================================================
Que hacer cuando no se ve N tu blog
TuS seguidores
=======================================================
- Entra a Diseño
- Edición dE HTLM
- busca (recuerda que para buscar mas rápido presiona Ctrl+ F)
- vas a pegar justo después de:
google.load(prototype;1.6.0.3);
y Antes de
google.load(scriptaculous;1.8.2);
</script>
(osea n Medio ^-^)
- Lo Siguiente:
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
- Al final Te quedara algo así:
google.load(prototype;1.6.0.3);
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load(scriptaculous;1.8.2;);
</script>
============================================
CoMo Poner 1 Reloj digital
============================================
==============================================
Pon Un ConTador d VisiTantes
(t Muestro Varios d Dif. stilos)
(t Muestro Varios d Dif. stilos)
=====================================================================
Opción 1. Revolvermaps.
Opción 2 whos
Opción 3. opromo.
=======================================================
Primer Efecto
Que tu imagen salga de derecha a izquierda
Que tu imagen salga de abajo para arriba o viceversa
Para que salgan varias imágenes de abajo para arriba o viceversa
Para que la imagen se pare al pasar el cursor
Opción 1. Revolvermaps.
Opción 2 whos
Opción 3. opromo.
=======================================================
AgreGaLe EfeCtos A Tus ImaGeneS
(T muestro como hacerle para q salgan d abajo, arriba, etc)
==============================================
(T muestro como hacerle para q salgan d abajo, arriba, etc)
==============================================
Primer Efecto
Imágenes En Marca de Agua o semitransparentes
· 1º busca tu imagen
· del siguiente código borra donde dice URL DE LA IMAGEN
· Pega ahí el url o dirección de TU imagen
· Copia y pega el código ya hecho en TU entrada HTLM
<DIV style="FILTER: Alpha(opacity=100,finishOpacity=25,style=2); HEIGHT: 353px" > <IMG src="URL DE LA IMAGEN " border=0></DIV>
Que tu imagen salga de derecha a izquierda- Pega este código en 1 entrada HTLM
- Pega la URL de la imagen donde dice aqui el link
<br /><marquee><img src="aquí el link" /></marquee><br />
Que tu imagen salga de abajo para arriba o viceversa - Sola cambia up x down para q tu imagen SALGA d arriba para abajo
- up: arriba
- down: abajo
- Pega este código en 1 entrada HTLM
<br /><marquee direction="up"><img src="Link" /></marquee><br />
Para que salgan varias imágenes de abajo para arriba o viceversa - Solo cambia donde dice link x el link d tu imagen
- si quieres añadir + imágenes d las q ya stan n ste código solo anexa lo sig. antes d <br /></center> </marquee><br /> :
<br /><img src="Link" />
- Para cambiar el modo n q salen las imágenes cambia up o down según sea el caso
- Donde dice 100 s la altura
- Donde dice 8 s la velocidad n q van saliendo las imágenes
- Pega este código en 1 entrada HTLM
<br /><br /><br /><marquee scrolldelay="100" direction="up" crollamount="8" height="100px"> <center><br /><img src="Link" /><br /><img src="Link" /><br /><img src="Link" /><br /><img src="Link" /><br /></center> </marquee><br />
Para que la imagen se pare al pasar el cursor - Pega este código en 1 entrada HTLM
- Modifica:Pon la URL de tu imagen en donde esta el signo de gato #
<br /><marquee onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" direction="up"><br /><br /><img src="#" /><br /><br /></marquee><br />
Acá otro código
<marquee onmouseover="stop()" onmouseout="start()" bgcolor="#ffffff" scrollamount="5" scrolldelay="50"><a href="url de la pag. a nlazar Tutos LAdy Pink"><img style="WIDTH: 63px; HEIGHT: 57px" border="0" src="url de la imagen Tutos Lady Pink" width="90" height="80" /></a></marquee>
Acá otro código<marquee onmouseover="stop()" onmouseout="start()" bgcolor="#ffffff" scrollamount="5" scrolldelay="50"><a href="url de la pag. a nlazar Tutos LAdy Pink"><img style="WIDTH: 63px; HEIGHT: 57px" border="0" src="url de la imagen Tutos Lady Pink" width="90" height="80" /></a></marquee>
puedes modificar:
bgcolor: q s el color de fondo d la barra
scrollamount: q s la velocidad n q pasan los iconos.
WIDTH y HEIGHT: q es el tamaño d los iconos
y claro sta cambiar donde dice cambiar el url
Zoom en la imagen de tu cabecera
Zoom en la imagen de tu cabecera- Entra a plantilla
- Edición de HTLM
- Modifica si deseas el ancho (Width) y el alto (height)
- Busca y pega antes de ]]></b:skin> el siguiente código:
#header img {
width:200px; /* Ancho de la imagen en su estado normal */height:200px; /* Alto de la imagen en su estado normal */ -moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}#header img:hover {width:400px; /* Ancho de la imagen al pasar el cursor */height:400px; /* Alto de la imagen al pasar el cursor */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}
=====================================================
Desactivar el clic derecho en tu pag.
t dejo 2 tipos d efectos: ventana con texto o ventana con imagen
=====================================================
t dejo 2 tipos d efectos: ventana con texto o ventana con imagen
=====================================================
Para que sirve esta opción? Para dejar inactiva la opción de copiar nuestro contenido de nuestra pagina.
Les comparto 2 opciones:
OPCIÓN 1º
ventana con mensaje de texto
- Cambia del siguiente código lo que esta de color rosa por tu texto
<script language="JavaScript">
<!--
<!--
function inhabilitar(){
alert ("Gracias x comentar y seguirM")
alert ("Gracias x comentar y seguirM")
return false
}
}
document.oncontextmenu=inhabilitar
// -->
</script>
</script>
OPCIÓN 2
al dar clic derecho les saldrá una ventana
- Entra a Plantilla -
- Edición HTLM
- Pega el siguiente código arriba de: </head>
- Puedes modificar si deseas los valores que se indican
function mostrardesactivar() {
with(document.getElementById('desactivar')) {
style.display = '';
}
return false
}
function cerrardesactivar() {
document.getElementById('desactivar')
.style.display = 'none';
}
document.oncontextmenu=mostrardesactivar;
document.onclick=cerrardesactivar;
</script>
<style>
.desactivar-vku{
position:fixed;
left:45%; /* Posición desde la derecha */
top:190px; /* Posición desde la arriba */
z-index:8888888;
background: #fff; /* Color del fondo */
border:3px solid #ccc; /* Ancho y color del borde */
padding:0 10px; /* Separación del borde */
color:#000; /* Color del texto */
text-align:center; /* Texto centrado */
}
</style>
document.getElementById('desactivar')
.style.display = 'none';
}
document.oncontextmenu=mostrardesactivar;
document.onclick=cerrardesactivar;
</script>
<style>
.desactivar-vku{
position:fixed;
left:45%; /* Posición desde la derecha */
top:190px; /* Posición desde la arriba */
z-index:8888888;
background: #fff; /* Color del fondo */
border:3px solid #ccc; /* Ancho y color del borde */
padding:0 10px; /* Separación del borde */
color:#000; /* Color del texto */
text-align:center; /* Texto centrado */
}
</style>
- Ahora pega el siguiente código arriba de: </body>
- Puedes modificar la url de la imagen
<p align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5p8HuSvUONW69xyltHUKKn4SfWUA8e-qy4ZsZiomSG9RQY2d3CQdLa56I6JXaAuhvdoRXhdldx22QvSQhmPvMqHtdT1UfQoM5UWCb4BLw0tpg3GGoO_1Vs3jYA52Er1BdbczMbp1Kj28/" border="0" width="70" height="70"/></p>
<p>Gracias<br/>x tu visita...</p>
</div>
===================================
Poner un botón de:
VolvEr Arriba y abajo deslizante
Poner 1 volver arriba
====================================
PRIMERA OPCIÓN- Plantilla / editar HTLM
- Pega lo sig. ANtes d </head>
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
- Ahora Pega sto AnTeS d </body>
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>
- Solo cambia lo q sta d rojo x el URL d tu imagen
- Guarda los cambios y listo
ciudadblogger
SEGUNDA OPCIÓN
Poner un botón d VolvEr Arriba
- Copia y pega Este código en tu entrada HTLM
Como modificar el código:
- Pega el link dE la pag. en donde dice... Aqui pones la pag. de tu spacio/#top"
- Pega o escribe algun titulo para tu boton donde dice Aqui pones lo q quieras q diga el boton d volver arriba
<P align=center><SPAN><FONT style="FILTER: Glow(strength=5,color=#0000ff); WIDTH: 319px; HEIGHT: 78px" color=#ffffff size=6><B><A style="TEXT-DECORATION: none" href=AQUI PONES LA PAGINA DE TU ESPACIO/#top"><FONT color=#ffffff>-> Aqui pones lo que quieras que diga el boton para Volver Arriba <-</FONT></A></B></FONT></SPAN></P>
===========================================================
Mostrar gadget solo en la pagina principal
===========================================================
- Entra a tu blog
- Plantilla
- Edicion HTLM
- Expande los artilugios
- Copia y pega lo que esta de rojo, en el gadget que deseas ocultar.
Ejemplo: - <b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
=====================================================
Pon Destellos en el cursor de Tu Blog
=====================================================
- Entra a tu blog
- Plantilla
- Edicion HTLM
- Antes d </head>
- Copia y pega lo sig.:
<script type="text/javascript">
// <![CDATA[
var colour="#f0f";
var sparkles=50;
/var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
// <![CDATA[
var colour="#f0f";
var sparkles=50;
/var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
======================================
Haz caer imágenes en tu blog con efecto d nieve
=======================================
=======================================
Pega el código en una entrada HTLM
- Como modificar el código:
solo cambia la imagen por la tuya donde dice snow.gif colocando la URL o dirección de tu imagen.
- Acá esta el código:
<script>
var no = 5; // snow number
var speed = 15; // smaller number moves the snow faster
var snowflake = "snow.gif";
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 400, doc_height = 500;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = 500;
doc_height = 500;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
</script>
var no = 5; // snow number
var speed = 15; // smaller number moves the snow faster
var snowflake = "snow.gif";
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 400, doc_height = 500;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = 500;
doc_height = 500;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
</script>
================================================================
Subrayar un link al pasar el mause
================================================================
================================================================
- Pega el código en una entrada HTLM
- Para cambiar el color solo pon el nombre del color en ingles por ejemplo: red.
- Como puedes ver puedes modificar las partes del siguiente código que están de color rojo.
<STYLE type="text/css">
<!--
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: blue; TEXT-DECORATION: underline} -->
</STYLE>
</p>
<p><a href="l1.htm">El texto que quieras.</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>
=====================================================
Pon 1 imagen fija de bienvenida
en 1 esquina con el efecto de
volver arriba
=====================================================
- Sube tu imagen a un servidor por ejemplo: picasa.
- abre tu blog y ve te a plantilla
- de ahi a EDICIÓN DE HTLM
- ahí busca lo sig.:
</body>
- ahi anexa el siguiente código:
- Cambia donde dice dirección d la imagen x el URL d tu imagen
=====================================================
Pon 1 imagen fija de bienvenida
en 1 esquina al azar
=====================================================
Coloca una imagen en una esquina de tu blog y que esta cambie según se cargue la pagina.
- Entra a Diseño
- Edición de HTLM
- Buscar </body> y pegar antes el sig. código:<script language='JavaScript'>imagenes = new Array(3)imagenes[0] = "<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>"imagenes[1] = "<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>"imagenes[2] = "<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;'/>"aleatorio = Math.random() * (imagenes.length)aleatorio = Math.floor(aleatorio)document.write(imagenes[aleatorio])</script>
- Cambia donde dice URL de la imagen por la URL de tu imagen, claro esta, en cada uno de las partes en donde se indica poner la url de las diferentes imágenes que desees.
=====================================================
Cambiar el texto
Fonts de Google
Fonts de Google
=====================================================
Lo primero es obtener la fuente para esto hacemos lo que indico en este video: https://youtu.be/wl3OfABnf8w?t=54s
Una vez que tengamos nuestra fuente elegida acudimos a la plantilla de nuestro blog - Editar HTLMCuando ubiquemos la ruta pegamos el primer código que proporciona Google Antes de <b:skin><
Es algo así...
<link href=’https://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’ type=’text/css’/>
Luego buscamos font-family: y lo cambiamos por el que nos proporciona Google
Por ultimo le damos en Guardar plantilla y Listo!!!
=====================================================
Cambiar el texto de:
Entradas antiguas/inicio/entradas restantes
por imágenes
=====================================================
Para entradas recientes- 1º crea una copia de seguridad de tu plantilla por cualquier cosa
- una vez en edición de tu plantilla busca lo sig.:
- (Para hacerlo + rapido preciona Ctrl + F n Chrome veras q t aparec 1 pestaña n la parte superior derecha en explorer stara n la izq. ahi scrib o copia y pega lo sig.:)
- Selecciona expandir plantillas de artilugios
- cambia
<data:newerPageTitle/>
- por lo sig:
<img src='URL de la imagen'/>
- Cambia donde dice URL d la imagen x el link d tu imagen
Para entradas antiguas- Cambia
<data:olderPageTitle/>
- Por lo sig.:
<img src='URL de la imagen'/>
- lo mismo cambia URL d la imagen x el link d la tuya
Para Inicio- cambia
<data:homeMsg/>
- Por
<img src='URL de la imagen'/>
=====================================================
Titulo de la pestaña con efecto
te dejo 2 tipos de efectos
=====================================================
te dejo 2 tipos de efectos
=====================================================
Esto es en la parte de arriba de tu explorador a paracen las pestañas de las pag. que estas visitando ahi aparace el titulo de la web bueno ps eso lo puedes cambiar es decir que no este estatico si no con movimiento.
1º efecto- cambia donde dice diseño de pagina web por tu texto
acá el código :
<SCRIPT language=JavaScript>
var txt= " DISEÑO DE PÁGINAS WEB ";
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>
var txt= " DISEÑO DE PÁGINAS WEB ";
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>
SEGUNDA OPCIÓN- Esta opción da el efecto de maquina de escribir es decir el titlulo de nuestro blog aparece letra por letra.
Cambia donde dice texto 1 texto 2 texto 3 por lo que desees que apareca
acá el código:
<script type="text/javascript">
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new tb8_makeArray(3);
tb8_messages[0] = "TEXTO 1";
tb8_messages[1] = "TEXTO 2";
tb8_messages[2] = "TEXTO 3";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new tb8_makeArray(3);
tb8_messages[0] = "TEXTO 1";
tb8_messages[1] = "TEXTO 2";
tb8_messages[2] = "TEXTO 3";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>
=====================================================
Cambiar el color d tu texto
=====================================================
- si t das cuenta la gama d colores q t muestro solo trae los num. solo tienes q anexar el signo # antes d stos.
RED
FF0000FF3300 CC3300 FF9999 FFCCCC 990033 MAROON
990000FF3333 CC3333 FFCC99 CC0066 993300 FF0033 CC0033 FF9966 FF6699 660000 000000 CC0000 663333 990066 330000 LIME
66FF0033FF33 66FF66 OLIVE
66FF0099FF99 CCFFCC GREEN
00FF0000CC00 009900 006600 003300 00CC00 009900 006600 003300 009900 006600 66FF00 009900 AQUA
00FFFF00FFFF 3333FF TEAL
0066666666FF 9999FF BLUE
0000FF33FFFF 66FFFF 99FFFF CCFFFF CCCCFF 0000CC 000099 000099 CCCCFF 000066 000033 000099 00CCCC 009999 006666 003333 YELLOW FFFF33 FFFF66 FFFF99 FFFFCC CCCC00 999900 666600 333300 FUCHSIA FF33FF FF66FF FF99FF FFCCFF CC00CC 990099 660066 330033 TEAL 7D337D 7D667D 7D997D 7DCC7D E100E1 CC00CC AF00AF 990099 FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 663300 663333 663366 663399 6633CC 6633FF 660000 660033 660066 660099 6600CC 6600FF 333300 333333 333366 333399 3333CC 3333FF 003300 003333 003366 003399 0033CC 0033FF 330000 330033 330066 330099 3300CC 3300FF 000000 000033 000066 000099 0000CC 0000FF
=====================================================
Códigos para poner símbolos en tu blog
=====================================================
Para ponerlos solo presiona al mismo tiempo las sig. teclas:
Alt + 3= ♥
Alt + 1=☺
Alt + 2=☻
Alt + 4=♦
Alt + 5=♣
Alt + 6=♠
Alt + 7=•
Alt + 8=◘
Alt + 9=○
Alt + 14=♫
Alt + 15=☼
Alt + 16=►
Alt + 12=♀
Alt + 13=♪
Alt + 17=◄
Alt + 18=↕
Alt + 19=‼
Alt + 20=¶
Alt + 21=§
Alt + 22=▬
Alt + 23=↨
Alt + 24=↑
Alt + 25=↓
Alt + 26=→
Alt + 27=←
Alt + 28=∟
Alt + 29=↔
Alt + 30=▲
Alt + 31=▼
Alt + 32=Nada
Alt + 33=!
Alt + 34="
Alt + 35=#
Alt + 36=$
Alt + 37=%
Alt + 38=&
Alt + 39='
Alt + 40=(
Ctrl+Atl+66= ¬ ¬ (2 veces)
var sleft=sdown=0;
==========================================================================================
Como poner Responder a un comentario de tu blog
==========================================================================================
COMO MODIFICAR EL CÓDIGO:
cambia donde dice aquí el ID de tu blog por el tuyo, lo veras cuando estés en la pestaña de diseño algo así:
lo que esta despues de ID= es tu ID
Acá el código:
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=aqui pon el ID d tu blog;postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>[Responder]</a></span>
=============================================================
Poner un Recomienda esta pagina
==============================================================
Pon sto si deseas q alguien recomiende tu pagina solo tendra q poner el correo electronico y clic en recomendar esta web.
- clic en diseño
- añade una entrada HTLM
- pega y guarda el sig. codigo
<form name="eMailer">
ENVÍA ESTA PÁGINA A UN AMIGO
<br>
Indica su e-mail:
<br>
<input type="text" name="address" size="25">
<br>
<input type="button" value="Recomendá esta Web!" onClick="mailThisUrl();">
</form>
<script language="JavaScript1.2">
var good;
function checkEmailAddress(field) {
// the following expression must be all on one line...
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|
(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){
good = true
} else {
alert('Por favor introduce un e-mail valido')
field.focus()
field.select()
good = false
}
}
u = window.location;
m = "Pienso que te puede interesar esta página...";
function mailThisUrl(){
good = false
checkEmailAddress(document.eMailer.address)
if (good){
// the following expression must be all on one line...
window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;
}
}
</script>
ENVÍA ESTA PÁGINA A UN AMIGO
<br>
Indica su e-mail:
<br>
<input type="text" name="address" size="25">
<br>
<input type="button" value="Recomendá esta Web!" onClick="mailThisUrl();">
</form>
<script language="JavaScript1.2">
var good;
function checkEmailAddress(field) {
// the following expression must be all on one line...
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|
(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){
good = true
} else {
alert('Por favor introduce un e-mail valido')
field.focus()
field.select()
good = false
}
}
u = window.location;
m = "Pienso que te puede interesar esta página...";
function mailThisUrl(){
good = false
checkEmailAddress(document.eMailer.address)
if (good){
// the following expression must be all on one line...
window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;
}
}
</script>
=======================================================
Cabecera diferente cada vez que entras
=======================================================================
- Entra a Diseño
- Añadir un gadget
- HTLM/JavaScript
- Pega el siguiente código:
<script language="JavaScript">
var imagenumber = 4;
var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber);
images = new Array;
images[0] = "URL del banner 1";
images[1] = "URL del banner 2";
images[2] = "URL del banner 3";
images[3] = "URL del banner 4";
links = new Array;
links[0] = "#";
links[1] = "#";
links[2] = "#";
links[3] = "#";
var image = images[rand1];
var link = links[rand1];
</script>
<script>document.write('<a href="'+link+'"><img style="border: 0px;" src="'+ image +'"></a>')</script> - Quita donde dice URL del banner por la URL de tu imagen en cada uno según corresponda y # por la URL de tu pagina o web a donde quiera que vayan cuando le den clic sobre la imagen.
============================================================
Deslizador de imágenes de tus
ultimas publicaciones
=============================================================
ultimas publicaciones
=============================================================
Codigo de ciudad blogger.
- Entra a Plantilla
- Edición HTLM
- Pega el siguiente código justo antes de ]]></b:skin>
- /* Easy Slider (Automático)
-------------------------------------------------------------------- */
#slide-container {
width:480px;
height:320px;
position:relative;
}
#slider {
width:480px;
height:320px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
}
.slide-desc {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboI7N9PkwfwjfCkShsB2V-N7EMjnb5DdfEMtQkyNv3rRF-eGe1CWX3YNOubQfHe1AK7kTnEpWTA_ACe9qdhZOVp83K-B3MyPAtiC-NjlMA-8eDjr9yr-GhyphenhyphenvnKtsXA5mOUGHTbtiyrbA/s30/bgtransparent.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
text-align:left;
bottom:0;
width:100%;
z-index:99999;
}
.slide-desc h2{
display:block;
color:#f2f2f2;
font-size:14px;
}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:480px;
height:320px;
overflow:hidden;
}
#prevBtn, #nextBtn {
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn {
left:500px !important;
}
#prevBtn, #nextBtn {
display:block;
left:0;
position:absolute;
top:132px;
width:30px;
height:77px;
z-index:1000;
}
#prevBtn a, #nextBtn a {
display:block;
position:relative;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXBg9LUJHNPZLrp7QuWW5cG10N21HItL7gAT6PzvElTBCQKsk4XPHQtRzVQ4BMdBHTGC647_JPWSI69UZNPHW1yimch3vj0EEW_rUBVCnFMKsLgnxwuEhIIJCd5efCD93Iaf3v02sMpk/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTlWRsUPJpZEoSbKajmdKjt0kJKjb8itbi6GHGyh1sN8PVCkym-FFT5en4kapusdO1dViaX1XoPcK41ssgZiV_1QKhwc6wvp6G8cq7dvWqmUGTDKApfSAySUEnCtNH6GJHdTzWwUrn8g/s77/flecha-next.png) no-repeat 0 0;
}
/* Estilos de los números */
ol#controls{
margin:8px 25px;
padding:0;
height:28px;
}
ol#controls li{
margin:0 4px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #000; /* Borde de los números */
background:#0B243B; /* Color de fondo de los números */
color:#fff; /* Color de los números */
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1; /* Color de fondo del número activo */
color:#fff; /* Color del número activo */
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
- <script>//<![CDATA[
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjJ-Wg9W5FTid6pcOOnbVW9uBh33-fJTFl5xpvQ_B9hJ8-cYCMj_pR87EQMbbsOu_ywEaYa8IJPCfGpGaoqnibM6pwothBg7FJ98-Q56jhFgdPe95HbkzTQwli5Kx4c8cgNFtHeJQB294/s0/sin-imagen.png';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');
document.write('</li>');
}
document.write('</ul>');
}
//]]>
</script>
- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
*/
(function($){$.fn.easySlider=function(options){var defaults={prevId:'prevBtn',prevText:'Previous',nextId:'nextBtn',nextText:'Next',controlsShow:true,controlsBefore:'',controlsAfter:'',controlsFade:true,firstId:'firstBtn',firstText:'First',firstShow:false,lastId:'lastBtn',lastText:'Last',lastShow:false,vertical:false,speed:800,auto:false,pause:5000,continuous:false,numeric:false,numericId:'controls'};var options=$.extend(defaults,options);this.each(function(){var obj=$(this);var s=$("li",obj).length;var w=$("li",obj).width();var h=$("li",obj).height();var clickable=true;obj.width(w);obj.height(h);obj.css("overflow","hidden");var ts=s-1;var t=0;$("ul",obj).css('width',s*w);if(options.continuous){$("ul",obj).prepend($("ul li:last-child",obj).clone().css("margin-left","-"+w+"px"));$("ul",obj).append($("ul li:nth-child(2)",obj).clone());$("ul",obj).css('width',(s+1)*w)};if(!options.vertical)$("li",obj).css('float','left');if(options.controlsShow){var html=options.controlsBefore;if(options.numeric){html+='<ol id="'+options.numericId+'"></ol>'}else{if(options.firstShow)html+='<span id="'+options.firstId+'"><a href=\"javascript:void(0);\">'+options.firstText+'</a></span>';html+=' <span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span>';html+=' <span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>';if(options.lastShow)html+=' <span id="'+options.lastId+'"><a href=\"javascript:void(0);\">'+options.lastText+'</a></span>'};html+=options.controlsAfter;$(obj).after(html)};if(options.numeric){for(var i=0;i<s;i++){$(document.createElement("li")).attr('id',options.numericId+(i+1)).html('<a rel='+i+' href=\"javascript:void(0);\">'+(i+1)+'</a>').appendTo($("#"+options.numericId)).click(function(){animate($("a",$(this)).attr('rel'),true)})}}else{$("a","#"+options.nextId).click(function(){animate("next",true)});$("a","#"+options.prevId).click(function(){animate("prev",true)});$("a","#"+options.firstId).click(function(){animate("first",true)});$("a","#"+options.lastId).click(function(){animate("last",true)})};function setCurrent(i){i=parseInt(i)+1;$("li","#"+options.numericId).removeClass("current");$("li#"+options.numericId+i).addClass("current")};function adjust(){if(t>ts)t=0;if(t<0)t=ts;if(!options.vertical){$("ul",obj).css("margin-left",(t*w*-1))}else{$("ul",obj).css("margin-left",(t*h*-1))}clickable=true;if(options.numeric)setCurrent(t)};function animate(dir,clicked){if(clickable){clickable=false;var ot=t;switch(dir){case"next":t=(ot>=ts)?(options.continuous?t+1:ts):t+1;break;case"prev":t=(t<=0)?(options.continuous?t-1:0):t-1;break;case"first":t=0;break;case"last":t=ts;break;default:t=dir;break};var diff=Math.abs(ot-t);var speed=diff*options.speed;if(!options.vertical){p=(t*w*-1);$("ul",obj).animate({marginLeft:p},{queue:false,duration:speed,complete:adjust})}else{p=(t*h*-1);$("ul",obj).animate({marginTop:p},{queue:false,duration:speed,complete:adjust})};if(!options.continuous&&options.controlsFade){if(t==ts){$("a","#"+options.nextId).hide();$("a","#"+options.lastId).hide()}else{$("a","#"+options.nextId).show();$("a","#"+options.lastId).show()};if(t==0){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}else{$("a","#"+options.prevId).show();$("a","#"+options.firstId).show()}};if(clicked)clearTimeout(timeout);if(options.auto&&dir=="next"&&!clicked){;timeout=setTimeout(function(){animate("next",false)},diff*options.speed+options.pause)}}};var timeout;if(options.auto){;timeout=setTimeout(function(){animate("next",false)},options.pause)};if(options.numeric)setCurrent(0);if(!options.continuous&&options.controlsFade){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}})}})(jQuery);
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: false // Cambiar a true si se quiere mostrar la paginación de números
});
});
//]]>
</script>
6._Por ultimo crea un gadget desde:
Diseño-Añadir un gadget- HTLM/javascript y pega esto:
Aquí deberás modificar donde dice nombre-de-mi-blog por el tuyo.
Diseño-Añadir un gadget- HTLM/javascript y pega esto:
Aquí deberás modificar donde dice nombre-de-mi-blog por el tuyo.
- <div id="slider">
<script style="text/javascript">
var numposts_gal = 10; // Número de entradas a mostrar
var numchars_gal = 150; // Número de caracteres en el resumen
var random_posts = false; // Cambiar por true si se quieren aleatorios
</script>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
============================================================
Poner música de fondo en tu blog
=============================================================
=============================================================
entra a diseño y crea una nueva entrada HTLM
ahi pega y guarda ste codigo
<BGSOUND SRC="sonido" LOOP=none>
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">
cambia donde dice sonido x la url d tu musica, el formato de sonido .mid s mas liviano y mas rapido d cargar q un .mp3 pero d = forma lo puedes poner.
============================================================
Banners de publicidad
=============================================================
=============================================================
Código de ciudad blogger:
- Entra a Diseño
- Edición HTLM
- Antes de ]]></b:skin>
- Pegar el Siguiente código:
/* Banners 125 x 125
----------------------------------------------- */
.ads {
margin-top:5px;
margin-left:5px;
}
.ads img {
padding: 4px;
margin-bottom: 5px;
} - Ahora añade un gadget
(Diseño-Añadir un gadget-HTLM/Javascript) - Pega el siguiente código:
<div class="ads">
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
<a href="URL del enlace"><img src="URL de la imagen" width="125px" height="125px" /></a>
</div> - Quita donde dice URL del enlace y URL de la imagen por los tuyos.
MAS INFORMACIÓN QUE TE PUEDE SERVIR PARA PERSONALIZAR TU BLOG:
- Agrega el fan box de twitter en tu blog
- Añade Twitter a tu sitio web
- Agrega Fan Box de Facebook en tu blog
- Remarcar lo mas importante de una entrada de tu blog con una imagen
- Poner una cabecera en las plantillas de vistas dinámicas de blogger
- Enmarcar las imágenes de nuestro blog con un fondo
- Eliminar los enlaces de entradas antiguas de blogger
- Como poner un fondo en blogger
- Poner un gif en el titulo de una entrada de tu blog
- Botones para tu web
- Cambiar la forma de la barra desplazadora
- Como cambiar el cursor del blog Como cambiar el cursor del blog
- Las 7 vistas dinamicas de blogger (lo nuevo)
- Editar blogger by_LAdy Pink
- Error al comentar en blogger
- Cajas de texto para tu web
- Poner contador online en tu blog
- Como poner un chat como el de facebook en blogger
- Como poner un favicon desde blogger
- Como poner Emoticones en blogger
- Como poner un reproductor en tu blog
- Como modificar tu template de blogger
- como hacer un fondo para tu blog
- como hacer un fondo para blogger
- Como hacer una cabecera para tu blog
- Favicones
- Templates para blogger
.png)
.png)
.png)
3 comentarios
oooo si gracias por la imagen a y tambien por lo del e-mail de eso ya me habia dado cuenta jaja y la vedad me da hueva aditarlo pero hay luego lo arreglo aaa y lo del otro blog si tadavia lo ocupo pero ocupo mas este jajaja pero bueno hay aver que pasa depues con el otro pero de todas formas checo mas este jejeje aaa y oye por cierto lo del correo eso de serguirme ammm me puedes pasar el codigo html para poner lo que tu hiciste hasta arribotota donde dice sigueme por correo para mejor yo poner ese y quitar el otro a ya despues veo que mas jejeyyyyyyyyyyyyyyyyyyyyyy ya no se me ocurre nada jaja pero ya hay nos hablamos luego cuidate ladie
ResponderEliminarNo entendi muy bien las ultimas 2 y Subrayar un link al pasar el mause Pon Destellos n el cursor d Tu Blog y lo de la musica lo haye dificil XD
ResponderEliminarooo ok gracias por comentar quizas mas adelante haga un video-tuto específicamente de esos temas q mencionas pero por lo pronto no creo poder subir tutos en cuanto tenga un espacio libre lo haré con musho gusto :)
ResponderEliminarBienvenidos gracias por tu visita y comentario. Recuerda suscribirte para recibir actualizaciones en tu correo de lo nuevo de este blog y de las demás redes sociales de Tutos Lady Pink.
Welcome thanks for your visit and comment. Subscribe if you want to receive updates from this blog. Remember to visit the other social networking pink lady.
欢迎感谢您的访问和评论。
订阅如果您想收到这个博客的更新。
下次访问其他社会网络夫人粉色。