miércoles, 25 de noviembre de 2015

Enlace para moverse por la página

Supongamos que queremos crear un enlace que nos lleve a un punto determinado de la página.

Lo primero será colocar nuestro enlace origen. Lo pondremos en donde queramos que aparezca y lo escribiremos del siguiente modo:


  • <a href="#moverse">AQUI_EL_TEXTO</a>



Por ejemplo:


  • <a href="#moverse">Ir a las categorías</a>




Como podéis ver, el contenido del enlace es el texto "Ir a las categorías", es un punto de la misma página que todavía no hemos definido. Ojo al símbolo #; es él quien especifica al navegador que el enlace apunta a una sección en particular.


En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre moverse para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma página. En este caso, la etiqueta que escribiremos será ésta:


  • <a name="moverse"></a>


Esta etiqueta la pondremos en el lugar que queramos que se dirija



Si quieres editar el texto mirate: http://codigoshtmlparatumblr.blogspot.com.es/2015/11/editar-el-texto-con-html.html




Editar el texto con HTML

El texto que queramos editar iría entre las dos etiquetas, por ejemplo:

<b>negrita</b>

<i>cursiva</i>

<big>texto grande</big>

<small>texto pequeño</small>


Elemento b 
(bold = negrita) muestra el texto en negrita.
Sus etiquetas son: <b> y </b> (ambas obligatorias)

Elemento i 
(italic = itálica) muestra el texto en cursiva.
Sus etiquetas son <i> y </i> (ambas obligatorias)

Elemento tt 
Muestra el texto con caracteres monoespaciados (máquina de escribir).
Sus etiquetas son <tt> y </tt> (ambas obligatorias)

Elemento big 
(big = grande) aumenta el tamaño del texto seleccionado.
Sus etiquetas son: <big> y </big> (ambas obligatorias)

Elemento small 
(small = pequeño) reduce el tamaño del texto seleccionado.
Sus etiquetas son: <small> y </small> (ambas obligatorias)

Elemento u 
(underlined = subrayado) Subraya el texto seleccionado.
Sus etiquetas son: <u> y </u> (ambas obligatorias)

Elemento sup 
(sup = super) Convierte el texto seleccionado en superíndice, por ejemplo: E=mc2.
Sus etiquetas son: <sup> y </sup> (ambas obligatorias)

Elemento sub 
(sub = por debajo) Convierte el texto seleccionado en subíndice, por ejemplo:texto normal, texto en subíndice.
Sus etiquetas son: <sub> y </sub> (ambas obligatorias)

Elemento strike 
(strike = roto) Convierte el texto seleccionado en tachado, por ejemplo:Texto tachado.
Sus etiquetas son <strike> y </strike> (ambas obligatorias)


Tamaño y tipo de letra

FACE

<font face="Verdana">Este texto tiene otra tipografía</font>

Este texto tiene otra tipografía

SIZE

<font size=4>Este texto es más grande</font>

Este texto es más grande


Alinear texto

Si deseásemos introducir un texto alineado a la izquierda escribiríamos:

<p align="left">Texto alineado a la izquierda</p>

Texto alineado a la izquierda

Para una justificación al centro:

<p align="center">Texto alineado al centro</p>


Texto alineado al centro
Para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p>


Texto alineado a la derecha






sábado, 31 de enero de 2015

Recuperar tu tema personalizado

Si quieres restablecer algun cambio que has realizado en tu tema de tumblr, métete a este link:



Te salen los últimos 20 cambios que has realizado. Lo malo es que no hay una vista previa para saber que estas restableciendo.

domingo, 21 de diciembre de 2014

Imagen de perfil del tumblr que reblogueaste el post


Aviso: Aparece el avatar del tumblr que reblogeaste el post pero al clickarle te redirecciona al autor original


1. Nos vamos a: https://www.tumblr.com/customize y nos metemos a "Editar HTML"

2. Pretamos ctrl+F y en la barra de búsqueda ponemos </style>

3. Encima de </style>  pegamos este código:

}
    
.post .reblog_icon { 
display: block; 
height: 85px; 
width: 123px; 
position: absolute; 
left: -115px; 
top: -10px; 
background-repeat: no-repeat; 
background-position: 13px 13px; 

}

.post .reblog_icon span{ 
display: block; 
height: 100px; 
width: 100px; 
background-repeat: no-repeat; 
background-image: url(http://static.tumblr.com/pwwhswm/pqFmpoogv/retratobrpfinal.png); 
/*Codigo editado por lostumblrykenny.tumblr.com
Tutoriales HTML: https://codigoshtmlparatumblr.blogspot.com*/

Así quedaría

4. Pretamos ctrl+F otra vez y en la barra de búsqueda ponemos <div class="post">

5. Encima de <div class="post"> ponemos este código:

{block:Reblog}<a href="{ReblogRootURL}" class="reblog_icon" style=background-image:url({ReblogParentPortraitURL-64})><span></span></a>{/block:Reblog}


Así quedaría


6. En la vista previa no se puede ver. Guardamos, vamos a nuestro tumblr y comprobamos que funcione.

¡Y YA ESTA!


Cualquier duda preguntármela aquí: http://lostumblrykenny.tumblr.com/ask


martes, 29 de octubre de 2013

Tutorial para volver al antiguo formato para crear publicaciones

1- Vas a esta pagina y le das a “Agregar a chrome
2- Te va a salir esto 
y le das a "Agregar"

3- Arriba de todo(donde poner el url, estan los marcadores, etc):
Al costado les va a salir este signo:
4-Le das a esa “mascarita”, apretas en “Internet Explorer 10" y despues en "Change"

martes, 22 de octubre de 2013

11 extensiones de Google Chrome para tu tumblr

No se puede ser usuario de Tumblr sin caer en la adicción, aunque sea de manera temporal. Si estás leyendo esto, probablemente tienes un blog en el servicio y entiendes de lo que hablo con tan solo leer la palabra Dashboard.
A pesar de que Tumblr es bastante fácil de entender y usar, existen algunas extensiones que, para maximizar nuestra experiencia como usuarios, nos permiten desde navegar rápidamente por el Dashboard haciendo uso exclusivo del teclado, hasta filtrar posts por palabras clave, muy útil para remover de nuestra vista publicaciones relacionadas con temas específicos que no son de nuestro interés.
Cada una de estas extensiones cumple una función distinta, por lo que te invito a repasar la lista completa, ya que seguramente alguna te va a interesar.

Este extension particularmente me parece muy buena, junto a la de missing e. Puedes decorar y te facilita usar el dashboard muchismo.

Tumblr Shortcuts


Tumblr Shortcuts añade 12 atajos de teclado, que junto a los tradicionales 'j' y 'k', permiten desplazarse de manera mucho más rápida y cómoda a través del Dashboard, además de permitir realizar otras tareas comunes como, por ejemplo, hacer like a un post (tecla 'l') o abrir la página de reblog (tecla 'r').
Luego de instalar la extensión veremos un nuevo icono -un pequeño teclado- en la parte superior derecha de nuestro Dashboard, mediante el cual podemos acceder a la lista de atajos. Lamentablemente las teclas no se pueden personalizar, sin embargo, las que vienen programadas por defecto son bastante prácticas y fáciles de memorizar.

Tumblr Notifier


Tumblr Notifier, a través de un simple icono de notificación, nos mantiene informados sobre la llegada denuevos posts a nuestro Dashboard sin necesidad de tener Tumblr abierto en todo momento. A decir verdad es una extensión bastante simple, pero casi tan útil como el contador de nuevos mensajes en la bandeja de entrada del correo electrónico.
Después de realizar la instalación es necesario refrescar el Dashboard (en caso de que lo tengamos abierto en ese momento) para que la extensión entre en funcionamiento. Según la cantidad de blogs que sigamos, será cuestión de unos pocos minutos para comenzar a ver el contador en la parte superior derecha de la ventana de Google Chrome.

Missing e


Missing e es mucho más que una simple extensión, ya que permite añadir múltiples funciones y características que por defecto no están presentes en Tumblr, brindándonos la posibilidad de personalizar completamente la forma en que utilizamos el servicio. Entre las características más interesante encontramos:
  • Personalización del Dashboard para mejorar su visualización
  • Edición de múltiples posts en un solo paso
  • Personalización de la barra lateral
  • Magnificador de imágenes para ver las fotos en mayor tamaño sin abandonar el Dashboard
Para instalar Missing e, basta con visitar su sitio web, hacer clic en el botón de descarga y seguir las instrucciones que aparecen en pantalla. Cabe destacar que es necesario refrescar la página de Tumblr cada vez que modificamos los parámetros de la extensión para que los cambios sean visibles. Sin duda es una de las extensiones más completas que hay para Tumblr, también está disponible para Firefox y Safari.
CUIDADO.
La red de microblogging, Tumblr, sugirió no utilizar la extensión para Google Chrome llamada Missing E, la cual tiene más de 258 mil usuarios, según The Next Web.
En un comunicado que aparece al conectar tu cuenta de Tumblr, la red de microblogging alerta que estás usando una aplicación que podría causar problemas a ti y a Tumblr.
En el mensaje se menciona que puede violar tu privacidad e incluso se pueden perder datos.
Para evitar que eso suceda, Tumblr te hace “firmar” un acuerdo donde confirmas que entiendes estos riesgos. Finalmente, hay dos botones: Entiendo y Desinstalar.

Post To Tumblr


Post To Tumblr nos da la posibilidad de publicar imágenes y enlaces desde cualquier sitio web hacia nuestro blog en Tumblr, con tan solo un par de clics.
Una vez que tengamos la extensión instalada, al hacer clic con el botón derecho del ratón sobre ciertos elementos de un sitio web (como imágenes y enlaces) veremos la opción de publicarlos directamente en Tumblr, haciendo uso de la cuenta que hayamos configurado. Sin duda alguna, la manera más fácil y rápida de agregar nuevos posts a nuestro blog.

Tumblr Savior


Tumblr Savior nos da, entre otras, la posibilidad de bloquear completamente publicaciones relacionadas con un tema en particular que no sea de nuestro interés. Cuando la extensión identifica un post asociado a una palabra que hayamos agregado a la lista negra, en su lugar nos mostrará una advertencia, junto a un enlace a la publicación para utilizarlo en caso de que no podamos resistir la tentación de ver de que se trata.
Además de los filtros de contenido, Tumblr Savior ofrece la posibilidad de ajustar las opciones de visualización de algunos otros detalles relacionados a cada publicación. En mi opinión funciona muy bien, vale la pena instalarla.

Es una sencilla extensión para Chrome que añade un botón (como es habitual, en la esquina superior derecha del interfaz, justo al lado del Omnibox) que nos da acceso (mediante una pequeña ventana que aparece tras pulsar sobre éste) al dashboard de Tumblr, es decir, tendremos un acceso directo al panel de control de nuestro blog para realizar publicaciones o recibir notificaciones con las nuevas publicaciones que vayan apareciendo en los sitios que sigamos.

Es una de esas extensiones que debemos tener presente si queremos "evitar el mundanal ruido", es decir, publicaciones que no nos hacen mucha gracia o que ya estamos cansados de ver (porque han sufrido múltiples reposts). ¿Y cómo nos puede librar del ruido esta extensión? Básicamente, Tumblr Hate nos permite bloquear publicaciones en las que aparezcan cadenas de caracteres concretas y, una vez las tengamos configuradas, cuando revisemos las publicaciones veremos que si aparece alguna coincidencia ésta estará tapada por la palabra hated.

Es una extensión orientada a hacernos algo más cómoda la visualización de los contenidos publicados en Tumblr puesto que aplica una hoja de estilos específica para corregir algunos detalles en ellayout. Otra opción con la que también podremos mejorar el aspecto estético de Tumblr, si accedemos a él desde Chrome, es mediante la extensión Nice Tumblr que, además, nos permite un cierto grado de personalización porque podremos escribir nuestro propio CSS a aplicar y ver así las publicaciones de Tumblr de una manera única y, sobre todo, personalizada.

Es otra extensión a tener en cuenta si, por ejemplo, solemos publicar en Tumblr imágenes que nos encontramos mientras navegamos por la red o enlaces a las páginas que consultamos. La extensión instala un icono justo al lado de la barra de direcciones que nos servirá, como acceso directo, para publicar en Tumblr la página web que estamos visitando o, dentro de ésta, alguna de las imágenes que aparecen publicadas. La extensión ofrece múltiples opciones de publicación (insertar objetos de otros contendedores, añadir un texto al post que vamos a publicar, etc) y, básicamente, nos evitará tener que acceder al dashboard si queremos publicar.

Notify Tumblr

Agrega un icono de notificación en tu tablero de Tumblr, que informa sobre nuevos mensajes.


domingo, 20 de octubre de 2013

Mostrar tus likes de tumblr

Si tenes una cuenta en tumblr.com habrás notado que algunos sitios te muestran no solo sus posts, y reblogueos, sino tambien las cosas que dichos usuarios "gustan"... es decir los "Likes". 

Para aquellos que aun no esten familiarizados con el servicio de tumblr.com, os explico que un usuario que tiene una cuenta, mientras "sigue" a otros usuarios, va mirando las cosas que otros postean. Con un post puede "reblogg" o "like" ... si los rebloggea es como que lo postea en su espacio para sus amigos... lo que en Twitter seria un RT. Mientras que si le coloca un "Like" ... le queda marcado en sus favoritos, en una seccion que puede ser oculta para él, o visible para todos.

En fin, vi algunos sitios de tumblr.com que mostraban en el sidebar cuales eran sus ultimos favoritos... me llamó la atención. Yo quiero tambien hacer eso, como lo hicieron?

Bueno, en este post... el codigo necesario. =)


Primero entras a tu sitio de tumblr.com.
Habrá que editar el HTML de tu theme, por lo tanto ves a http://www.tumblr.com/customize

Despues de  <style type="text/css">  pegas esto:


/*_____________________________________
ul#likes {
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
li.like_post {
/* Should match the width specified in the Likes tag */
width: 150px;
padding: 0 40px 0 0;
float: left;
}
li.like_post img {
max-width: 100%;
}
li.like_post blockquote {
margin: 0;
padding: 0 0 0 10px;
border-left: 1px solid #eee;
}
li.like_post ol,
li.like_post ul {
margin: 0 0 0 15px;
padding: 0;
}
li.like_post .like_link a {
font-weight: bold;
}
li.like_post .like_title {
font-weight: bold;
}
li.like_post .post_info_bottom {
margin: 10px 0 0 0;
display: block !important;
}
/*___________________________________________



Y dentro del sidebar (columna lateral), donde mas te guste pegas ésto:
?

<div style="clear:both;"></div>
{block:Likes}
            <div id="likes_container">
                <h2>Stuff I like</h2>
                      {Likes limit="5" summarize="100" width="150"}
            </div>
        {/block:Likes}
<!--<div class="space"></div>-->
<div style="clear:both;"></div>