juanito169

Usuario (España)

Primer post: 16 nov 2010Último post: 31 may 2012

Posts

330

Puntos totales

Comentarios

¡No vuelvo a tu taller! Graciosas modificaciones

HumorporAnónimo11/16/2010

-edit- Post reparado. Disculpen las molestias. No volveré a usar photobucket Seguro que si llevas tu coche al taller no esperas que acabe así Puede tardar en cargar, porque ¡Son 100 imágenes! ¡Paciencia! vale la pena Las imágenes están subidas por mi desde mi pc, pero como podéis ver por las marcas de agua, esta es la fuente

¡Momentos Kodak! ¡100 imágenes!

HumorporAnónimo11/18/2010

Para celebrar mi reciente subida a NFU, aquí tenéis 100 imágenes nuevas, pero esta vez de momentos kodak. Esto es lo que pasa cuando sacas una foto y el resultado no es el esperado. ¡Es mejor! Tuve que retrasar el post por culpa de photobucket, que al igual que en mi anterior post, me obligó a reconstruirlo por completo, pero ¡ya está listo! Puede tardar en cargar, porque ¡Son 100 imágenes! ¡Paciencia! Vale la pena Las imágenes están subidas por mi desde mi pc, pero como podéis ver por las marcas de agua, esta es la fuente

Personaliza tu Tumblr. Tutorial 2: Secciones

Apuntes Y MonografiasporAnónimo4/3/2012

Hola! Segundo post de ayuda para modificar vuestro Tumblr. En este trataré de explicar como hacer secciones (menú, webs amigas, etc) Nota: Voy a explicar todo tomando como referencia el theme redux (que es el que uso). Si alguien usa otro theme, lógicamente la estructura no será igual, pero puede servirle de base. Empecemos. Lo primero es conocer un poco la estructura del menú lateral. En mi caso concreto (repito, theme Redux) es el siguiente: <div id="sidebar"> <div id="top"> CONTENIDO </div> </div> <div id="sidebar"> Es todo el contenido que hay en el lateral. Para explicarlo de un modo sencillo, es un armario y contiene los cajones (secciones). <div id="top"> Se usa para dividir cada una de las secciones (por defecto viene todo junto en una misma sección). De un modo sencillo, es cada uno de los cajones del armario. Teniendo esto claro, pongámoslo en práctica. ¿Cómo haría para separar mi foto de perfil y descripción del resto? Inicialmente nuestra página sería así: El código original sería: <div id="sidebar"> <div id="top"> <div id="avatar"><a href="/"><img src="{PortraitURL-128}" /></a></div> <div id="description">{Description}</div> …. etc. (entiéndase como etc el resto del código) Añadiríamos lo que está en negrita: <div id="sidebar"> <div id="top"> <div id="avatar"><a href="/"><img src="{PortraitURL-128}" /></a></div> <div id="description">{Description}</div> </div> <br /> <div id="top"> <br /> …. etc. Y el resultado sería: Nota: los <br /> son saltos de línea, para evitar que las secciones estén pegadas. Ahora un breve inciso para explicar los tags (etiquetas). ¿Qué son y para que se usan?: Es una forma que tiene Tumblr (como muchas otras páginas) para organizar los post que publicas y facilitar su posterior búsqueda. Por ejemplo, si publicas un post con un gif de una sandía los tags podrían ser fruta, sandía, gif. De esta forma, si alguien busca en tu página fruta podrá ver sandía en la lista. ¿Cómo se usan? Cuando creas o reblogueas un post, a la derecha hay un recuadro que pone etiquetas. Ahí es donde debes escribirlas. Esta explicación de los tags es porque tumblr tiene una forma de buscar los tags de una página, con la siguiente estructura: TUPAGINA/tagged/LOQUEBUSCAS Un ejemplo: http://delasazores.com/tagged/ayuda Y esto sirve también para hacer un menú para tu página. Supongamos que queremos un menú (botonera) con gifs, memes, humor y animalicos. Lo primero será conocer que tags usamos en nuestra página. En este ejemplo, supongamos que uso los tags gifs, memes, humor, animalicos. Entonces, la ruta de búsqueda quedaría así para cado uno de los casos: TUPAGINA/tagged/gifs Ejemplo: http://delasazores.com/tagged/gifs TUPAGINA/tagged/memes Ejemplo: http://delasazores.com/tagged/memes TUPAGINA/tagged/humor Ejemplo: http://delasazores.com/tagged/humor TUPAGINA/tagged/animalicos Ejemplo: http://delasazores.com/tagged/animalicos Ahora sólo nos queda poner una imagen en vez de un enlace escrito que nos lleve a nuestro tag. Es fácil: <a href="TUPAGINA/tagged/TUTAG"><img src="RUTA_DE_LA_IMAGEN"/></a> Ejemplo: <a href="http://delasazores.com/tagged/gifs"><img src="http://28.media.tumblr.com/tumblr_lstceqTj1t1r1m0jso3_250.png"/></a> NOTA: En el primer post de ayuda podéis ver como añadir botones que cambien al pasar el ratón por encima. Ahora que ya sabemos como hacer la botonera, vamos a colocarla en nuestra página. Supongamos que queremos ponerla después de la descripción. Tenemos el siguiente código: <div id="description">{Description}</div> </div> <br /> <div id="top"> <br /> ….etc. Tenemos que añadir un nuevo <div id="top"></div> para nuestro menú. La cosa quedaría así: <div id="description">{Description}</div> </div> <br /> <div id="top"> <br /> CONTENIDO DEL MENÚ <br /><br /> </div> <br /> <div id="top"> <br /> El resultado sería: Y ahora, sólo tenemos que cambiar “CONTENIDO DEL MENÚ” por los códigos de las imágenes que nos llevan a los tags. Un ejemplo: <div id="top"> <br /> <a href="http://delasazores.com/tagged/gifs"><img src="http://28.media.tumblr.com/tumblr_lstceqTj1t1r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/memes"><img src="http://26.media.tumblr.com/tumblr_ltac3iNZDa1r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/humor"><img src="http://25.media.tumblr.com/tumblr_lstbzqzI631r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/animalicos"><img src="http://30.media.tumblr.com/tumblr_lstbzqzI631r1m0jso2_250.png"/></a> <br /><br /> </div> En nuestra página se vería así: Por último, vamos a crear una sección para webs amigas, debajo de nuestro menú. Ahora mismo tenemos este código: <div id="top"> <br /> <a href="http://delasazores.com/tagged/gifs"><img src="http://28.media.tumblr.com/tumblr_lstceqTj1t1r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/memes"><img src="http://26.media.tumblr.com/tumblr_ltac3iNZDa1r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/humor"><img src="http://25.media.tumblr.com/tumblr_lstbzqzI631r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/animalicos"><img src="http://30.media.tumblr.com/tumblr_lstbzqzI631r1m0jso2_250.png"/></a> <br /><br /> </div> <div id="pages" class="ask_and_submit"> …. etc. Tenemos que añadir una nueva sección, tal que así: <div id="top"> <br /> <a href="http://delasazores.com/tagged/gifs"><img src="http://28.media.tumblr.com/tumblr_lstceqTj1t1r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/memes"><img src="http://26.media.tumblr.com/tumblr_ltac3iNZDa1r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/humor"><img src="http://25.media.tumblr.com/tumblr_lstbzqzI631r1m0jso3_250.png"/></a> <a href="http://delasazores.com/tagged/animalicos"><img src="http://30.media.tumblr.com/tumblr_lstbzqzI631r1m0jso2_250.png"/></a> <br /><br /> </div> <br /> <div id="top"> <br /> WEBS AMIGAS <br /><br /> </div> <br /> <div id="top"> <br /> <div id="pages" class="ask_and_submit"> El resultado sería: Ahora sólo nos falta cambiar “WEBS AMIGAS” por el código con la imagen que nos llevará a esas webs. El código sería: <a href="URL_DE_WEB_AMIGA"><img src="URL_BANNER_WEB_AMIGA"/></a> Un ejemplo: <a href="http://delasazores.com/"><img src="http://24.media.tumblr.com/tumblr_ltf5i4IHk21r1m0jso1_250.jpg"/></a> El resultado sería: Con esto ya tenéis unas nociones básicas para crear todas las secciones que queráis. En el siguiente tutorial trataré de explicar como redondear las secciones y ponerles un borde de color. También hablaré un poco de los botones de redes sociales.

Personaliza tu Tumblr. Tutorial 10: Menú Superior

Apuntes Y MonografiasporAnónimo4/4/2012

Décimo post de ayuda. En este tutorial veremos cómo añadir un menú en la parte superior de nuestra página. Nuestro menú constará de 2 partes. La primera (que llamaré cabecera1) irá dedicada a publicidad, banner o similares y la segunda (cabecera2) contendrá una lista horizontal de enlaces. Como queremos que el menú se sitúe arriba de todo, tendremos que poner el código justo debajo de la etiqueta <body>. Usaremos lo siguiente: <div class="cabecera1"> CONTENIDO DE LA CABECERA 1 </div> <div class="cabecera2"> CONTENIDO DE LA CABECERA 2 </div> Como ejemplo, en la cabecera 1 pondremos una imagen de 800x100: <div class="cabecera1"> <a href="/"><img src="http://lorempixel.com/output/technics-q-c-800-100-6.jpg" /></a> </div> Y en la cabecera 2 un listado de URLs: <div class="cabecera2"> <a href="URL">URL 1</a> | <a href="URL">URL 2</a> | <a href="URL">URL 3</a> | <a href="URL">URL 4</a> | <a href="URL">URL 5</a> | <a href="URL">URL 6</a> | <a href="URL">URL 7</a> | <a href="URL">URL 8</a> | <a href="URL">URL 9</a> | <a href="URL">URL 10</a> | <a href="URL">URL 11</a> | <a href="URL">URL 12</a> </div> Esto es lo que tenemos por ahora: Ahora que tenemos el contenido, vamos a modificar un poco su diseño, para ello, nos vamos al CSS (antes de la etiqueta </style>) y pegamos lo siguiente (iré explicanco cada línea con un comentario): .cabecera1 { background: #000; /* define el color de fondo */ height: 100px; /* define la altura de la cabera 1 */ color: #fff; /* define el color del texto que no es enlace */ text-align: center; /* centra el contenido */ font-size: 13px; /* define el tamaño de la fuente */ padding: 5px; /* añade márgenes, para que el contenido no esté tan pegado a los lados */ } .cabecera1 a { color: #fff; /* define el color de los enlaces */ } .cabecera2 { height: 20px; /* define la altura de la cabera 2 */ background: #333; /* define el color de fondo */ color: #fff; /* define el color del texto que no es enlace */ text-align: center; /* centra el contenido */ font-size: 13px; /* define el tamaño de la fuente */ padding: 2px; /* añade márgenes, para que el contenido no esté tan pegado a los lados */ } .cabecera2 a { color: #fff; /* define el color de los enlaces */ } El resultado sería: Ahora ya sólo os queda cambiar el contenido por lo que queráis mostrar y personalizar el diseño a vuestro gusto. Nota: La idea del menú superior es de finofilipino. He creado este tutorial desde 0 (nada de copy/paste), previa autorización de Fino, ya que la idea era suya, porque me lo han pedido por privado.

Personaliza tu Tumblr. Tutorial 3: Redes Sociales

Apuntes Y MonografiasporAnónimo4/4/2012

Tercer post de ayuda. Ya hemos visto en el segundo post de ayuda como crear secciones. En este veremos cómo añadir botones de redes sociales a una sección. Recordemos, la estructura será la siguiente: <div id="top"> <br /> REDES SOCIALES <br /><br /> </div> En esta sección vamos a añadir un botón de Facebook, Google+ y Twitter. Lo primero, es añadir este código (necesario para el botón de Google+) antes de la etiqueta </head>:  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'es'}</script> Lo siguiente, es cambiar “REDES SOCIALES” por el siguiente código:  <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <p><div class="fb-like-box" data-href="PAGINA_DE_TU_FACEBOOK" data-width="220" data-show-faces="false" data-stream="false" data-header="true"></div></p>   <p><div align="center"><g:plusone size="tall"></g:plusone>  <p><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=TWITTER_DE_TU_PAGINA&show_count=true&lang=es" style="width:220px; height:20px;"></iframe></p> Nota: El nombre del Twitter se escribe sin el @ El resultado sería: Podemos también añadir el botón de Taringa! si añadimos lo siguiente:  <script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script> <t:sharer data-layout="big_new"></t:sharer></div></p> Ahora que tenemos la sección de compartir, veremos como poner botones para compartir un post en las redes sociales. Si miramos debajo de cada post, podemos ver dos rectángulos grises. Uno con fecha de publicación del post y otro con etiquetas y fuente. Cada uno de estos rectángulos comienza con <div id=”footer”> y termina con un </div> cerrándolo. Entre estas 2 etiquetas irá el contenido que queremos mostrar en ese rectángulo. Teniendo esto claro, vamos a añadir un nuevo rectángulo, que usaremos para poner los botones de redes sociales. Buscamos el siguiente código: {block:Link} <div class="link"><a href="{URL}" {Target}>{Name} »</a></div> {block:Description}<div class="copy">{Description}</div>{/block:Description} {/block:Link} {block:Date} <a href="{Permalink}"> <div class="footer for_permalink"> Nuestro rectángulo será el primero a mostrar, por eso vamos a situarlo entre {/block:Link} y {blockate}: {block:Link} <div class="link"><a href="{URL}" {Target}>{Name} »</a></div> {block:Description}<div class="copy">{Description}</div>{/block:Description} {/block:Link} <div class="footer"> RECTÁNGULO CON BOTONES DE REDES SOCIALES </div> {block:Date} <a href=”{Permalink}”> <div class=”footer for_permalink”> El resultado sería: Primero, hay que añadir este código (necasario para el botón de Twitter) antes de la etiqueta </head>:  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> Ahora tenemos que cambiar “RECTÁNGULO CON BOTONES DE REDES SOCIALES” por el siguiente código: <div class="footer">  <a href="{ReblogUrl}?redirect_to=http%3A%2F%2FURL_DE_TU_WEB_SIN_HTTP"><img src="http://assets.tumblr.com/images/iframe_reblog_alpha_es_ES.png?647"/></a>  <iframe src="//www.facebook.com/plugins/like.php?href={Permalink}&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=trebuchet+ms&height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>  <a href="http://twitter.com/share?original_referer=TUPAGINA/&source=tweetbutton&text=TWITTER_DE_TU_PAGINA&url={Permalink}" class="twitter-share-button" data-count="horizontal" data-via="TWITTER_DE_TU_PAGINA" data-lang="es">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>  <a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-via="TWITTER_DE_TU_PAGINA" data-lang="es">Twittear</a>  <a target="_blank" href="http://www.tuenti.com/share?url={Permalink}"><img alt="Tuenti" src="http://30.media.tumblr.com/tumblr_lwndg15Eoa1r1m0jso1_100.png"/></a>  <a target="_blank" href="http://meneame.net/submit.php?url={Permalink}"><img src="http://29.media.tumblr.com/tumblr_lt13ajpr9s1r1m0jso1_r2_100.png" alt="Menéame"></a>  <g:plusone size="medium" href="{Permalink}"></g:plusone> </div> Nota: Hay que hacer cambios en el botón de rebloguear: URL_DE_TU_WEB_SIN_HTTP es la URL de tu Tumblr, sin incluir el HTTP (ejemplo: delasazores.com), para que redireccione a nuestra web y no al Dashboard una vez reblogueado el contenido. También hay que hacer cambios en el de Twitter: TUPAGINA es la URL de tu Tumblr (ejemplo: http://delasazores.com/). TWITTER_DE_TU_PAGINA es el nombre de tu Twitter. Como antes, se escribe sin el @. El resultado sería: Podemos también añadir el botón de Taringa! si añadimos lo siguiente:  <script type="text/javascript">(function(){var x=document.createElement('script'), s=document.getElementsByTagName('script')[0];x.async=true;x.src='http://widgets.itaringa.net/share.js';s.parentNode.insertBefore(x,s)})()</script> <t:sharer data-url="{Permalink}&" data-layout="small"></t:sharer> Ahora vamos a añadir un nuevo rectángulo, que nos mostrará la URL de nuestro post para poder copiarla. Es tan sencillo como añadir este código del rectángulo de redes sociales: <div class="footer">  Enlace: <input class="enlace" type="text" value="{Permalink}" onclick="this.select()" style="width: 430px;"> </div> Nota: Con width: 430px indicamos el ancho que tendrá el input. Podéis poner el ancho que considéis correcto. El resultado sería: En el siguiente tutorial explicaré como cambiar los 2 últimos rectángulos para que el primero nos muestre Fecha y hora de publicación del post a la izquierda y número de notas y comentarios del disqus a la derecha y el segundo rectángulo nos mostrará Tags a la izquierda y Vía y Fuente a la derecha.

Personaliza tu Tumblr. Tutorial 11: Secciones Ocultas

Apuntes Y MonografiasporAnónimo4/16/2012

Undécimo post de ayuda. En este tutorial veremos cómo hacer para mostrar una sección oculta y al pulsar en la cabecera la muestre. En el noveno tutorial ya vimos como crear una cabecera. Ahora lo que queremos hacer es que muestre una sección oculta y al pulsar en la cabecera la muestre. Ahora mismo lo que tenemos es esto: <div id="titulo">NOMBRE CABECERA</div> <div id="top"> CONTENIDO SECCIÓN </div> Tenemos que cambiarlo por esto: <div id="seccion" style="cursor: pointer;"> <div onClick="document.getElementById('seccion_oculta').style.display='block'">VER SECCION</div> <div onClick="document.getElementById('seccion_oculta').style.display='none'">OCULTAR SECCION</div> </div> <div id="seccion_oculta" style="display:none"> <div id="top"> CONTENIDO SECCIÓN </div> </div> Básicamente, al pulsar en VER SECCION, muestra el contenido de la sección y al pulsar en OCULTAR SECCION lo oculta: Vamos a complicarlo un poco más. No queremos que nos muestre siempre los textos ver y ocultar. Queremos que cuando este oculto nos muestre sólo Ver y cuando este visible nos muestre sólo ocultar: <div id="seccion" style="cursor: pointer;"> <div id="btn_mostrar" style="display:block;" onClick="document.getElementById('btn_ocultar').style.display='block'; document.getElementById('seccion_oculta').style.display='block'; document.getElementById('btn_mostrar').style.display='none'">PULSA AQUÍ PARA <br>MOSTRAR LA SECCIÓN</div> <div id="btn_ocultar" style="display:none;" onClick="document.getElementById('btn_ocultar').style.display ='none'; document.getElementById('seccion_oculta').style.display ='none'; document.getElementById('btn_mostrar').style.display='block'">PULSA AQUÍ PARA <br>OCULTAR LA SECCIÓN</div> </div> <div id="seccion_oculta" style="display:none"> <div id="top"> CONTENIDO SECCIÓN </div> </div> Al pulsar en MOSTRAR LA SECCIÓN, muestra el texto OCULTAR LA SECCIÓN y el contenido de la sección. Además, el botón Ver desaparece. Al pulsar en OCULTAR LA SECCIÓN, muestra el texto MOSTRAR LA SECCIÓN y el contenido de la sección y el texto OCULTAR LA SECCIÓN desaparecen.

Personaliza tu Tumblr. Tutorial 1: Botones

Apuntes Y MonografiasporAnónimo4/3/2012

Hola! Esta vez quiero compartir con la comunidad una serie de tutoriales que hice en mi Tumblr (Cafetería de las Azores), que os permitirán modificar la apariencia de vuestro Tumblr. Nota: Los tutoriales los cree en Tumblr. Los iré modificando para Taringa!, pero como es lógico, serán muy parecidos a como los tengo allí. Como primer post, algo sencillo: cómo crear un botón que cambie al pasar la imagen por encima. <a href="URL_DESTINO"><img src="IMAGEN_1" onmouseover="this.src='IMAGEN_2';" onmouseout="this.src='IMAGEN_1';"/></a> URL_DESTINO: La página que se abrirá al pulsar el botón. IMAGEN_1: La imagen del botón que se muestra cuando NO se pasa el ratón por encima. IMAGEN_2: La imagen del botón que se muestra cuando se pasa el ratón por encima. Nota: Este botón se colocará en la parte del código donde se quiera mostrar el botón (por ejemplo: sección menú) Ir a ejemplo Botón simple en Cafetería de las Azores Ahora veamos cómo sería el código si quisiéramos situar el botón en un lateral de la página: <a href="URL_DESTINO"><img src="IMAGEN_1" onmouseover="this.src='IMAGEN_2';" onmouseout="this.src='IMAGEN_1';" style=position:fixed;top:40%;left:0;/></a> position: fixed: Indicas que la posición del botón se hará tomando como referencia el tamaño de la pantalla del usuario que está viendo la página. top: 40%: Si la altura de tu pantalla es el 100%, sitúas el botón en el 40%, contando desde arriba hacia abajo. left: 0: Situado a 0px de la izquierda de la pantalla. Nota: Los botones laterales se pueden colocar en cualquier parte, entre las etiquetas <body> y </body>. Es recomendable situarlos antes de </body> para que sean fáciles de localizar. Ir a ejemplo Boton a la izquierda en Cafetería de las Azores También podemos usar bottom y right: bottom: Es como top, pero empiezas a contar desde abajo. right: Es como left, pero empiezas a contar desde la derecha Ir a ejemplo Botones a la derecha en Cafetería de las Azores Nota: Como podéis ver en estos ejemplos, el posicionamiento podéis hacerlo contando píxeles (px) o en % para las 4 posiciones posibles. Por último, vamos a ver como crear un botón Subir. Antes de la etiqueta </style> tenéis que añadir 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> tenéis que añadir 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> tenéis que añadir el siguiente código:  <a href="#" id="scrollToTop"><img src="URL_IMAGEN" title="Ir arriba" /></a> Nota: Es muy importante que no olvidéis poner id="scrollToTop" ya que sino el botón no funcionará correctamente ni se situará donde debe. Si queréis que la imagen cambie al pasar el ratón por encima, podéis usar lo explicado en el primer paso (botón simple). Y si quieres que en vez de arriba a la derecha, el botón se ubique en otra posición, mira la explicación de botones a la izquierda y derecha. Un ejemplo combinando el botón ir arriba, con una imagen que cambie al pasar el botón por encima y situado abajo a la izquierda: /* CSS Botón Ir arriba */ #scrollToTop:link, #scrollToTop:visited { display: none; position: fixed; bottom: 20px; left: 20px; }  <a href="#" id="scrollToTop"><img src="IMAGEN_1" onmouseover="this.src='IMAGEN_2';" onmouseout="this.src='IMAGEN_1';" title="Ir Arriba" /></a>

102

Personaliza tu Tumblr. Tutorial 9: Comentarios y Cabecera

Apuntes Y MonografiasporAnónimo4/4/2012

Noveno post de ayuda. En este tutorial veremos cómo añadir los comentarios a nuestro Tumblr usando el Disqus, cómo poner una sección de comentarios recientes del mismo y cómo añadir un título a nuestras secciones. Vamos a http://disq.us/ y pulsamos en Sign In. En la ventana de rellenamos lo que nos pide. Por ejemplo: Rellenamos también el usuario y contraseña de Disqus y pulsamos en siguiente. En esta ventana seleccionamos a gusto de cada uno. En mi caso lo he dejado así: Pulsamos en siguiente y en la nueva ventana (install) seleccionamos Tumblr. Tal y como nos indican las instrucciones, tenemos que ir a Tumblr y seleccionar Customize Theme. Bajamos hasta donde pone Disqus shortname y escribimos el nombre que pusimos en la primera ventana del registro. En mi caso pruebasdelasazores: Guardamos y listo. Ya tenemos los comentarios activados en nuestro Tumblr. Ahora, debajo de cada post, se nos muestra un link indicando el número de comentarios y reacciones que tiene cada post: Podemos cambiar el texto que se muestra. Para ello, tenemos que ir a la web del Disqus ( http://disq.us/ ) e ir a Settings -> Appearance y bajar hasta Comment Count Link. Ahí ponemos los textos como queremos: El resultado sería: Puede darse el caso de que en vez de salirnos el texto personalizado nos muestre siempre “Ver comentarios”. La solución sencilla es buscar: [color=#000000]<a href="{Permalink}#disqus_thread">{lang:View comments}</a>[/color] Y añadir un class=”dsq-comment-count”: [color=#000000]<a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:View comments}</a>[/color] Si después de esto sigue mostrándonos “Ver comentarios”, tenemos que ir a la web del Disqus ( http://disq.us/ ) y en la pestaña Moderate pulsamos Install. Seleccionamos Tumblr y bajamos hasta Manual instructions (advanced). Copiamos el código del punto 2 (Copy and paste the following embed code into the HTML.) y lo pegamos antes de </body>. Ya debería mostrar correctamente nuestros textos personalizados. Ahora vamos a ver como añadir los comentarios recientes a nuestra página. Volvemos a http://disq.us y, dentro de la pestaña Admin, pulsamos en Tools. Dejamos seleccionado combination y cambiamos las opciones a gusto de cada uno. En mi caso no cambiaré nada: Por último, copiamos el código de abajo y lo pegamos en nuestra página. El resultado sería: Ahora vamos a ver como añadir una cabecera a nuestras secciones. Lo que vamos a hacer es poner un div encima de cada sección, que tendrá un fondo negro y letra blanca. Ahora mismo lo que tenemos es: [color=#000000]<div id="top"> CONTENIDO </div>[/color] Y lo que tendremos será: [color=#000000]<div id="titulo">NOMBRE CABECERA</div> <div id="top"> CONTENIDO </div>[/color] Quedaría así: Ahora tenemos que cambiar el CSS para poner la cabecera como queremos. Añadimos lo siguiente en el CSS: [color=#000000]#wrapper #sidebar #titulo { text-align:center; background: #000; padding-top: 5px; padding-bottom: 10px; color: #fff; font-size: 20px; border-radius: 10px 10px 0px 0px; box-shadow: 0 0 5px 5px rgba(0,177,223,1); border-width: 4px 4px 0 4px; border-style: solid; border-color: #000; }[/color] Este código añade un fondo negro a nuestra cabecera, y poner el texto a 20px centrado y de color blanco. También redondea los bordes superiores y les añade colores: Ahora lo que vamos a hacer es corregir el CSS de top para que no tenga los bordes superiores y quede mejor el contacto entre ambos divs. Ahora mis tenemos: [color=#000000]#wrapper #sidebar #top { border-radius: 10px 10px 10px 10px; border: 4px solid #000; box-shadow: 0 0 5px 5px rgba(0,177,223,1); background: #fff; padding: 0 20px; }[/color] Y tiene que quedar así: [color=#000000]#wrapper #sidebar #top { border-radius: 0px 0px 10px 10px; border: 4px solid #000; box-shadow: 0 0 5px 5px rgba(0,177,223,1); background: #fff; padding: 0 20px; }[/color] El resultado final sería: Ahora ya sólo nos queda añadir <div id="titulo">NOMBRE CABECERA</div> antes de cada <div id="top"> que queremos que tenga cabecera.

Personaliza tu Tumblr. Tutorial 4: Información de reblogueo

Apuntes Y MonografiasporAnónimo4/4/2012

Cuarto post de ayuda. Ya hemos visto como crear un rectángulo que salga debajo de los post. En este tutorial veremos como cambiar los 2 últimos rectángulos para que muestren mejor la información. Ahora mismo el código que tenemos es así (lo explico brevemente, bloque a bloque y podéis copiar y pegar si queréis, ya que los comentarios están entre , que es la forma de HTML de indicar que son comentarios, valga la redundancia): {block:Date} <a href="{Permalink}"> <div class="footer for_permalink">  <div class="date"> {block:Reblog} {lang:Reblogged TimeAgo from ReblogParentName} {block:RebloggedFromReblog}(<span style="text-transform:lowercase;">{lang:Originally from ReblogRootName}</span>){/block:RebloggedFromReblog} {/block:Reblog}  {block:NotReblog} {lang:Posted TimeAgo from source} {/block:NotReblog} </div>  <div class="notes">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount} {block:IfDisqusShortname}{block:NoteCount}•{/block:NoteCount} <a href="{Permalink}#disqus_thread">{lang:View comments}</a>{/block:IfDisqusShortname}</div>  <div class="clear"></div> </div> </a> {/block:Date}  <div class="footer {block:ContentSource}with_source_url{/block:ContentSource}" style=" display:none; {block:IfShowTags}{block:HasTags}display:block;{/block:HasTags}{/block:IfShowTags} {block:ContentSource}display:block;{/block:ContentSource} ">  {block:IfShowTags} {block:HasTags}<div class="tags">{lang:Tagged}: {block:Tags}<a href="{TagURL}">{Tag}</a><span class="tag-commas">, </span>{/block:Tags}.</div>{/block:HasTags} {/block:IfShowTags}  {block:ContentSource} <a href="{SourceURL}" class="source_url"> {lang:Source}: {block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo} {block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo} </a> {/block:ContentSource}  <div class="clear"></div> </div>  Esto se vería así: Ahora vamos a cambiar este código por el siguiente (recuerdo que podéis copiar y pegar, ya que los comentarios están entre  que es la forma de HTML de indicar que son comentarios), que también explicaré: {block:Date} <div class="footer for_permalink"> <div class="date"> {block:Reblog} <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} - {24HourWithZero}:{Minutes}</a>  {/block:Reblog} {block:NotReblog} <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} - {24HourWithZero}:{Minutes}</a>  {/block:NotReblog} </div> <div class="notes">{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:IfDisqusShortname}{block:NoteCount}•{/block:NoteCount} <a href="{Permalink}#disqus_thread">{lang:View comments}</a>{/block:IfDisqusShortname}</div>  <div class="clear"></div> </div> {/block:Date}  <div class="footer {block:ContentSource}with_source_url{/block:ContentSource}" style=" display:none; {block:IfShowTags}{block:HasTags}display:block;{/block:HasTags}{/block:IfShowTags} {block:ContentSource}display:block;{/block:ContentSource} ">  {block:IfShowTags} {block:HasTags}<div class="tags">{lang:Tagged}: {block:Tags}<a href="{TagURL}">{Tag}</a><span class="tag-commas">, </span>{/block:Tags}.</div>{/block:HasTags} {/block:IfShowTags}  {block:ContentSource} <div style="float: right;">{block:Reblog}Vía: <a href="{ReblogParentURL}">{ReblogParentName}</a> • {/block:Reblog}{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></div> {/block:ContentSource}  <div class="clear"></div> </div>  El resultado sería:

Personaliza tu Tumblr. Tutorial 6: Creador de memes

Apuntes Y MonografiasporAnónimo4/4/2012

Sexto post de ayuda. En este tutorial vamos a ver como añadir un creador de memes a nuestra página. Lo primero que debéis hacer es crear una página nueva dentro de vuestro Tumblr. Para ello, id a personalizar. Debajo de Apariencia veréis que hay una opción llamada Páginas. Púlsadlo y después dadle a Añadir una Página: URL de página: Ponle algo que defina lo que estás creando, para que te sea cómo de localizar. En mi caso usé creadordememes Título de página: El título que mostrará la página cuando entras en ella. Yo puse: ¡Crea un meme y después envíamelo! Mostrar un enlace a esta página: NO lo marques. Ya sabes como hacer un botón lateral, así que puedes hacer uno que enlace a la página (usando la URL que pusiste arriba) Ahora viene el proceso cansino. Si os fijáis en la barra de edición de la página (donde está poner en negrita y demás) hay una opción que es HTML. Púlsadla y entraréis en la edición HTML de la página: Ahora (sin cerrar la ventana del HTML) id a http://es.memegenerator.net/ y empieza lo verdaderamente cansino. Tenéis que buscar los memes que os gustan 1 por 1. Al entrar en ellos veréis que hay una opción que dice Embed a nombre_meme generator in your website or blog. Púlsadlo y rellenad lo siguiente: Size: Escoge el tamaño que quieres ponerle (yo seleccioné siempre la primera opción para no complicarme) Language: El español si no recuerdo mal daba errores, así que selecciona inglés para todos (los textos que mostrarán los memes pueden ser en español, así que no es problema). Watermark: Como su nombre indica, es la marca de agua. Ejemplo: delasazores.com Por último copiad el código generado arriba. Un ejemplo con el Forever Alone: <iframe width="200" height="257" src="http://es.memegenerator.net/Forever-Alone/embed?languageCode=en&watermark=delasazores.com" frameborder="0" /> Nota importante: después de cada código de estos, tenéis que añadir </iframe> para cerrarlo, o tendréis problemas en la edición HTML. Ahora ya “sólo” os queda repetir este proceso para los memes que queráis. Una vez añadidos todos, guardad la edición HTML y volved a la edición de página normal. Es recomendable que añadáis un par de líneas explicando lo que tienen que hacer los usuarios. En mi caso puse: Cuando crees un meme, te rediccionará a la web donde se crea. Pulsa el botón derecho del ratón encima de la imagen y dale a “copiar la ruta de la imagen” o “Guardar imagen como…” si la quieres descargar en tu ordenador. Después enviámela usando el botón ¡Envíame algo!, a la derecha de la web (El botón con “”). Para enviarme el link de la imagen pulsa encima de “Enviar un texto” y selecciona “Enviar un enlace”. Para enviarme una imagen que tengas guardada en tu pc pulsa encima de “Enviar un texto” y selecciona “Enviar una foto”. Por último, si no encuentras el meme que te gustaría crear, pídelo pulsando en el botón ¡Pregunta algo!, a la derecha de la web (El botón con “¿?”). Guardad la página y listo. Ya tenéis vuestro creador de memes. Acordaos de añadir un botón a vuestra página principal que redireccione al creador