sábado, 28 de julio de 2012

Crear páginas en tu tumblr

Metete a tu tumblr y dale a "personalizar" (en la esquina de arriba) y ahí puedes crearte paginas dentro de tu tumblr y poner todo lo que quieras. AQUI:


Llama a la pagina como quieras y selecciona la casilla de "Mostrar un enlace a esta pagina" para que se puedan meter desde tu tumblr.


ATENCIÓN: En estas paginas puedes poner imágenes y textos pero los visitantes de tu tumblr solo pueden ver el contenido, sin rebloguear nada.

viernes, 27 de julio de 2012

Botón de subir

Para buscar una etiqueta más rápido en tus códigos HTML preta ctrl+F y en el cuadro de búsqueda pon lo que quieras buscar.

Antes de la etiqueta </style> añade el siguiente código:
/* CSS Botón Ir arriba */
#scrollToTop:link, #scrollToTop:visited { display: none; position: fixed; top: 20px; right: 20px; }

Antes de la etiqueta </head> añade el siguiente código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>

Por último, antes de la etiqueta </body> añade el siguiente código:
<------ Botón de subir ------>
<a href="#" id="scrollToTop"><img src="URL_IMAGEN" title="TEXTO_QUE_SALDRA_AL_PASAR_EL_RATÓN" /></a>


Lo que está en rojo lo sustituyes (sin quitar las comillas) por lo que te indica.


Si LO QUIERES EN BLOGGER: http://ciudadblogger.com/2012/03/boton-ir-arriba-con-jquery-que-aparece.html



martes, 17 de julio de 2012

Botones laterales que cambian al pasar el ratón por encima

Con este código podrás poner una imagen al lateral de tu tumblr que al clickarla te redireccione a una pagina y al pasar el ratón por encima salga una segunda imagen que has elegido.


Botón a la izquierda
Código:
<a href="URL_de_la_pagina_al_clickarla"><img src="URL_IMAGEN_1" onmouseover="this.src='URL_IMAGEN_2';" onmouseout="this.src='URL_IMAGEN_1';" style="position: fixed; top: 40%; left: 0;"/></a>

Botones a la derecha
Código:
<a href="URL_de_la_pagina_al_clickarla"><img src="URL_IMAGEN_1" onmouseover="this.src='URL_IMAGEN_2';" onmouseout="this.src='URL_IMAGEN_1';" style="position: fixed; top: 32%; right: 0;"/></a>


URL_de_la_pagina_al_clickarla: La página que se abrirá al pulsar el botón.
URL_IMAGEN_1: La URL de la imagen que se muestra cuando NO se pone el ratón por encima.
URL_IMAGEN_2: La URL de la imagen que se muestra cuando se pone el ratón por encima.

Para elegir donde poner el botón solamente edita el % que esta después de position: fixed; top:



EJEMPLOS:
Creador de memes:


<a href="http://lostumblrykenny.tumblr.com/creador%20de%20memes"><img src="http://i.imgur.com/lueJ2.png" onmouseover="this.src='http://i.imgur.com/DD47I.png?1?8344';" onmouseout="this.src='http://i.imgur.com/lueJ2.png';" style="position: fixed; top: 15%; left: 0;"/></a>



Blogger:

<a href="http://codigoshtmlparatumblr.blogspot.com.es/"><img src="http://www.soloelectronica.net/AYUDA_128.png" onmouseover="this.src='http://desmond.imageshack.us/Himg215/scaled.php?server=215&filename=bloggerqz.png&res=crop';" onmouseout="this.src='http://www.soloelectronica.net/AYUDA_128.png';" style="position: fixed; top: 85%; left: 0;"/></a>


Twitter:

<a href="https://twitter.com/#!/Lostumblrykenny"><img src="http://i.imgur.com/if6vT.png?1?9494" onmouseover="this.src='http://www.mellamoadrian.com/wp-content/themes/mandigo/images/icons/twitter-sigueme.png';" onmouseout="this.src='http://i.imgur.com/if6vT.png?1?9494';" style="position: fixed; top: 30%; right: 0;"/></a>


Youtube: 

<a href="http://www.youtube.com/user/FunGamer013"><img src="http://alexisrh76.files.wordpress.com/2011/12/youtubelogo.png?w=64&h=64" onmouseover="this.src='http://www.miprimeracorde.com/images/youtube.png';" onmouseout="this.src='http://alexisrh76.files.wordpress.com/2011/12/youtubelogo.png?w=64&h=64';" style="position: fixed; top: 55%; right: 0;"/></a>

Banner


Os explico como va la barra a la derecha de tu tumblr 
(en el tema redux) :

--------------------------------------------------------------------------------------------------------------------------------------------------

Un banner (en español: banderola) es un formato publicitario en Internet. Esta forma de publicidad online consiste en incluir una pieza publicitaria dentro de una página web. Prácticamente en la totalidad de los casos, su objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.Los banners se crean con imágenes (GIFJPEG o PNG), o con animaciones creadas a partir de tecnologías como JavaAdobe Shockwave y, fundamentalmente, Flash. Están diseñados con la intención de llamar la atención, resaltar notorios y comunicar el mensaje deseado. 


Ves a "Editar HTML" y pulsa: "ctrl + F"  y pon... <div id="sidebar">  
(o buscalo manualmente)

Hay veras todos tus codigos del menú lateral
(la barra de busqueda, preguntas, envia un post) pon este codigo:

<a href="URL_del_banner"><img src="URL_de_la_imagen_del_banner" width="230" height="70" title="Nombre_del_tumblr" style="border:0"/></a>

Para editar las dimensiones del banner cambiar   
width="230" height="70"por las cifras que queráis.



Puedes crear varias imagenes con el mismo tamaño y crear un gif con esta web: http://picasion.com/


Aqui os dejo mi banner, como ejemplo de cómo quedaría:

<a href="http://lostumblrykenny.tumblr.com/"><img src="http://i.imgur.com/FaVN8.png" alt="Si te gustan los tumblr no te muevas de este" width="230" height="70" title="Los tumblr y kenny" style=border:0/></a>




sábado, 7 de julio de 2012

Aquí algunos consejillos para tumblr:


1.-Publica diariamente, y para las horas que no estes conectado deja publicaciones en la cola.

2.-Comenta, manda aportes, haz preguntas, rebloguea, etc. Para interactuar con otros usuarios.

3.-Consigue tumblrs con tus mismas visitas, ponle un banner y que el te ponga a ti, y asi poco a poco ir subiendo entre tus colegas o gente a la que publicites.

4.-Edita tu tumblr a mejor siempre que puedas, con nuevos codigos HTML y fondos.

5.-Interactua con tus seguidores. Y con quien no te sigue, gracias a tu ayuda ganaras seguidores y así visitas.

ESPERO QUE TE HAYA SIDO DE AYUDA, UN SALUDETE.

AQUÍ MÁS: http://codigoshtmlparatumblr.blogspot.com/2013/05/15-consejos-para-optimizar-tu-blog-de.html

lunes, 2 de julio de 2012

Una barra de menú:

Os explico como va la barra a la derecha de tu tumblr 
(en el tema redux) :


----------------------------------------------------------------------------------------------------------------------------------

<ul id="page-bar"><li><a href="/"><img src="URL_DE_LA_IMAGEN" width="51px" height="40px"/> Home</a></li>  <li><a href="/ask"><img src=" URL_DE_LA_IMAGEN " width="40px" height="40px"/> Pregunta</a></li>   <li><a href="/submit"><img src=" URL_DE_LA_IMAGEN " width="40px" height="40px"/>Sube tu post </a></li><li><a href="/random"><img src=" URL_DE_LA_IMAGEN " width="40px" height="40px"/>Aleatorio</a></li><li><a href="/archive"><img src="http://etechman.edublogs.org/files/2011/08/carpeta-2jaynds.png" width="50px" height="40px" /> Archivo</a></li><li><a href="http://www.tumblr.com/follow/URL_DE_TU_TUMBLR"><img src=" URL_DE_LA_IMAGEN " width="40px" height="40px"/>Sígueme</a></li>                  </ul><div class="clear"></div>                           </center>


Despues de: 

src= Tienes que poner la url de la imagen que quieres que salga, entre las comillas

width= ancho de la imagen, entre las comillas y sin quitar px

height= alto de la imagen, entre las comillas y sin quitar px

href=   Para cada botón se pone una cosa, entre las comillas:
Pagina principal --> /
Preguntas -->  /ask
Aportes --> /submit
Aleatorio --> /random
Archivos --> /archive
Sigueme -->  http://www.tumblr.com/follow/URL_DE_TU_TUMBLR

Asi quedaria:



ESTE ES SU CODIGO:
<ul id="page-bar"><li><a href="/"><img src="http://cdn1.iconfinder.com/data/icons/glaze/128x128/filesystems/folder_home.png" width="51px" height="40px"/> Home</a></li>  <li><a href="/ask"><img src="http://dnborgir.***/images/linux.png" width="40px" height="40px"/> Pregunta</a></li>   <li><a href="/submit"><img src="http://eurekall.com/wp-content/uploads/2011/03/descargas.png" width="40px" height="40px"/>Sube tu post </a></li><li><a href="/random"><img src="http://www.winbots.es/games.png" width="40px" height="40px"/>Aleatorio</a></li><li><a href="/archive"><img src="http://etechman.edublogs.org/files/2011/08/carpeta-2jaynds.png" width="50px" height="40px" /> Archivo</a></li><li><a href="http://www.tumblr.com/follow/lostumblrykenny"><img src="http://2.bp.blogspot.com/_jE-bvx9zerg/TTb91dG4h-I/AAAAAAAAAD8/Y2N4wQ7W9GQ/s1600/tumblr.png" width="40px" height="40px"/>Sígueme</a></li>                  </ul><div class="clear"></div>                           </center>

domingo, 1 de julio de 2012

Botones que cambian al pasar el ratón por encima:

Se suelen poner en los temas que tiene una columna lateral a la derecha, izquierda o en ambos lados. 
Os explico como va (en el tema redux) :

En los codigos HTML la columna lateral empieza desde la imagen de usuario hasta el ultimo contenido de la barra) Si no lo encuentras en tus códigos HTML preta 
"ctrl + F"  y pon en el recuadro de búsqueda

<div id="sidebar">


LEETE:  http://codigoshtmlparatumblr.blogspot.com.es/2012/07/barra-lateral-de-algunos-temas-de.html 
----------------------------------------------------------------------------------------------------------


Pega este codigo HTML:


<script language=”JavaScript”>
function cambiar (flag,img) {
if (document.images) {
if (document.images[img].permitirloaded) {
if (flag==1) document.images[img].src = document.images[img].permitir.src
else document.images[img].src = document.images[img].permitir.oldsrc
}
}
}
function preloadcambiar (img,adresse) {
if (document.images) {
img.onload = null;
img.permitir = new Image ();
img.permitir.oldsrc = img.src;
img.permitir.src = adresse;
img.permitirloaded = true;
}
}
</script>
<center><div id= “menu”>


<a onmouseover=”cambiar(1,’IMG1’);” onmouseout=”cambiar(0,’IMG1’);” href=”http://smile-smile-smile-forever.tumblr.com/ask“>
<img border=”0” src=”Imagen_que_saldra_para_clickarle” onload=”preloadcambiar(this,’Imagen_que_saldra_al_pasar_el_raton_por_encima’);” name=”IMG1”/></a>


Te explico como va:

Tienes que rellenar las comillas en negrita con lo que te dice, y si quieres poner mas botones (ask, submit, random, etc) solo tienes que poner la URL que quieras que te redireccione, en el primer parrafo.


Un error muy común en esto es no numerar las categorías.
TE EXPLICO. 
El código de las categorías contiene 3 veces `IMG1´. Date cuenta que al poner la 2ª categoría (o la que sea) tendrás que cambiar los tres "1" por un 2 (o el número que quieras) y siempre tienen que ser los tres números iguales en los dos párrafos.

MIRA ESTA IMAGEN:

Los tres números después de "IMG" son 7. Y en la siguiente categoría son los tres números 6.




Si quieres que al pasar el ratón por encima de la imagen no 

cambie o como crear categorías leete: 
http://codigoshtmlparatumblr.blogspot.com.es/2012/11/imagen-que-te-redireccione-una-pagina.html



Si quieres creear categorias con estos codigos leete: 

http://codigoshtmlparatumblr.blogspot.com.es/2012/11/imagen-que-te-redireccione-una-pagina.html 

Purpurina que suelta el ratón al pasarlo por tu tumblr

Presiona CTRL+F (cmd+F en MAC) para acceder a la función de “Buscar”. Esto te permitirá localizar ciertas palabras en el código.

Teclea “
text/javascript” (sin las comillas) en la barra de “Búsqueda”. Y pegalo en la linea de abajo.


Metete en esta pagina y copia y pega el codigo HTML:   http://www.mf2fm.com/rv/dhtmltinkerbell.php 


Quedara así:


Para editar el color.
Atento a:


var colour="random";      

Es el color de la purpurina, aqui os dejo un pagina con todos. Por defecto esta en aleatorio (random)

Ejemplos:


  • var colour="FF0000";    ROJO
  • var colour="09FF00";    VERDE
  • var colour="2200FF";    AZUL
Los colores RGB: http://html-color-codes.info/codigos-de-colores-hexadecimales/


MUCHOS MÁS EFECTOS: http://www.mf2fm.com/rv/

Columna lateral de algunos temas de tumblr.

Os explico como funciona la barra a la derecha
de algunos temas de tumblr (los más comunes)



En los codigos HTML empieza desde: <div id="sidebar">


Desde la imagen de usuario hasta el ultimo contenido de la barra). Si no lo encuentras en 

tus codigos HTML Pulsa: "ctrl + F"  y pon... <div id="sidebar">  

Dale a Aceptar.


Hay veras todos tus codigos (La barra de busqueda, preguntas, envia un post) pues podeis 
poner el codigo que querais apartir de aqui. Las cosas saldran en el mismo orden que 
pongas sus respectivos codigos. Y solamente saldran en los temas que tenga una barra 
latera, buscalo manualmente.
En mis codigos HTML puedes ver que al empezar la columna lateral 
Primero esta el AVATAR
Luego la DESCRIPCIÓN
Después LAS PÁGINAS DE ASK, SUBMIT,ETC
Luego la BARRA DE BÚSQUEDA...

Saldrá en el mismo orden:


El menú empieza desde este código:
<center><div id= "menu">





Y para hacer otro apartado pon un espacio con este código:



 </div>
 <br />
<div id="top">
        <br />






NOTA:
DEPENDE DEL TEMA QUE USES PUEDES PONER LOS CODIGOS DE UNA MANERA U OTRA, PERO ESTE TUTORIAL LO PUEDES TOMAR DE BASE PARA TODOS LOS TEMAS DE TUMBLR. EL QUE USO YO ES EL REDUX.


Como poner los codigos:

Paso 1: 
Entra aqui: http://www.tumblr.com/customize



Paso 2: 


Te saldra un menú clicka a "Editar HTML"



Paso 3:
Una vez alli ves poniendo los codigos html en el lugar que quieras que parezcan.

EJEMPLO: 
Este es el mio (uso el tema "Redux"), donde pongo mis codigos HTML


Si quieres poner los codigos en la barra lateral (de algunos temas) leete: http://codigoshtmlparatumblr.blogspot.com.es/2012/07/barra-lateral-de-algunos-temas-de.html


Bienvenido a Tumblr


Bienvenido a mi post de CODIGOS PARA TUMBLR


Para los que no sepan que es tumblr:



Tumblr es una plataforma de microblogging que permite a sus usuarios publicar textos, imágenes, vídeos, enlaces, citas y audio a manera de tumblelog. Fue fundada por David Karp en el año2007.

Los usuarios pueden «seguir» (follow) a otros usuarios registrados y ver las entradas de éstos conjuntamente con las suyas, por lo cual Tumblr puede ser considerado una herramienta social. El servicio enfatiza la facilidad de uso y personalización.A mediados de 2011, Tumblr superó en cantidad de blogs a su competidora WordPress. Así también el mismo año, Tumblr lanza por un periodo de dos meses la versión BETA de "Tumblr en Español", en donde a diversos usuarios hispanohablantes les envió una invitación. Dos meses después, Tumblr oficializa la versión en Español, enviando un mensaje a todos sus usuarios hispanoparlantes que migraran a esta nueva versión.



Primero create una cuenta: