tag:blogger.com,1999:blog-64985967490762408962024-03-19T14:53:34.037-07:00Herramientas para Webmasters de BloggerPedro Pablo Pachón ColmenaresPedro Pablo Pachónhttp://www.blogger.com/profile/18152344678215981633noreply@blogger.comBlogger180125tag:blogger.com,1999:blog-6498596749076240896.post-73214860389300260262020-12-03T02:30:00.002-08:002020-12-03T02:30:28.902-08:00Menús para Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td><div style="text-align:justify;">Presentamos algunos menús para poner en blogs de Blogger. Debajo de cada imagen está el enlace para ir al tutorial correspondiente.</div><br />
<br />
<h7>Menú horizontal con CSS3, envolvente</h7><br />
<br />
<div style="text-align:justify;">Este menú se presenta a la vista como si estuviera envolviendo el blog. Queda bien en blogs que tienen bien definido el borde del Outer Wrapper (envoltura principal del blog). </div><br />
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 85px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU8Qh7yimgJSK-3TQusGRTKeaIlcDUUF3kM0EI7cGxgYrS8f6Xm5B6YXTU4fQr7z2jtwsmVNuFNyayDkap_lbRpXIKxuil7s5YpyS6NlBGumR-5sjbknM_s38EXIrrJsu7rTmgonQ-HdqS/s1600/Menu_envolvente.png" border="0" alt="Menú horizontal envolvente" title="Menú horizontal envolvente"/><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2012/06/menu-horizontal-con-css3-envolvente.html" title="Menú horizontal con CSS3, envolvente"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú horizontal Estilo Apple Fancy Efecto Slide</h7><br />
<br />
<div style="text-align:justify;">Menú horizontal con efecto card-shuffle, el cual hace que cuando se ingresa a la página que lo contiene los iconos se deslicen hacia adentro; luego, cuando se pasa el cursor por cada uno de los elementos, los íconos se deslizan desde la parte superior hacia afuera.</div><br />
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 595px; height: 78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32VGJjnl_qTunu8OfWukgLc8TCceyHcchCnr8Q4wtMmUIqxbcXjtC7Iy6owthRsUyCX82LQeZ-66Ch-FLPpax57rAbsqWaCZd15ZqzXkyuWK9ORaVLcHEneHDcLfrzUKJPpe8mCYomdc/s1600/menu_slide.png" border="0" alt="Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery" title="Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery"/><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2011/01/menu-apple-fancy-slide-css-jquery.html" title="Menú horizontal Estilo Apple Fancy Efecto Slide"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú horizontal desplegable con CSS y Jquery, efecto deslizante</h7><br />
<br />
<div style="text-align:justify;">En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo.</div><br />
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 496px; height: 193px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00YA3HKynQSJc6nlseLzJV4Jlko9x7rqllUXxFz-jzN42Uv6e9z-RE-5fpgIaWN6Wj3_tnUaonfgrVvIM6kfSV3TSzZFsNm5CVYydXApFChZkIOOosCK-l1rFIdYBKqpIBVI_eI5sPQ/s1600/menu_despl_horiz.png" border="0" alt="Menú horizontal desplegable con CSS y Jquery, efecto deslizante" title="Menú horizontal desplegable con CSS y Jquery, efecto deslizante" /><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2011/01/menu-horizontal-desplegable-css-jquery.html" title="Menú horizontal desplegable con CSS y Jquery"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú vertical con CSS y jquery, efecto acordeón</h7><br />
<br />
<div style="text-align:justify;">Cada elemento del menú despliega submenús con un efecto acordeón.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ziGw1-271ZM_Kwfg0DYJqsDt-AJtMz2P2gHa8cEap4_ZMznThyh-lpl8sBkzQk6tSvaT5PJst9QORqKM-2u_uV19OP1VkLXiIdPeae7-gZT1SPfIjQ7bUTn3vjOqFL99yazTgn40-BxZ/s1600/Efecto_acorde%C3%B3n.png" alt="Menú vertical con CSS y jquery, efecto acordeón" title="Menú vertical con CSS y jquery, efecto acordeón"/></a></div><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2012/06/menu-vertical-con-css-y-jquery-efecto.html" title="Menú vertical con CSS y jquery, efecto acordeón"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú horizontal desplegable con Ajax</h7><br />
<br />
<div style="text-align:justify;">Éste es un menú de múltiples niveles. </div><br />
<img style="display:block; margin:0px auto 0px; text-align:center;cursor:pointer; cursor:hand;width: 600px; height: 145px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqwh5AMoyFIWGIbiMrTC9afKaoAc_nqi-LIEX20BHWsyWDIiQ2k2nWdWqHDWKKGMD1_PnFabnD9CJHBHkuFcxxS8hmv7qNZc94wOHQp7CLIYcovF03jSM5S0VRy9i3BIqAUULqq9WPPiE/s1600/Menu_ajax.png" border="0" alt="Menú horizontal desplegable, con Ajax" title="Menú horizontal desplegable, con Ajax"/><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2012/06/menu-horizontal-desplegable-con-ajax.html" title="Menú horizontal desplegable con Ajax"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú horizontal dinámico, con submenús</h7><br />
<br />
<div style="text-align:justify;">Este menú es una barra navegable cuyos elementos cambian de color al poner el cursor sobre los mismos.</div><br />
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 422px; height: 107px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUzFVEawPAmHkWhzkyPWJljfkv0SVat2OE42W_05iO-F4bvLHpUHy7vPkomKfCIyC_czx-uRQ88tZM5SSWZPgRLdOcH5p-DFP-Hb0FIcRIKin88ucRUHvaIhobislpBBV6X6W6qa0wLs/s1600/menu_horiz_dinamico.png" border="0" alt="Menú horizontal dinámico, con submenús" title="Menú horizontal dinámico, con submenús"/><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2011/01/menu-horizontal-dinamico-submenus.html" title="Menú horizontal dinámico, con submenús"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú vertical desplegable</h7><br />
<br />
<div style="text-align:justify;">Este menú desplegable tiene la ventaja que, conteniendo un buen número de enlaces, ocupa poco espacio.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVlUX8gTP5zWz6Hs7Hn6JqX5eOwijaf9gDI8ALrDhy9SaFWbKq_HWzfe-gcv34UTVwUEoDrWZN71y1Zrg_DCHmBT4_LzVHNYCx5yKyerd1i15esgwVL53gpveuD7e3IB1jY_uT9tsLyhsq/s1600/Vertical_desplegable.png" alt="Menú vertical desplegable" title="Menú vertical desplegable"/></a></div><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2010/09/menu-desplegable-para-blogger.html" title="Menú vertical desplegable"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú lateral con CSS y Jquery</h7><br />
<br />
<img alt="Menú de Navegación Lateral con jQuery y CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8LGCd8N_Q795yiv97cvXuDvPkehByAYylKgB6ei50CYliFPYX7tr6grVDqS0HqUyP1tdSoQobIBjENzcvSJFSsKm6S1bRDNoYNU3svOZK4PTWBuXo_1r5PwbWs5bOvpVV-iuzmp46EIE/s1600/Menu_lateral_3.png" style="cursor: pointer; float: left; height: 458px; margin: 0pt 10px 10px 0pt; width: 95px;" title="Menú de Navegación Lateral con Efecto Slide jQuery y CSS" border="0" /><div align="justify">Este menú en diapositiva tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos.</div><br />
<a href="http://bloguermast.blogspot.com/2011/02/menu-lateral-con-css-y-jquery-para.html" title="Menú lateral con CSS y Jquery"><b><em>Ir al tutorial</em></b></a><br />
<p> </p><p> </p><p> </p><br />
<br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/I7Pqmq" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/I7Pqmq" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-80974102481152824332020-12-03T02:28:00.002-08:002020-12-03T02:28:33.090-08:00Convertir blog en web<br />
<table border="0" cellpadding="5px" style="width: 630px;"><tbody>
<tr> <td><div style="text-align: justify;">Convertir un blog en web, o darle apariencia de web, lo podemos lograr adecuando, en la página principal, una portada tipo magazine. <br />
<br />
La portada estará formada por dos columnas de rectángulos, cada uno de los cuales corresponderá a una entrada, y en ellos pondremos:<br />
<ol><li>Un resumen del contenido del post correspondiente.<br />
</li>
<li>Una imagen.<br />
</li>
<li>Tanto el resumen como la imagen los pondremos dentro de etiquetas <span style="color: #fe4a4a;"><a href="#"></span>, con la URL de la entrada correspondiente, para que sirvan de enlaces a la misma.<br />
</li>
<li>Todo lo anterior lo pondremos dentro de un bloque <span style="color: #fe4a4a;"><div></span> al que le asignaremos la clase <span style="color: #fe4a4a;">resumenOculto</span> para aislarlo, de manera que no se vea en el texto de la entrada, sino únicamente en la portada o página principal.<br />
</li>
</ol>El bloque descrito anteriormente lo ponemos en el editor de HTML, al comienzo de las entradas que van a aparecer en la portada, así: </div><p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code> <div class="resumenOculto"><br />
<span style="color: #fe4a4a;">Código de la imagen</span><a href="<span style="color: #fe4a4a;">URL de la entrada</span>" title="<span style="color: #fe4a4a;">Título de la entrada</span>"><span style="color: #fe4a4a;">Resumen de la entrada</span></a><br />
</div></code></td> </tr>
</tbody></table><br />
<div style="text-align: justify;">...poniendo en las partes resaltadas lo indicado en las mismas. El atributo <code>title</code> hace que, al poner el cursor sobre el resumen, aparezca el título de la entrada. <br />
<p> </p><b><big>La imagen</big></b> <br />
<ul><li>La imagen que ponemos en cada rectángulo la subimos marcando en el diseño las opciones, en "Alineación de la imagen": "Ninguna", y en "Tamaño de la imagen": "Tamaño original". </li>
</ul></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JGH7UvtAfyOEXEMRApoqqOxjic8qCRpjSOsGtzqdtqyKnoz_uc62SXfqXfzGYw_vK1EhyphenhypheneXEXQGfschufThniGV0oI4i5y9-ZQn5WuwFl0Fm5bRHdLA__8LlpxoalO8s-ImN1w9eef1V/s1600/Dise%C3%B1o_imagen_subida.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JGH7UvtAfyOEXEMRApoqqOxjic8qCRpjSOsGtzqdtqyKnoz_uc62SXfqXfzGYw_vK1EhyphenhypheneXEXQGfschufThniGV0oI4i5y9-ZQn5WuwFl0Fm5bRHdLA__8LlpxoalO8s-ImN1w9eef1V/s1600/Dise%C3%B1o_imagen_subida.png"></a></div><ul><li>El tamaño se adaptará al indicado en el código que veremos más adelante (punto 4).<br />
</li>
<li>El <span style="color: #fe4a4a;">código de la imagen</span> por defecto, subida con el diseño indicado, es como éste:<br />
</li>
</ul><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><a href="<span style="color: #fe4a4a;">#</span>" imageanchor="1"> <img border="0" src="<span style="color: #fe4a4a;">#</span>" <span style="color: #f4fa58;">alt="Título de la entrada" title="Título de la entrada"</span>/></a></code></td> </tr>
</tbody></table><div style="text-align: justify;"><ul><ul><li>El resaltado en <span style="color: #f4fa58;"><code>amarillo</code></span> lo agregamos.</li>
<li>En los sitios en donde están los signos numeral (<span style="color: #fe4a4a;">#</span>) Blogger pone por defecto la URL de la imagen, en el primero (con el atributo <em>a href</em>) como enlace, y en el segundo (con el atributo <em>src</em>) como identificador del archivo de la imagen. Reemplazamos la primera URL con la correspondiente a la entrada para que la imagen sirva de enlace a la entrada y no a la misma imagen.<br />
</li>
<li>Los atributos <code>alt</code> y <code>title</code> hacen que al poner el cursor sobre la imagen aparezca el título de la entrada. En las imágenes se utiliza, para este efecto, el atributo <code>alt</code>, pero ponemos también el atributo <code>title</code> ya que algunos navegadores no interpretan el primero.<br />
</li>
</ul></ul><p> <p/><b><big>Rectángulos que se verán e la portada</big></b> <br />
<p>Los rectángulos que se verán en la portada serán los correspondientes a las últimas entradas creadas, y cuyo número será aquél que le asignemos en <b><em>Configuración</em></b>. Para esto vamos a:</div><p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><div style="text-align: center;">Página principal ► Diseño ► Configuración ► Entadas y comentarios ► Mostrar un máximo de <b>X</b> entradas en la página principal </div></td> </tr>
</tbody></table><p><div style="text-align: justify;">...y ponemos allí el número correspondiente. Este número deberá ser par, para que ambas columnas nos queden con igual número de rectángulos:</div><p><div class="separator" style="clear: both; text-align: center;"><a href="#" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Número de entradas a mostrar" border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLECiaUVcAS8YUdeY6U4DoYtAcwj5ZgSKzk_L6oZ5MO3Kdy-wIFWeW5Tr3bc4xjVb6kcXwPikUsY4t6vbp0mfsETARo2HNcMX96gF0AHGmGoVqWZlDjjjxj7gkAkRQQR7xhST87557KaVA/s1600/Mostrar_entradas_1.png" title="Número de entradas a mostrar" width="500"></a></div><p>Guardamos configuración. <br />
<p><div style="text-align: justify;">Obviamente el bloque <span style="color: #fe4a4a;"><div></span>, indicado al comienzo del tutorial, tendremos que ponerlo en el editor de HTML al comienzo de cada entrada de las que van a aparecer en la portada. <br />
<p> </p><b><big>Códigos que pondrán en funcionamiento la portada</big></b> <br />
<p>Una vez hayamos puesto el bloque <span style="color: #fe4a4a;"><div></span> en todas las entradas que aparecerán el la portada, ponemos en la plantilla los códigos que pondrán a funcionar la portada:</div><p>1.- Vamos a <b><em>Editar HTML</em></b>: <br />
<p><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td> <td> Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png"></a><br />
</td> </tr>
</table><p>2.- Localizamos, en las plantillas nuevas, un código como éste, poniendo dentro del rectángulo de búsqueda (search) una línea del mismo: <br />
<p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><b:if cond='data:blog.metaDescription == ""'><br />
<!-- Then use the post body as the schema.org description,<br />
for good G+/FB snippeting. --><br />
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div><br />
<b:else/><br />
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div><br />
</b:if></code></td> </tr>
</tbody></table><p><ul>Y en plantillas antiguas un código como éste: </ul><p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><div class='post-body entry-content'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div></code></td> </tr>
</tbody></table><p><ul>...o como éste: </ul><p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div></code></td> </tr>
</tbody></table><p>3.- En cualquier caso, el código que encontremos de los anteriores, lo eliminamos y lo reemplazamos con el siguiente:<br />
<p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><b:if cond='data:blog.pageType == "item"'><br />
  <div class='post-body entry-content'><br />
    <data:post.body/><br />
    <div style='clear: both;'/><br />
  </div><br />
<b:else/><br />
  <div class='post-body entry-content'><br />
    <div expr:id='"original-" + data:post.id' style='display:none;'><br />
      <data:post.body/><br />
    </div><br />
    <div style='clear: both;'/><br />
  </div><br />
  <!-- ejecutar función JavaScript --><br />
  <script type='text/javascript'><br />
    // enviará el ID generado por Blogger (data:post.id)<br />
    ejecutarResumen('<data:post.id/>');<br />
  </script><br />
</b:if></code><br />
</td> </tr>
</tbody></table><p><ul><li>Con este código conseguiremos:<br />
<ul><li>Aislar el resumen para que no aparezca sino en la página principal o portada.<br />
<li>Que el contenido original del post no sea visible en la página principal o portada.<br />
<li>Que cada post, en particular, no sufra ningún cambio.<br />
</ul></ul>4.- Antes de la etiqueta <font color="#fe4a4a"><code></head></code></font> pegamos el siguiente código:<br />
<p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><b:if cond='data:blog.pageType != "item"'><br />
  <style><br />
<font color="#fe4a4a">/*propiedades de los posts (resúmenes) en la portada*/</font><br />
    .post {<br />
      background-color: #E2EFFD;<font color="#ffec15">/*color del fondo*/</font><br />
      float: left;<br />
      width: 310px;<font color="#ffec15">/*ancho: mitad del cuerpo de las entradas*/</font><br />
      height: 190px;<font color="#ffec15">/*el alto es fijo*/</font><br />
      margin-right: 15px;<br />
      margin-top: 0px;<br />
      margin-bottom: 10px;<br />
      overflow: hidden;<br />
      padding-left: 5px;<br />
      padding-top: 5px;<br />
    }<br />
<font color="#fe4a4a">/*propiedades de las imágenes en la portada*/</font><br />
    .post img {<br />
      float: left;<br />
      margin: 0 5px 0 0;<br />
      width: 100px;<font color="#ffec15">/*ancho*/</font><br />
      height: 100px;<font color="#ffec15">/*alto*/</font><br />
    }<br />
  </style><br />
<b:else/><br />
  <style><br />
    .resumenOculto {display:none;}<br />
  </style><br />
</b:if></code></td> </tr>
</tbody></table><div style="text-align:justify;"><ul><li>El <font color="#ffec15"><code>/*color del fondo*/</code></font> es editable, ponemos el nuestro.<br />
<li>El <font color="#ffec15"><code>/*ancho: mitad del cuerpo de las entradas*/</code></font>, es editable, pero, por estética, se recomienda que no sea menor de 300px, para lo cual es recomendable que el blog tenga un ancho no menor de 950px. Si es necesario deberíamos ensanchar el blog; el tutorial al respecto está <a href="http://bloguermast.blogspot.com/2010/02/cambiar-ancho-blog-blogger.html" title="Ensanchar blog" target="_blank"><b>aquí</b></a>.<br />
<li>El <font color="#ffec15"><code>/*ancho*/</code></font> y el <font color="#ffec15"><code>/*alto*/</code></font> de las imágenes son editables, pero se recomiendan los indicados en el código (100px). Debemos procurar que las imágenes sean lo más cuadradas posible, para que, al adaptarse a estas dimensiones, no se distorsionen. <br />
</ul></div><p>5.- A continuación del anterior código pegamos el siguiente: <p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><script type='text/javascript'><br />
//<![CDATA[<br />
<br />
// llega con el ID del post<br />
function ejecutarResumen(idPOST) {<br />
  var namePOST = "original-" + idPOST; // el DIV del post normal<br />
  var divPOST = document.getElementById(namePOST);<br />
  // buscamos los DIVS<br />
  var lista = divPOST.getElementsByTagName("div");<br />
  if(lista.length>0){<br />
    // buscamos un DIV con la clase resumenOculto<br />
    for(var i=0; i<lista.length; ++i) {<br />
        if(lista[i].className=="resumenOculto") {<br />
          // cambiamos el contenido del post por el de ese DIV<br />
          divPOST.innerHTML = lista[i].innerHTML;<br />
          // lo mostramos<br />
          divPOST.style.display = "block";<br />
          return;<br />
        }<br />
      }<br />
    }<br />
}<br />
//]]><br />
</script></code><br />
</td> </tr>
</tbody></table><p><div style="text-align:justify;">Antes de guardar plantilla debemos utilizar la <b><em>Vista previa</em></b> para verificar que la portada nos haya quedado correcta. Lo más probable es que nó. Se pueden presentar los siguientes casos: <ul><li>Que los rectángulos tuvieran un ancho superior al de la mitad del cuerpo de las entradas. En este caso todos los rectángulos quedarán en una sola columna, a la izquierda, y los enlaces pie de post se deaplazarán hacia arriba, a la derecha.<br />
<li>Que los rectángulos tuvieran un ancho inferior al de la mitad del cuerpo de las entradas. En este caso los rectángulos quedarán en las dos columnas, pero sobrará un espacio a la derecha, y los enlaces pie de post se desplazarán hacia arriba en el mismo.<br />
</ul>Dependiendo del caso, aumentamos o disminuímos, en la línea correspondiente a <font color="#ffec15"><code>/*ancho: mitad del cuerpo de las entradas*/</code></font> del código del punto cuatro, el número de pixeles, y vamos observando con la <b><em>Vista previa</em></b> hasta lograr que las dos columnas de rectángulos casen perfectamente. <p>5.- Guardamos plantilla. <p>6.- Eliminamos las fechas de las entradas, ya que éstas afectan la simetría de los rectángulos en la portada. En <a href="http://bloguermast.blogspot.com/2009/12/eliminar-fechas-blogger.html" title="Eliminar las fechas de las entradas" target="_blank">este tutorial</a> se explica cómo eliminar las fechas.</div><p><b><big>Nota</big></b>: Esta portada no se adapta muy bien a las plantillas Fantástico S.A. Aewsome, Picture Window y Filigrana.</p></td> </tr>
</tbody></table><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1cDILZT" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1bOLC6L" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-90299978492713568272020-11-28T08:02:00.003-08:002020-11-28T08:02:37.300-08:00Código de la cabecera Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> <div style="text-align:justify;">Vamos a analizar el código de la cabecera en blogs de Blogger. Es conveniente conocerlo para el caso en que queramos hacer alguna modificación a la cabecera, sepamos qué partes del mismo debemos alterar.</div><br />
<h7>Plantillas nuevas</h7><br />
<br />
Tomaremos como referencia la plantilla Simple.<br />
<br />
Cabecera por defecto:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4h80r5sjdAVN6IuPdS3gnsW5rZ_JnLVveemoLoPsXberiRuzVLqF9BKCRcOnFPNQjZPGfZj6O21AuoVpuPFZ5WpQOTG8ZcrewS4WLRFm9lLmMEOMgJ6pKn7OL1PtOqRyFO-osweeziIRy/s1600/Cabecera_simple_1.png" /></div><div style="text-align: center;"><small>(El título y la descripción están, por defecto, alineados a la izquierda; los hemos puesto en el centro para una mejor presentación del tutorial)</small></div><br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><br />
...y localizamos el siguiente código, correspondiente a la cebecera, poniendo <code>.header-outer</code> dentro del rectángulo de búsqueda (Search):<br />
<br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>/* Header<br />
----------------------------------------------- */<br />
<font color="#fe4a4a">.header-outer {<br />
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;<br />
_background-image: none;<br />
}</font><br />
<br />
<font color="#f2fe2f">.Header h1 {<br />
font: $(header.font);<br />
color: $(header.text.color);<br />
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);<br />
}</font><br />
<br />
<font color="#40ff00">.Header h1 a {<br />
color: $(header.text.color);<br />
}</font><br />
<br />
<font color="#b181ff">.Header .description {<br />
font-size: $(description.text.size);<br />
color: $(description.text.color);<br />
}</font><br />
<br />
<font color="#ffc0d0">.header-inner .Header .titlewrapper {<br />
padding: 22px $(header.padding);<br />
}</font><br />
<br />
<font color="#d0d0ff">.header-inner .Header .descriptionwrapper {<br />
padding: 0 $(header.padding);<br />
}</font></code><br />
</td> </tr>
</table><br />
<div style="text-align: justify;">Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación.<br />
<br />
<font color="#fe4a4a"><b>Primer bloque</b></font><br />
<br />
Este bloque corresponde a la envoltura de la cabecera; cualquier modificación que hagamos en este bloque de código afectará al fondo de la cabecera, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><aimageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghJnoEVNGxJOa1XwbifFt6tzzRkkdGY4M6oXI-Q-MvUobt0DeRIIj6MTeN9sByOZ7kjgLUQmpjDiO-o0yVUeCSyUqJP1iTEAeNP-dsGsqrgXCl6HxAhjn1miRXP3nWhfhVKa-SQ8UcnE-B/s1600/Cabecera_simple.png" /></div><br />
<font color="#f2fe2f"><b>Segundo bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde al fondo del título del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAgHVbOoNFAqTN4tJbLyfuzC1xAtvb-0jxfxmZOkJQ1HjZ8Sc5IOhy59HQM09_UU7QTaNSfgkPK3729I4svbE5WPDpVJt5IwubThzIQAITqkUNbaQ0wEz2AqUu8HjJAHVz6eDDWzHJDnH/s1600/Cabecera_simple_2.png" /></div><br />
<font color="#40ff00"><b>Tercer bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde a los caracteres del título del blog visto en cada entrada en particular; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a las letras del título del blog visto en cada entrada en particular, por ejemplo si les cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84-ziVG7jP4N06897L2mCMN29fVMHbFyuTpqq_ehl4gqPXqLRbuoPzU-32Dmx8NeHfmNS2iz2nYZ11el5eL7VwHYLQbvXPdHS6Cd4jjo3iY3-7jEuhTvX7e6tW28lXIUGFdZ7ytvRBxjF/s1600/Cabecera_simple_3.png" /></div><br />
<font color="#b181ff"><b>Cuarto bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde a los caracteres de la descripción del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a las letras de la descripción del blog, por ejemplo si les cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPKPz8iYRh_-6jpXttnUy5vVt-WUcUQdZNr7SVScM_6CFK8rUw40_2BOEx8WA9UoNJW9oim5MtnHAa6H1jpMxAMs1vUiY6JyccSjDIcuo6dkDfqp5uB8w_h35ZmQi1YLH72m0XslGp0ej/s1600/Cabecera_simple_4.png" /></div><br />
<font color="#ffc0d0"><b>Quinto bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde a la sección de la cabecera o espacio que ocupa la cabecera dentro de la envoltura de la misma; cualquier modificación que hagamos en este bloque de código afectará al fondo de la cabecera, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZegTMoTzoQn9nlBY1b9iFbZ8YaIHSYocDh1VyZefy1EZ2OztpC_dGAOqEEM3PhMjj5skkhruQqhGE3R1pxD5LYDGRJMai8JdkXV7rTZ-gNp-aY-BfzsskvbNz1GET2ZkWBKuygFlCaTvi/s1600/Cabecera_simple_5.png" /></div><br />
<div style="text-align: justify;">Es conveniente anotar que esta sección de la cabecera está encima de la envoltuta (primer bloque); es por eso que el color de fondo que se verá será el de la sección de la cabecera. Debemos tener cuidado al hacer cambios en las dimensiones de la envoltura y de la sección, procurando que queden iguales ya que, si por ejemplo, la envoltura es más larga que la sección, o viceversa, se nos va a presentar alguna desconfiguración en la ubicación del título y la descripción. Para asegurarnos de que esto no ocurra les ponemos, a las dos, colores diferentes, y dejamos más larga la envoltura que la sección; notaremos la diferencia en el contraste de los colores, entonces modificamos la dimensión de la envoltura hasta igualarla con la sección y después les ponemos el mismo color.</div><br />
<font color="#d0d0ff"><b>Sexto bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde al fondo de la descrición del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCXLXCUEistnMSQTKxmeTmLpGhSz_RmnTdpCVTCjJTP2aBPL_0EGcs9S7_trwVR57NYCS2UVnXKRJfQY-RqXr0Z5PDYH2JScISTjValweMGDM0l7UCj326DY3TZBuzZlGA_-1YXviMxA2/s1600/Cabecera_simple_6.png" /></div><br />
<br />
<h7>Plantillas Antiguas</h7><br />
<br />
Tomaremos como referencia la plantilla Mínima.<br />
<br />
Cabecera por defecto:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkabbrTGnJn2UNdKEIJSwOJGx5ujRLlZiJbF2yiyZxgeQQFXh-mQbQ-1q2BdJTejE4xemjC7G6N_XF-vX2Y9SNf_1_pRRxZX5jcytwRp0jhayci28cu1HQqOD7rulDCzOjHuwvPKc7GEZs/s1600/Cabecera_m%C3%ADnima.png" /></div><br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><br />
...y localizamos el siguiente código, correspondiente a la cebecera, poniendo <code>#header-wrapper</code> dentro del rectángulo de búsqueda (Search):<br />
<br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>/* Header<br />
-----------------------------------------------<br />
*/<br />
<font color="#fe4a4a"><br />
#header-wrapper {<br />
width:660px;<br />
margin:0 auto 10px;<br />
border:1px solid $bordercolor;<br />
}</font><br />
<font color="#f2fe2f"><br />
#header-inner {<br />
background-position: center;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}</font><br />
<font color="#40ff00"><br />
#header { <br />
margin: 5px;<br />
border: 1px solid $bordercolor;<br />
text-align: center;<br />
color:$pagetitlecolor;<br />
}</font><br />
<font color="#b181ff"><br />
#header h1 {<br />
margin:5px 5px 0;<br />
padding:15px 20px .25em;<br />
line-height:1.2em;<br />
text-transform:uppercase;<br />
letter-spacing:.2em;<br />
font: $pagetitlefont;<br />
}</font><br />
<font color="#ffc0d0"><br />
#header a {<br />
color:$pagetitlecolor;<br />
text-decoration:none;<br />
}</font><br />
<font color="#d0d0ff"><br />
#header a:hover {<br />
color:$pagetitlecolor;<br />
}</font><br />
<font color="#c1ffdd"><br />
#header .description {<br />
margin:0 5px 5px;<br />
padding:0 20px 15px;<br />
max-width:700px;<br />
text-transform:uppercase;<br />
letter-spacing:.2em;<br />
line-height: 1.4em;<br />
font: $descriptionfont;<br />
color: $descriptioncolor;<br />
}</font><br />
<font color="#eeeeb9"><br />
#header img {<br />
margin-$startSide: auto;<br />
margin-$endSide: auto;<br />
}</font></code></td> </tr>
</table><br />
<div style="text-align: justify;">Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación.<br />
<br />
<font color="#fe4a4a"><b>Primer bloque</b></font><br />
<br />
Este bloque corresponde al fondo externo de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhakRQt1NaDfiVuG9ymtekcyjE-0AyBp5kYbZguUS98KdFlhM_GowPZxKA56NBquMwugmkvzhELlA1LYVKukbjyNImwbfa-MwZaJEb9CzxsU4-G5q-rwk4yYRDpf8RIrLFO3d28g3H6QbO0/s1600/Cabecera_m%C3%ADnima_1.png" /></div><br />
<div style="text-align: justify;"><font color="#f2fe2f"><b>Segundo bloque</b></font><br />
<br />
Este bloque corresponde al fondo interno de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl6AXfS98bK_-iCBhBM8-8KE2nCxPXa0nv8hj2I1zVQiY-lCRcemSJ2H6c4fmrhfNPVyE4qXB1fNLkJKYzMy9_DpkUkaPKv4OBvdjoALo-nPKmN4BNrGTP-60uyur-5029wul1OL4Vo1Zw/s1600/Cabecera_m%C3%ADnima_2.png" /></div><br />
<div style="text-align: justify;"><font color="#40ff00"><b>Tercer bloque</b></font><br />
<br />
Este bloque corresponde al fondo intermedio de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitOxLDVu2O2sRczL9h9H6cGg4iOjGcoJ0xsDJtj-NyacplaC1EdKbcfiqbfxa2LxiLy8YWoJausew2WruhSBnnLTbe0cxS1Ox6_rxyOdWLW8mpn9sAZasbKpncSjnzY-s3tZRTUIIHm8P4/s1600/Cabecera_m%C3%ADnima_3.png" /></div><br />
<div style="text-align: justify;">Los anteriores tres fondos están superpuestos, así:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic1_9bBbUY5qd8ToBuBrdNEAkNjDLgp3Tg628aqSIvmoXoba-21RC03ha7T_7daURQnupsTUY4nYaLCj3tqgM6PetAL1-WPQ08IgY-N85iiTKWuPuMiRnQqgYXEIn607NUz1mVmYzEPhYL/s1600/Cabecera_m%C3%ADnima_4.png" /></div><br />
<div style="text-align: justify;">...por consiguiente cualquier modificación que hagamos en las magnitudes (alto o ancho) de la cabecera, la debemos hacer en los tres fondos, guardando las proporciones para conservar la congruencia. <br />
<br />
<font color="#b181ff"><b>Cuarto bloque</b></font> <br />
<br />
Este bloque corresponde a los caracteres del título del blog. Por consiguiente para cualquier modificación al texto en el título del blog (color, tamaño de fuente, familia de fuente, etc.) debemos hacerla en este bloque.<br />
<br />
<font color="#ffc0d0"><b>Quinto bloque</b></font> <br />
<br />
Este bloque corresponde a los caracteres del título del blog visto en cada entrada en particular.<br />
<br />
<font color="#d0d0ff"><b>Sexto bloque</b></font> <br />
<br />
Este bloque corresponde a los caracteres del título del blog cuando ponemos el cursor encima y visto en cada entrada en particular.<br />
<br />
<font color="#c1ffdd"><b>Séptimo bloque</b></font> <br />
<br />
Este bloque no desempeña ninguna función.<br />
</div></td> </tr>
</table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-72171296112077961952020-11-28T08:00:00.003-08:002020-11-28T08:00:53.732-08:00Numerar los comentarios en blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> Para numerar los comentarios:<br />
<p>1. vamos a:</p><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><p>2. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><div expr:id='data:widget.instanceId + "_comments-block-wrapper"'><br />
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'><br />
        <font color="#ff6060"><script type='text/javascript'>var CommentsCounter=0;</script></font><br />
          <b:loop values='data:post.comments' var='comment'><br />
            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'><br />
              <b:if cond='data:comment.favicon'><br />
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br />
              </b:if></code><br />
</td> </tr>
</table><p>3. Dentro del anterior código agregamos la <font color="#ff6060">línea resaltada</font>.</p><p>4. Un poco más abajo del anterior código localizamos el siguiente:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><b:if cond='data:comment.authorUrl'><br />
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br />
              <b:else/><br />
                <data:comment.author/><br />
              </b:if></code><br />
</td> </tr>
</table><p>5. A continuación pegamos éste:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><span class='numberingcomments' style='float: right; font-size: <font color="#ff6060">16px</font>; color:<font color="#ff6060">#ffffff</font>'><br />
<a rel='nofollow' style='text-decoration:none' title='Comment Link'><font color="#ff6060">#</font><br />
<script type='text/javascript'><br />
CommentsCounter=CommentsCounter+1;<br />
document.write(CommentsCounter);<br />
</script><br />
</a><br />
</span></code><br />
</td> </tr>
</table><ul>Las partes <font color="#ff6060">resaltadas</font> (tamaño de los caracteres, color y numeral), pueden ser cambiadas.</ul><p>6. Guardar plantilla.</p><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1f7S759" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1f7S759" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-33857004194802765682020-11-28T07:59:00.001-08:002020-11-28T07:59:11.033-08:00Justificar textos en entradas y comentarios Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> <h7>Justificar los textos de las entradas</h7><br />
<br />
Los textos de las entradas los podemos justificar de tres maneras:<br />
<ol><li>Manualmente</li>
<li>En plantilla de entradas</li>
<li>En Edición de HTML</li>
</ol><br />
<h8>Justificación manual</h8><br />
<br />
<div style="text-align:justify;">Creamos la entrada en el editor HTML poniendo el texto de la misma entre las siguientes etiquetas:<br />
</div><br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code> <div style="text-align: justify;"><br />
Aquí el texto de la entrada<br />
</div></code> </td> </tr>
</table><br />
<h8>Justificación en plantilla de entradas</h8><br />
<br />
Vamos a:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Configuración</td> <td> ► </td> <td>Entradas y comentarios </td> <td> ► </td> <td> Plantilla de las entradas </td> <td> ► </td><td>Añadir</td> </td> </tr>
</table><br />
Hacemos click en <b><em>Añadir</em></b> y, en la caja de texto que se despliega, pegamos las siguientes etiquetas:<br />
<br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code> <div style="text-align: justify;"><br />
</div></code> </td> </tr>
</table><br />
<div style="text-align:justify;">Cada vez que vayamos a crear una entrada, en el editor HTML aparecerán estas etiquetas entre las cuales ponemos el texto de la misma.<br />
</div><br />
<br />
<h8>Justificación en Edición de HTML</h8><br />
<br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png"><br />
</td> </tr>
</table><br />
<div style="text-align:justify;">Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:<br />
</div><br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>.post-body {<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
<font color="#ff6a6a">text-align: justify;</font><br />
}</code></td> </tr>
</table><br />
...y agregamos, al final, la línea resaltada.<br />
<br />
Todas las entradas se justificarán automáticamente.<br />
<br />
<br />
<h7>Justificación de los textos de los comentarios</h7><br />
<br />
<div style="text-align:justify;">En las plantillas antiguas los textos de los comentarios no se justifican por defecto; podemos lograrlo así:<br />
</div><br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png"><br />
</td> </tr>
</table><br />
<div style="text-align:justify;">Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:<br />
</div><br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>.comment-body {<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
<font color="#ff6a6a">text-align: justify;</font></code><br />
}</td> </tr>
</table><br />
...y agregamos, al final, la línea resaltada.<br />
<br />
<br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1f7S759" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/PFSeLi" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-50238905159418132522020-11-28T07:49:00.002-08:002020-11-28T07:52:57.665-08:00Añadir URL de entrada en textos copiados (copy and paste)<table border="0" width="100%" cellpadding="5px"><tr> <td> <br />
<div style="text-align: justify;">Todos hemos visto, al copiar y pegar texto de algunos sitios web, que en la parte inferior de lo copiado aparece información que hace referencia a la URL de la fuente, en algunos casos acompañada con un aviso de copyright. Es algo así como: «Leer más aquí: www.sitio.com», y en la parte inferior el aviso de copyright.<br />
<br />
Este método lo podemos implementar en nuestro blog para que cuando alguien copie el texto de una entrada, o parte del mismo, aparezca insertada, en la parte inferior del texto copiado, información de la entrada, como la URL y el nombre del blog con el aviso de copyright (derechos de autor). <br />
<br />
Utilizamos la librería jQuery de JavaScript para que el código sea interpretado más fácilmente por todos los navegadores</div><br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="100%" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><br />
<div style="text-align: justify;">Localizamos la siguiente etiqueta poniéndola dentro del rectángulo de búsqueda (search):<br />
<br />
</div><table border="1" width="10%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <strong><code></body></code></strong> </td> </tr>
</table><br />
Inmediatamente antes de la anterior etiqueta pegamos el siguiente código:<br />
<br />
<table border="1" width="100%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><font color="#ff2ee1"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></font><br />
<script><br />
//<![CDATA[<br />
$("body").bind('copy', function (e) {<br />
if (typeof window.getSelection == "undefined") return;<br />
var miblog = document.getElementsByTagName('body')[0];<br />
var seleccionar = window.getSelection();<br />
<font color="#fe4a4a">if (("" + seleccionar).length < 50) return;</font><br />
var nuevodiv = document.createElement('div');<br />
nuevodiv.style.position = 'absolute';<br />
nuevodiv.style.left = '-99999px';<br />
miblog.appendChild(nuevodiv);<br />
nuevodiv.appendChild(seleccionar.getRangeAt(0).cloneContents());<br />
if (seleccionar.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {<br />
nuevodiv.innerHTML = "<pre>" + nuevodiv.innerHTML + "</pre>";<br />
}<br />
nuevodiv.innerHTML += "<br/><br/><font color="#40ff00">Leer más aquí</font>: <a href='"<br />
+ document.location.href + "'>"<br />
+ document.location.href + "</a><font color="f7fe2e"><br/>&copy; Nombre del blog</font>";<br />
seleccionar.selectAllChildren(nuevodiv);<br />
window.setTimeout(function () { miblog.removeChild(nuevodiv); }, 200);<br />
});<br />
//]]><br />
</script></code><br />
</td> </tr>
</table><ul><div style="text-align: justify;">
<li>La <font color="#ff2ee1">primera línea del código</font> corresponde a la librería jQuery; si ya tenemos una en nuestra plantilla, la omitimos.</li>
<li>La línea con <font color="#fe4a4a">este resaltado</font> pone un mínimo de caracteres copiados para que la información aparezca. En este caso hemos puesto un límite de cincuenta caracteres, es decir, para que la información aparezca la copia debe tener cincuenta caracteres o más, en caso contrario no aparecerá; esta cifra la podemos cambiar. Si no queremos poner un límite, sino que la información aparezca al copiar cualquier número de caracteres, eliminamos <font color="#fe4a4a">esa línea</font>.</li>
<li>El texto <font color="#40ff00">Leer más aquí</font> podemmos cambiarlo.</li>
<li>En el texto resaltado con <font color="f7fe2e">este color</font> cambiamos <font color="f7fe2e">Nombre del blog</font> por el correspondiente a nuestro blog. Si no queremos mostrar copyrright con el nombre del blog eliminamos lo resaltado con <font color="f7fe2e">amarillo</font>.</li>
</div></ul><br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1C2tbFH" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1C2tbFH" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-4414496550280208612020-11-28T07:35:00.007-08:002020-11-28T07:41:08.377-08:00Poner borde a imágenes de una entrada en Blogger<table border="0" width="100%" cellpadding="5px"><tr> <td> <p align="justify">Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos: </p><br />
<h7>Imagen a la izquierda</h7><br />
<br />
<table border="1" width="100%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><div class="separator" style="clear: both; text-align: center;"><img src="<font color="#ff4a4a">URL</font>" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #<font color="#ff4a4a">COLOR</font>"/></div></code></td> </tr>
</table><br />
<br />
<h7>Imagen a la derecha</h7><br />
<br />
<table border="1" width="100%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><div class="separator" style="clear: both; text-align: center;"><img src="<font color="#ff4a4a">URL</font>" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #<font color="#ff4a4a">COLOR</font>"/></div></code></td> </tr>
</table><br />
<br />
<h7>Imagen en el centro</h7><br />
<br />
<table border="1" width="100%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><div class="separator" style="clear: both; text-align: center;"><img src="<font color="#ff4a4a">URL</font>" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #<font color="#ff4a4a">COLOR</font>"/></div></code></td> </tr>
</table><br />
<ul><li>En <font color="#ff4a4a"><code>URL</code></font> ponemos la URL de la imagen correspondiente.</li>
<li>En <font color="#ff4a4a"><code>COLOR</code></font> ponemos el número correspondiente al código del color que se asigne al borde.</li>
</ul><br />
<b>Códigos de colores HTML</b> <a href="http://html-color-codes.info/codigos-de-colores-hexadecimales/" title="Códigos de colores HTML" target="_blank"><b>aquí</b></a>. <br />
</td> </tr>
</table><br />
<br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1f3CRG9" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1f3CRG9" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table><br />
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-40815000713308649492015-04-09T15:04:00.000-07:002018-08-22T06:06:48.679-07:00Poner borde a imágenes de una entrada en Blogger<table border="0" width="100%" cellpadding="5px"><tr> <td> <p align="justify">Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos: </p><br />
<h7>Imagen a la izquierda</h7><br />
<br />
<table border="1" width="100%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><div class="separator" style="clear: both; text-align: center;"><img src="<font color="#ff4a4a">URL</font>" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #<font color="#ff4a4a">COLOR</font>"/></div></code></td> </tr>
</table><br />
<br />
<h7>Imagen a la derecha</h7><br />
<br />
<table border="1" width="100%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><div class="separator" style="clear: both; text-align: center;"><img src="<font color="#ff4a4a">URL</font>" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #<font color="#ff4a4a">COLOR</font>"/></div></code></td> </tr>
</table><br />
<br />
<h7>Imagen en el centro</h7><br />
<br />
<table border="1" width="100%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><div class="separator" style="clear: both; text-align: center;"><img src="<font color="#ff4a4a">URL</font>" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #<font color="#ff4a4a">COLOR</font>"/></div></code></td> </tr>
</table><br />
<ul><li>En <font color="#ff4a4a"><code>URL</code></font> ponemos la URL de la imagen correspondiente.</li>
<li>En <font color="#ff4a4a"><code>COLOR</code></font> ponemos el número correspondiente al código del color que se asigne al borde.</li>
</ul><br />
<b>Códigos de colores HTML</b> <a href="http://html-color-codes.info/codigos-de-colores-hexadecimales/" title="Códigos de colores HTML" target="_blank"><b>aquí</b></a>. <br />
</td> </tr>
</table><br />
<br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1f3CRG9" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1f3CRG9" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table><br />
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-19302416356278879662014-08-27T07:04:00.001-07:002020-11-28T07:51:46.713-08:00Añadir URL de entrada en textos copiados (copy and paste)<table border="0" width="100%" cellpadding="5px"><tr> <td> <br />
<div style="text-align: justify;">Todos hemos visto, al copiar y pegar texto de algunos sitios web, que en la parte inferior de lo copiado aparece información que hace referencia a la URL de la fuente, en algunos casos acompañada con un aviso de copyright. Es algo así como: «Leer más aquí: www.sitio.com», y en la parte inferior el aviso de copyright.<br />
<br />
Este método lo podemos implementar en nuestro blog para que cuando alguien copie el texto de una entrada, o parte del mismo, aparezca insertada, en la parte inferior del texto copiado, información de la entrada, como la URL y el nombre del blog con el aviso de copyright (derechos de autor). <br />
<br />
Utilizamos la librería jQuery de JavaScript para que el código sea interpretado más fácilmente por todos los navegadores</div><br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="100%" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><br />
<div style="text-align: justify;">Localizamos la siguiente etiqueta poniéndola dentro del rectángulo de búsqueda (search):<br />
<br />
</div><table border="1" width="10%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <strong><code></body></code></strong> </td> </tr>
</table><br />
Inmediatamente antes de la anterior etiqueta pegamos el siguiente código:<br />
<br />
<table border="1" width="100%" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><font color="#ff2ee1"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></font><br />
<script><br />
//<![CDATA[<br />
$("body").bind('copy', function (e) {<br />
if (typeof window.getSelection == "undefined") return;<br />
var miblog = document.getElementsByTagName('body')[0];<br />
var seleccionar = window.getSelection();<br />
<font color="#fe4a4a">if (("" + seleccionar).length < 50) return;</font><br />
var nuevodiv = document.createElement('div');<br />
nuevodiv.style.position = 'absolute';<br />
nuevodiv.style.left = '-99999px';<br />
miblog.appendChild(nuevodiv);<br />
nuevodiv.appendChild(seleccionar.getRangeAt(0).cloneContents());<br />
if (seleccionar.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {<br />
nuevodiv.innerHTML = "<pre>" + nuevodiv.innerHTML + "</pre>";<br />
}<br />
nuevodiv.innerHTML += "<br/><br/><font color="#40ff00">Leer más aquí</font>: <a href='"<br />
+ document.location.href + "'>"<br />
+ document.location.href + "</a><font color="f7fe2e"><br/>&copy; Nombre del blog</font>";<br />
seleccionar.selectAllChildren(nuevodiv);<br />
window.setTimeout(function () { miblog.removeChild(nuevodiv); }, 200);<br />
});<br />
//]]><br />
</script></code><br />
</td> </tr>
</table><ul><div style="text-align: justify;">
<li>La <font color="#ff2ee1">primera línea del código</font> corresponde a la librería jQuery; si ya tenemos una en nuestra plantilla, la omitimos.</li>
<li>La línea con <font color="#fe4a4a">este resaltado</font> pone un mínimo de caracteres copiados para que la información aparezca. En este caso hemos puesto un límite de cincuenta caracteres, es decir, para que la información aparezca la copia debe tener cincuenta caracteres o más, en caso contrario no aparecerá; esta cifra la podemos cambiar. Si no queremos poner un límite, sino que la información aparezca al copiar cualquier número de caracteres, eliminamos <font color="#fe4a4a">esa línea</font>.</li>
<li>El texto <font color="#40ff00">Leer más aquí</font> podemmos cambiarlo.</li>
<li>En el texto resaltado con <font color="f7fe2e">este color</font> cambiamos <font color="f7fe2e">Nombre del blog</font> por el correspondiente a nuestro blog. Si no queremos mostrar copyrright con el nombre del blog eliminamos lo resaltado con <font color="f7fe2e">amarillo</font>.</li>
</div></ul><br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1C2tbFH" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1C2tbFH" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-6498596749076240896.post-15729450190786020702014-03-16T09:36:00.000-07:002018-07-27T04:26:28.698-07:00Justificar textos en entradas y comentarios Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> <h7>Justificar los textos de las entradas</h7><br />
<br />
Los textos de las entradas los podemos justificar de tres maneras:<br />
<ol><li>Manualmente</li>
<li>En plantilla de entradas</li>
<li>En Edición de HTML</li>
</ol><br />
<h8>Justificación manual</h8><br />
<br />
<div style="text-align:justify;">Creamos la entrada en el editor HTML poniendo el texto de la misma entre las siguientes etiquetas:<br />
</div><br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code> <div style="text-align: justify;"><br />
Aquí el texto de la entrada<br />
</div></code> </td> </tr>
</table><br />
<h8>Justificación en plantilla de entradas</h8><br />
<br />
Vamos a:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Configuración</td> <td> ► </td> <td>Entradas y comentarios </td> <td> ► </td> <td> Plantilla de las entradas </td> <td> ► </td><td>Añadir</td> </td> </tr>
</table><br />
Hacemos click en <b><em>Añadir</em></b> y, en la caja de texto que se despliega, pegamos las siguientes etiquetas:<br />
<br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code> <div style="text-align: justify;"><br />
</div></code> </td> </tr>
</table><br />
<div style="text-align:justify;">Cada vez que vayamos a crear una entrada, en el editor HTML aparecerán estas etiquetas entre las cuales ponemos el texto de la misma.<br />
</div><br />
<br />
<h8>Justificación en Edición de HTML</h8><br />
<br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png"><br />
</td> </tr>
</table><br />
<div style="text-align:justify;">Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:<br />
</div><br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>.post-body {<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
<font color="#ff6a6a">text-align: justify;</font><br />
}</code></td> </tr>
</table><br />
...y agregamos, al final, la línea resaltada.<br />
<br />
Todas las entradas se justificarán automáticamente.<br />
<br />
<br />
<h7>Justificación de los textos de los comentarios</h7><br />
<br />
<div style="text-align:justify;">En las plantillas antiguas los textos de los comentarios no se justifican por defecto; podemos lograrlo así:<br />
</div><br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png"><br />
</td> </tr>
</table><br />
<div style="text-align:justify;">Localizamos un código con el siguiente formato poniendo, dentro del rectángulo de búsqueda (Search), la primera línea del mismo:<br />
</div><br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>.comment-body {<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
yyyyyyyyyy: xxxxx;<br />
<font color="#ff6a6a">text-align: justify;</font></code><br />
}</td> </tr>
</table><br />
...y agregamos, al final, la línea resaltada.<br />
<br />
<br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1f7S759" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/PFSeLi" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Pedro Pablo Pachónhttp://www.blogger.com/profile/18152344678215981633noreply@blogger.com10tag:blogger.com,1999:blog-6498596749076240896.post-48530323304506835022014-02-26T07:39:00.001-08:002014-12-14T07:23:10.857-08:00Numerar los comentarios en blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> Para numerar los comentarios:<br />
<p>1. vamos a:</p><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><p>2. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><div expr:id='data:widget.instanceId + "_comments-block-wrapper"'><br />
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'><br />
        <font color="#ff6060"><script type='text/javascript'>var CommentsCounter=0;</script></font><br />
          <b:loop values='data:post.comments' var='comment'><br />
            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'><br />
              <b:if cond='data:comment.favicon'><br />
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br />
              </b:if></code><br />
</td> </tr>
</table><p>3. Dentro del anterior código agregamos la <font color="#ff6060">línea resaltada</font>.</p><p>4. Un poco más abajo del anterior código localizamos el siguiente:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><b:if cond='data:comment.authorUrl'><br />
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br />
              <b:else/><br />
                <data:comment.author/><br />
              </b:if></code><br />
</td> </tr>
</table><p>5. A continuación pegamos éste:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><span class='numberingcomments' style='float: right; font-size: <font color="#ff6060">16px</font>; color:<font color="#ff6060">#ffffff</font>'><br />
<a rel='nofollow' style='text-decoration:none' title='Comment Link'><font color="#ff6060">#</font><br />
<script type='text/javascript'><br />
CommentsCounter=CommentsCounter+1;<br />
document.write(CommentsCounter);<br />
</script><br />
</a><br />
</span></code><br />
</td> </tr>
</table><ul>Las partes <font color="#ff6060">resaltadas</font> (tamaño de los caracteres, color y numeral), pueden ser cambiadas.</ul><p>6. Guardar plantilla.</p><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1f7S759" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1f7S759" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-6498596749076240896.post-78533384326531774872014-02-16T15:38:00.000-08:002014-12-14T07:23:53.847-08:00Código de la cabecera Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> <div style="text-align:justify;">Vamos a analizar el código de la cabecera en blogs de Blogger. Es conveniente conocerlo para el caso en que queramos hacer alguna modificación a la cabecera, sepamos qué partes del mismo debemos alterar.</div><br />
<h7>Plantillas nuevas</h7><br />
<br />
Tomaremos como referencia la plantilla Simple.<br />
<br />
Cabecera por defecto:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4h80r5sjdAVN6IuPdS3gnsW5rZ_JnLVveemoLoPsXberiRuzVLqF9BKCRcOnFPNQjZPGfZj6O21AuoVpuPFZ5WpQOTG8ZcrewS4WLRFm9lLmMEOMgJ6pKn7OL1PtOqRyFO-osweeziIRy/s1600/Cabecera_simple_1.png" /></div><div style="text-align: center;"><small>(El título y la descripción están, por defecto, alineados a la izquierda; los hemos puesto en el centro para una mejor presentación del tutorial)</small></div><br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><br />
...y localizamos el siguiente código, correspondiente a la cebecera, poniendo <code>.header-outer</code> dentro del rectángulo de búsqueda (Search):<br />
<br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>/* Header<br />
----------------------------------------------- */<br />
<font color="#fe4a4a">.header-outer {<br />
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;<br />
_background-image: none;<br />
}</font><br />
<br />
<font color="#f2fe2f">.Header h1 {<br />
font: $(header.font);<br />
color: $(header.text.color);<br />
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);<br />
}</font><br />
<br />
<font color="#40ff00">.Header h1 a {<br />
color: $(header.text.color);<br />
}</font><br />
<br />
<font color="#b181ff">.Header .description {<br />
font-size: $(description.text.size);<br />
color: $(description.text.color);<br />
}</font><br />
<br />
<font color="#ffc0d0">.header-inner .Header .titlewrapper {<br />
padding: 22px $(header.padding);<br />
}</font><br />
<br />
<font color="#d0d0ff">.header-inner .Header .descriptionwrapper {<br />
padding: 0 $(header.padding);<br />
}</font></code><br />
</td> </tr>
</table><br />
<div style="text-align: justify;">Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación.<br />
<br />
<font color="#fe4a4a"><b>Primer bloque</b></font><br />
<br />
Este bloque corresponde a la envoltura de la cabecera; cualquier modificación que hagamos en este bloque de código afectará al fondo de la cabecera, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><aimageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghJnoEVNGxJOa1XwbifFt6tzzRkkdGY4M6oXI-Q-MvUobt0DeRIIj6MTeN9sByOZ7kjgLUQmpjDiO-o0yVUeCSyUqJP1iTEAeNP-dsGsqrgXCl6HxAhjn1miRXP3nWhfhVKa-SQ8UcnE-B/s1600/Cabecera_simple.png" /></div><br />
<font color="#f2fe2f"><b>Segundo bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde al fondo del título del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAgHVbOoNFAqTN4tJbLyfuzC1xAtvb-0jxfxmZOkJQ1HjZ8Sc5IOhy59HQM09_UU7QTaNSfgkPK3729I4svbE5WPDpVJt5IwubThzIQAITqkUNbaQ0wEz2AqUu8HjJAHVz6eDDWzHJDnH/s1600/Cabecera_simple_2.png" /></div><br />
<font color="#40ff00"><b>Tercer bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde a los caracteres del título del blog visto en cada entrada en particular; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a las letras del título del blog visto en cada entrada en particular, por ejemplo si les cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84-ziVG7jP4N06897L2mCMN29fVMHbFyuTpqq_ehl4gqPXqLRbuoPzU-32Dmx8NeHfmNS2iz2nYZ11el5eL7VwHYLQbvXPdHS6Cd4jjo3iY3-7jEuhTvX7e6tW28lXIUGFdZ7ytvRBxjF/s1600/Cabecera_simple_3.png" /></div><br />
<font color="#b181ff"><b>Cuarto bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde a los caracteres de la descripción del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a las letras de la descripción del blog, por ejemplo si les cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPKPz8iYRh_-6jpXttnUy5vVt-WUcUQdZNr7SVScM_6CFK8rUw40_2BOEx8WA9UoNJW9oim5MtnHAa6H1jpMxAMs1vUiY6JyccSjDIcuo6dkDfqp5uB8w_h35ZmQi1YLH72m0XslGp0ej/s1600/Cabecera_simple_4.png" /></div><br />
<font color="#ffc0d0"><b>Quinto bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde a la sección de la cabecera o espacio que ocupa la cabecera dentro de la envoltura de la misma; cualquier modificación que hagamos en este bloque de código afectará al fondo de la cabecera, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZegTMoTzoQn9nlBY1b9iFbZ8YaIHSYocDh1VyZefy1EZ2OztpC_dGAOqEEM3PhMjj5skkhruQqhGE3R1pxD5LYDGRJMai8JdkXV7rTZ-gNp-aY-BfzsskvbNz1GET2ZkWBKuygFlCaTvi/s1600/Cabecera_simple_5.png" /></div><br />
<div style="text-align: justify;">Es conveniente anotar que esta sección de la cabecera está encima de la envoltuta (primer bloque); es por eso que el color de fondo que se verá será el de la sección de la cabecera. Debemos tener cuidado al hacer cambios en las dimensiones de la envoltura y de la sección, procurando que queden iguales ya que, si por ejemplo, la envoltura es más larga que la sección, o viceversa, se nos va a presentar alguna desconfiguración en la ubicación del título y la descripción. Para asegurarnos de que esto no ocurra les ponemos, a las dos, colores diferentes, y dejamos más larga la envoltura que la sección; notaremos la diferencia en el contraste de los colores, entonces modificamos la dimensión de la envoltura hasta igualarla con la sección y después les ponemos el mismo color.</div><br />
<font color="#d0d0ff"><b>Sexto bloque</b></font><br />
<br />
<div style="text-align: justify;">Este bloque corresponde al fondo de la descrición del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCXLXCUEistnMSQTKxmeTmLpGhSz_RmnTdpCVTCjJTP2aBPL_0EGcs9S7_trwVR57NYCS2UVnXKRJfQY-RqXr0Z5PDYH2JScISTjValweMGDM0l7UCj326DY3TZBuzZlGA_-1YXviMxA2/s1600/Cabecera_simple_6.png" /></div><br />
<br />
<h7>Plantillas Antiguas</h7><br />
<br />
Tomaremos como referencia la plantilla Mínima.<br />
<br />
Cabecera por defecto:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkabbrTGnJn2UNdKEIJSwOJGx5ujRLlZiJbF2yiyZxgeQQFXh-mQbQ-1q2BdJTejE4xemjC7G6N_XF-vX2Y9SNf_1_pRRxZX5jcytwRp0jhayci28cu1HQqOD7rulDCzOjHuwvPKc7GEZs/s1600/Cabecera_m%C3%ADnima.png" /></div><br />
Vamos a <strong><em>Editar HTML</em></strong>:<br />
<br />
<table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><br />
...y localizamos el siguiente código, correspondiente a la cebecera, poniendo <code>#header-wrapper</code> dentro del rectángulo de búsqueda (Search):<br />
<br />
<table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>/* Header<br />
-----------------------------------------------<br />
*/<br />
<font color="#fe4a4a"><br />
#header-wrapper {<br />
width:660px;<br />
margin:0 auto 10px;<br />
border:1px solid $bordercolor;<br />
}</font><br />
<font color="#f2fe2f"><br />
#header-inner {<br />
background-position: center;<br />
margin-left: auto;<br />
margin-right: auto;<br />
}</font><br />
<font color="#40ff00"><br />
#header { <br />
margin: 5px;<br />
border: 1px solid $bordercolor;<br />
text-align: center;<br />
color:$pagetitlecolor;<br />
}</font><br />
<font color="#b181ff"><br />
#header h1 {<br />
margin:5px 5px 0;<br />
padding:15px 20px .25em;<br />
line-height:1.2em;<br />
text-transform:uppercase;<br />
letter-spacing:.2em;<br />
font: $pagetitlefont;<br />
}</font><br />
<font color="#ffc0d0"><br />
#header a {<br />
color:$pagetitlecolor;<br />
text-decoration:none;<br />
}</font><br />
<font color="#d0d0ff"><br />
#header a:hover {<br />
color:$pagetitlecolor;<br />
}</font><br />
<font color="#c1ffdd"><br />
#header .description {<br />
margin:0 5px 5px;<br />
padding:0 20px 15px;<br />
max-width:700px;<br />
text-transform:uppercase;<br />
letter-spacing:.2em;<br />
line-height: 1.4em;<br />
font: $descriptionfont;<br />
color: $descriptioncolor;<br />
}</font><br />
<font color="#eeeeb9"><br />
#header img {<br />
margin-$startSide: auto;<br />
margin-$endSide: auto;<br />
}</font></code></td> </tr>
</table><br />
<div style="text-align: justify;">Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación.<br />
<br />
<font color="#fe4a4a"><b>Primer bloque</b></font><br />
<br />
Este bloque corresponde al fondo externo de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhakRQt1NaDfiVuG9ymtekcyjE-0AyBp5kYbZguUS98KdFlhM_GowPZxKA56NBquMwugmkvzhELlA1LYVKukbjyNImwbfa-MwZaJEb9CzxsU4-G5q-rwk4yYRDpf8RIrLFO3d28g3H6QbO0/s1600/Cabecera_m%C3%ADnima_1.png" /></div><br />
<div style="text-align: justify;"><font color="#f2fe2f"><b>Segundo bloque</b></font><br />
<br />
Este bloque corresponde al fondo interno de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl6AXfS98bK_-iCBhBM8-8KE2nCxPXa0nv8hj2I1zVQiY-lCRcemSJ2H6c4fmrhfNPVyE4qXB1fNLkJKYzMy9_DpkUkaPKv4OBvdjoALo-nPKmN4BNrGTP-60uyur-5029wul1OL4Vo1Zw/s1600/Cabecera_m%C3%ADnima_2.png" /></div><br />
<div style="text-align: justify;"><font color="#40ff00"><b>Tercer bloque</b></font><br />
<br />
Este bloque corresponde al fondo intermedio de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitOxLDVu2O2sRczL9h9H6cGg4iOjGcoJ0xsDJtj-NyacplaC1EdKbcfiqbfxa2LxiLy8YWoJausew2WruhSBnnLTbe0cxS1Ox6_rxyOdWLW8mpn9sAZasbKpncSjnzY-s3tZRTUIIHm8P4/s1600/Cabecera_m%C3%ADnima_3.png" /></div><br />
<div style="text-align: justify;">Los anteriores tres fondos están superpuestos, así:</div><br />
<div class="separator" style="clear: both; text-align: center;"><imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic1_9bBbUY5qd8ToBuBrdNEAkNjDLgp3Tg628aqSIvmoXoba-21RC03ha7T_7daURQnupsTUY4nYaLCj3tqgM6PetAL1-WPQ08IgY-N85iiTKWuPuMiRnQqgYXEIn607NUz1mVmYzEPhYL/s1600/Cabecera_m%C3%ADnima_4.png" /></div><br />
<div style="text-align: justify;">...por consiguiente cualquier modificación que hagamos en las magnitudes (alto o ancho) de la cabecera, la debemos hacer en los tres fondos, guardando las proporciones para conservar la congruencia. <br />
<br />
<font color="#b181ff"><b>Cuarto bloque</b></font> <br />
<br />
Este bloque corresponde a los caracteres del título del blog. Por consiguiente para cualquier modificación al texto en el título del blog (color, tamaño de fuente, familia de fuente, etc.) debemos hacerla en este bloque.<br />
<br />
<font color="#ffc0d0"><b>Quinto bloque</b></font> <br />
<br />
Este bloque corresponde a los caracteres del título del blog visto en cada entrada en particular.<br />
<br />
<font color="#d0d0ff"><b>Sexto bloque</b></font> <br />
<br />
Este bloque corresponde a los caracteres del título del blog cuando ponemos el cursor encima y visto en cada entrada en particular.<br />
<br />
<font color="#c1ffdd"><b>Séptimo bloque</b></font> <br />
<br />
Este bloque no desempeña ninguna función.<br />
</div></td> </tr>
</table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-661664611823425032014-01-09T15:06:00.000-08:002019-12-02T12:29:28.512-08:00Convertir blog en web<br />
<table border="0" cellpadding="5px" style="width: 630px;"><tbody>
<tr> <td><div style="text-align: justify;">Convertir un blog en web, o darle apariencia de web, lo podemos lograr adecuando, en la página principal, una portada tipo magazine. <br />
<br />
La portada estará formada por dos columnas de rectángulos, cada uno de los cuales corresponderá a una entrada, y en ellos pondremos:<br />
<ol><li>Un resumen del contenido del post correspondiente.<br />
</li>
<li>Una imagen.<br />
</li>
<li>Tanto el resumen como la imagen los pondremos dentro de etiquetas <span style="color: #fe4a4a;"><a href="#"></span>, con la URL de la entrada correspondiente, para que sirvan de enlaces a la misma.<br />
</li>
<li>Todo lo anterior lo pondremos dentro de un bloque <span style="color: #fe4a4a;"><div></span> al que le asignaremos la clase <span style="color: #fe4a4a;">resumenOculto</span> para aislarlo, de manera que no se vea en el texto de la entrada, sino únicamente en la portada o página principal.<br />
</li>
</ol>El bloque descrito anteriormente lo ponemos en el editor de HTML, al comienzo de las entradas que van a aparecer en la portada, así: </div><p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code> <div class="resumenOculto"><br />
<span style="color: #fe4a4a;">Código de la imagen</span><a href="<span style="color: #fe4a4a;">URL de la entrada</span>" title="<span style="color: #fe4a4a;">Título de la entrada</span>"><span style="color: #fe4a4a;">Resumen de la entrada</span></a><br />
</div></code></td> </tr>
</tbody></table><br />
<div style="text-align: justify;">...poniendo en las partes resaltadas lo indicado en las mismas. El atributo <code>title</code> hace que, al poner el cursor sobre el resumen, aparezca el título de la entrada. <br />
<p> </p><b><big>La imagen</big></b> <br />
<ul><li>La imagen que ponemos en cada rectángulo la subimos marcando en el diseño las opciones, en "Alineación de la imagen": "Ninguna", y en "Tamaño de la imagen": "Tamaño original". </li>
</ul></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JGH7UvtAfyOEXEMRApoqqOxjic8qCRpjSOsGtzqdtqyKnoz_uc62SXfqXfzGYw_vK1EhyphenhypheneXEXQGfschufThniGV0oI4i5y9-ZQn5WuwFl0Fm5bRHdLA__8LlpxoalO8s-ImN1w9eef1V/s1600/Dise%C3%B1o_imagen_subida.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JGH7UvtAfyOEXEMRApoqqOxjic8qCRpjSOsGtzqdtqyKnoz_uc62SXfqXfzGYw_vK1EhyphenhypheneXEXQGfschufThniGV0oI4i5y9-ZQn5WuwFl0Fm5bRHdLA__8LlpxoalO8s-ImN1w9eef1V/s1600/Dise%C3%B1o_imagen_subida.png"></a></div><ul><li>El tamaño se adaptará al indicado en el código que veremos más adelante (punto 4).<br />
</li>
<li>El <span style="color: #fe4a4a;">código de la imagen</span> por defecto, subida con el diseño indicado, es como éste:<br />
</li>
</ul><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><a href="<span style="color: #fe4a4a;">#</span>" imageanchor="1"> <img border="0" src="<span style="color: #fe4a4a;">#</span>" <span style="color: #f4fa58;">alt="Título de la entrada" title="Título de la entrada"</span>/></a></code></td> </tr>
</tbody></table><div style="text-align: justify;"><ul><ul><li>El resaltado en <span style="color: #f4fa58;"><code>amarillo</code></span> lo agregamos.</li>
<li>En los sitios en donde están los signos numeral (<span style="color: #fe4a4a;">#</span>) Blogger pone por defecto la URL de la imagen, en el primero (con el atributo <em>a href</em>) como enlace, y en el segundo (con el atributo <em>src</em>) como identificador del archivo de la imagen. Reemplazamos la primera URL con la correspondiente a la entrada para que la imagen sirva de enlace a la entrada y no a la misma imagen.<br />
</li>
<li>Los atributos <code>alt</code> y <code>title</code> hacen que al poner el cursor sobre la imagen aparezca el título de la entrada. En las imágenes se utiliza, para este efecto, el atributo <code>alt</code>, pero ponemos también el atributo <code>title</code> ya que algunos navegadores no interpretan el primero.<br />
</li>
</ul></ul><p> <p/><b><big>Rectángulos que se verán e la portada</big></b> <br />
<p>Los rectángulos que se verán en la portada serán los correspondientes a las últimas entradas creadas, y cuyo número será aquél que le asignemos en <b><em>Configuración</em></b>. Para esto vamos a:</div><p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><div style="text-align: center;">Página principal ► Diseño ► Configuración ► Entadas y comentarios ► Mostrar un máximo de <b>X</b> entradas en la página principal </div></td> </tr>
</tbody></table><p><div style="text-align: justify;">...y ponemos allí el número correspondiente. Este número deberá ser par, para que ambas columnas nos queden con igual número de rectángulos:</div><p><div class="separator" style="clear: both; text-align: center;"><a href="#" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Número de entradas a mostrar" border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLECiaUVcAS8YUdeY6U4DoYtAcwj5ZgSKzk_L6oZ5MO3Kdy-wIFWeW5Tr3bc4xjVb6kcXwPikUsY4t6vbp0mfsETARo2HNcMX96gF0AHGmGoVqWZlDjjjxj7gkAkRQQR7xhST87557KaVA/s1600/Mostrar_entradas_1.png" title="Número de entradas a mostrar" width="500"></a></div><p>Guardamos configuración. <br />
<p><div style="text-align: justify;">Obviamente el bloque <span style="color: #fe4a4a;"><div></span>, indicado al comienzo del tutorial, tendremos que ponerlo en el editor de HTML al comienzo de cada entrada de las que van a aparecer en la portada. <br />
<p> </p><b><big>Códigos que pondrán en funcionamiento la portada</big></b> <br />
<p>Una vez hayamos puesto el bloque <span style="color: #fe4a4a;"><div></span> en todas las entradas que aparecerán el la portada, ponemos en la plantilla los códigos que pondrán a funcionar la portada:</div><p>1.- Vamos a <b><em>Editar HTML</em></b>: <br />
<p><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td> <td> Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png"></a><br />
</td> </tr>
</table><p>2.- Localizamos, en las plantillas nuevas, un código como éste, poniendo dentro del rectángulo de búsqueda (search) una línea del mismo: <br />
<p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><b:if cond='data:blog.metaDescription == ""'><br />
<!-- Then use the post body as the schema.org description,<br />
for good G+/FB snippeting. --><br />
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div><br />
<b:else/><br />
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div><br />
</b:if></code></td> </tr>
</tbody></table><p><ul>Y en plantillas antiguas un código como éste: </ul><p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><div class='post-body entry-content'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div></code></td> </tr>
</tbody></table><p><ul>...o como éste: </ul><p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'><br />
<data:post.body/><br />
<div style='clear: both;'/> <!-- clear for photos floats --><br />
</div></code></td> </tr>
</tbody></table><p>3.- En cualquier caso, el código que encontremos de los anteriores, lo eliminamos y lo reemplazamos con el siguiente:<br />
<p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><b:if cond='data:blog.pageType == "item"'><br />
  <div class='post-body entry-content'><br />
    <data:post.body/><br />
    <div style='clear: both;'/><br />
  </div><br />
<b:else/><br />
  <div class='post-body entry-content'><br />
    <div expr:id='"original-" + data:post.id' style='display:none;'><br />
      <data:post.body/><br />
    </div><br />
    <div style='clear: both;'/><br />
  </div><br />
  <!-- ejecutar función JavaScript --><br />
  <script type='text/javascript'><br />
    // enviará el ID generado por Blogger (data:post.id)<br />
    ejecutarResumen('<data:post.id/>');<br />
  </script><br />
</b:if></code><br />
</td> </tr>
</tbody></table><p><ul><li>Con este código conseguiremos:<br />
<ul><li>Aislar el resumen para que no aparezca sino en la página principal o portada.<br />
<li>Que el contenido original del post no sea visible en la página principal o portada.<br />
<li>Que cada post, en particular, no sufra ningún cambio.<br />
</ul></ul>4.- Antes de la etiqueta <font color="#fe4a4a"><code></head></code></font> pegamos el siguiente código:<br />
<p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><b:if cond='data:blog.pageType != "item"'><br />
  <style><br />
<font color="#fe4a4a">/*propiedades de los posts (resúmenes) en la portada*/</font><br />
    .post {<br />
      background-color: #E2EFFD;<font color="#ffec15">/*color del fondo*/</font><br />
      float: left;<br />
      width: 310px;<font color="#ffec15">/*ancho: mitad del cuerpo de las entradas*/</font><br />
      height: 190px;<font color="#ffec15">/*el alto es fijo*/</font><br />
      margin-right: 15px;<br />
      margin-top: 0px;<br />
      margin-bottom: 10px;<br />
      overflow: hidden;<br />
      padding-left: 5px;<br />
      padding-top: 5px;<br />
    }<br />
<font color="#fe4a4a">/*propiedades de las imágenes en la portada*/</font><br />
    .post img {<br />
      float: left;<br />
      margin: 0 5px 0 0;<br />
      width: 100px;<font color="#ffec15">/*ancho*/</font><br />
      height: 100px;<font color="#ffec15">/*alto*/</font><br />
    }<br />
  </style><br />
<b:else/><br />
  <style><br />
    .resumenOculto {display:none;}<br />
  </style><br />
</b:if></code></td> </tr>
</tbody></table><div style="text-align:justify;"><ul><li>El <font color="#ffec15"><code>/*color del fondo*/</code></font> es editable, ponemos el nuestro.<br />
<li>El <font color="#ffec15"><code>/*ancho: mitad del cuerpo de las entradas*/</code></font>, es editable, pero, por estética, se recomienda que no sea menor de 300px, para lo cual es recomendable que el blog tenga un ancho no menor de 950px. Si es necesario deberíamos ensanchar el blog; el tutorial al respecto está <a href="http://bloguermast.blogspot.com/2010/02/cambiar-ancho-blog-blogger.html" title="Ensanchar blog" target="_blank"><b>aquí</b></a>.<br />
<li>El <font color="#ffec15"><code>/*ancho*/</code></font> y el <font color="#ffec15"><code>/*alto*/</code></font> de las imágenes son editables, pero se recomiendan los indicados en el código (100px). Debemos procurar que las imágenes sean lo más cuadradas posible, para que, al adaptarse a estas dimensiones, no se distorsionen. <br />
</ul></div><p>5.- A continuación del anterior código pegamos el siguiente: <p><table align="center" bgcolor="#194155" border="1" cellpadding="5px" style="width: 610px;"><tbody>
<tr> <td><code><script type='text/javascript'><br />
//<![CDATA[<br />
<br />
// llega con el ID del post<br />
function ejecutarResumen(idPOST) {<br />
  var namePOST = "original-" + idPOST; // el DIV del post normal<br />
  var divPOST = document.getElementById(namePOST);<br />
  // buscamos los DIVS<br />
  var lista = divPOST.getElementsByTagName("div");<br />
  if(lista.length>0){<br />
    // buscamos un DIV con la clase resumenOculto<br />
    for(var i=0; i<lista.length; ++i) {<br />
        if(lista[i].className=="resumenOculto") {<br />
          // cambiamos el contenido del post por el de ese DIV<br />
          divPOST.innerHTML = lista[i].innerHTML;<br />
          // lo mostramos<br />
          divPOST.style.display = "block";<br />
          return;<br />
        }<br />
      }<br />
    }<br />
}<br />
//]]><br />
</script></code><br />
</td> </tr>
</tbody></table><p><div style="text-align:justify;">Antes de guardar plantilla debemos utilizar la <b><em>Vista previa</em></b> para verificar que la portada nos haya quedado correcta. Lo más probable es que nó. Se pueden presentar los siguientes casos: <ul><li>Que los rectángulos tuvieran un ancho superior al de la mitad del cuerpo de las entradas. En este caso todos los rectángulos quedarán en una sola columna, a la izquierda, y los enlaces pie de post se deaplazarán hacia arriba, a la derecha.<br />
<li>Que los rectángulos tuvieran un ancho inferior al de la mitad del cuerpo de las entradas. En este caso los rectángulos quedarán en las dos columnas, pero sobrará un espacio a la derecha, y los enlaces pie de post se desplazarán hacia arriba en el mismo.<br />
</ul>Dependiendo del caso, aumentamos o disminuímos, en la línea correspondiente a <font color="#ffec15"><code>/*ancho: mitad del cuerpo de las entradas*/</code></font> del código del punto cuatro, el número de pixeles, y vamos observando con la <b><em>Vista previa</em></b> hasta lograr que las dos columnas de rectángulos casen perfectamente. <p>5.- Guardamos plantilla. <p>6.- Eliminamos las fechas de las entradas, ya que éstas afectan la simetría de los rectángulos en la portada. En <a href="http://bloguermast.blogspot.com/2009/12/eliminar-fechas-blogger.html" title="Eliminar las fechas de las entradas" target="_blank">este tutorial</a> se explica cómo eliminar las fechas.</div><p><b><big>Nota</big></b>: Esta portada no se adapta muy bien a las plantillas Fantástico S.A. Aewsome, Picture Window y Filigrana.</p></td> </tr>
</tbody></table><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1cDILZT" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1bOLC6L" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table>Unknownnoreply@blogger.com5tag:blogger.com,1999:blog-6498596749076240896.post-18388885154536034042013-11-21T16:44:00.000-08:002014-12-14T07:25:04.002-08:00Menús para Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td><div style="text-align:justify;">Presentamos algunos menús para poner en blogs de Blogger. Debajo de cada imagen está el enlace para ir al tutorial correspondiente.</div><br />
<br />
<h7>Menú horizontal con CSS3, envolvente</h7><br />
<br />
<div style="text-align:justify;">Este menú se presenta a la vista como si estuviera envolviendo el blog. Queda bien en blogs que tienen bien definido el borde del Outer Wrapper (envoltura principal del blog). </div><br />
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 85px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU8Qh7yimgJSK-3TQusGRTKeaIlcDUUF3kM0EI7cGxgYrS8f6Xm5B6YXTU4fQr7z2jtwsmVNuFNyayDkap_lbRpXIKxuil7s5YpyS6NlBGumR-5sjbknM_s38EXIrrJsu7rTmgonQ-HdqS/s1600/Menu_envolvente.png" border="0" alt="Menú horizontal envolvente" title="Menú horizontal envolvente"/><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2012/06/menu-horizontal-con-css3-envolvente.html" title="Menú horizontal con CSS3, envolvente"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú horizontal Estilo Apple Fancy Efecto Slide</h7><br />
<br />
<div style="text-align:justify;">Menú horizontal con efecto card-shuffle, el cual hace que cuando se ingresa a la página que lo contiene los iconos se deslicen hacia adentro; luego, cuando se pasa el cursor por cada uno de los elementos, los íconos se deslizan desde la parte superior hacia afuera.</div><br />
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 595px; height: 78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32VGJjnl_qTunu8OfWukgLc8TCceyHcchCnr8Q4wtMmUIqxbcXjtC7Iy6owthRsUyCX82LQeZ-66Ch-FLPpax57rAbsqWaCZd15ZqzXkyuWK9ORaVLcHEneHDcLfrzUKJPpe8mCYomdc/s1600/menu_slide.png" border="0" alt="Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery" title="Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery"/><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2011/01/menu-apple-fancy-slide-css-jquery.html" title="Menú horizontal Estilo Apple Fancy Efecto Slide"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú horizontal desplegable con CSS y Jquery, efecto deslizante</h7><br />
<br />
<div style="text-align:justify;">En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo.</div><br />
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 496px; height: 193px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00YA3HKynQSJc6nlseLzJV4Jlko9x7rqllUXxFz-jzN42Uv6e9z-RE-5fpgIaWN6Wj3_tnUaonfgrVvIM6kfSV3TSzZFsNm5CVYydXApFChZkIOOosCK-l1rFIdYBKqpIBVI_eI5sPQ/s1600/menu_despl_horiz.png" border="0" alt="Menú horizontal desplegable con CSS y Jquery, efecto deslizante" title="Menú horizontal desplegable con CSS y Jquery, efecto deslizante" /><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2011/01/menu-horizontal-desplegable-css-jquery.html" title="Menú horizontal desplegable con CSS y Jquery"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú vertical con CSS y jquery, efecto acordeón</h7><br />
<br />
<div style="text-align:justify;">Cada elemento del menú despliega submenús con un efecto acordeón.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ziGw1-271ZM_Kwfg0DYJqsDt-AJtMz2P2gHa8cEap4_ZMznThyh-lpl8sBkzQk6tSvaT5PJst9QORqKM-2u_uV19OP1VkLXiIdPeae7-gZT1SPfIjQ7bUTn3vjOqFL99yazTgn40-BxZ/s1600/Efecto_acorde%C3%B3n.png" alt="Menú vertical con CSS y jquery, efecto acordeón" title="Menú vertical con CSS y jquery, efecto acordeón"/></a></div><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2012/06/menu-vertical-con-css-y-jquery-efecto.html" title="Menú vertical con CSS y jquery, efecto acordeón"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú horizontal desplegable con Ajax</h7><br />
<br />
<div style="text-align:justify;">Éste es un menú de múltiples niveles. </div><br />
<img style="display:block; margin:0px auto 0px; text-align:center;cursor:pointer; cursor:hand;width: 600px; height: 145px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqwh5AMoyFIWGIbiMrTC9afKaoAc_nqi-LIEX20BHWsyWDIiQ2k2nWdWqHDWKKGMD1_PnFabnD9CJHBHkuFcxxS8hmv7qNZc94wOHQp7CLIYcovF03jSM5S0VRy9i3BIqAUULqq9WPPiE/s1600/Menu_ajax.png" border="0" alt="Menú horizontal desplegable, con Ajax" title="Menú horizontal desplegable, con Ajax"/><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2012/06/menu-horizontal-desplegable-con-ajax.html" title="Menú horizontal desplegable con Ajax"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú horizontal dinámico, con submenús</h7><br />
<br />
<div style="text-align:justify;">Este menú es una barra navegable cuyos elementos cambian de color al poner el cursor sobre los mismos.</div><br />
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 422px; height: 107px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxUzFVEawPAmHkWhzkyPWJljfkv0SVat2OE42W_05iO-F4bvLHpUHy7vPkomKfCIyC_czx-uRQ88tZM5SSWZPgRLdOcH5p-DFP-Hb0FIcRIKin88ucRUHvaIhobislpBBV6X6W6qa0wLs/s1600/menu_horiz_dinamico.png" border="0" alt="Menú horizontal dinámico, con submenús" title="Menú horizontal dinámico, con submenús"/><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2011/01/menu-horizontal-dinamico-submenus.html" title="Menú horizontal dinámico, con submenús"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú vertical desplegable</h7><br />
<br />
<div style="text-align:justify;">Este menú desplegable tiene la ventaja que, conteniendo un buen número de enlaces, ocupa poco espacio.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVlUX8gTP5zWz6Hs7Hn6JqX5eOwijaf9gDI8ALrDhy9SaFWbKq_HWzfe-gcv34UTVwUEoDrWZN71y1Zrg_DCHmBT4_LzVHNYCx5yKyerd1i15esgwVL53gpveuD7e3IB1jY_uT9tsLyhsq/s1600/Vertical_desplegable.png" alt="Menú vertical desplegable" title="Menú vertical desplegable"/></a></div><div style="text-align:center;"><a href="http://bloguermast.blogspot.com/2010/09/menu-desplegable-para-blogger.html" title="Menú vertical desplegable"><b><em>Ir al tutorial</em></b></a></div><br />
<hr><br />
<br />
<h7>Menú lateral con CSS y Jquery</h7><br />
<br />
<img alt="Menú de Navegación Lateral con jQuery y CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8LGCd8N_Q795yiv97cvXuDvPkehByAYylKgB6ei50CYliFPYX7tr6grVDqS0HqUyP1tdSoQobIBjENzcvSJFSsKm6S1bRDNoYNU3svOZK4PTWBuXo_1r5PwbWs5bOvpVV-iuzmp46EIE/s1600/Menu_lateral_3.png" style="cursor: pointer; float: left; height: 458px; margin: 0pt 10px 10px 0pt; width: 95px;" title="Menú de Navegación Lateral con Efecto Slide jQuery y CSS" border="0" /><div align="justify">Este menú en diapositiva tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos.</div><br />
<a href="http://bloguermast.blogspot.com/2011/02/menu-lateral-con-css-y-jquery-para.html" title="Menú lateral con CSS y Jquery"><b><em>Ir al tutorial</em></b></a><br />
<p> </p><p> </p><p> </p><br />
<br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/I7Pqmq" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/I7Pqmq" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-6498596749076240896.post-12123915272027318132013-11-02T20:06:00.001-07:002014-12-14T07:25:25.627-08:00Poner borde a las imágenes de las entradas en Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td><div style="text-align:justify;">Con un sencillo código podemos implementar bordes uniformes para todas las imágenes puestas en las entradas de un blog.</p><p>Vamos a <b><em>Editar HTML:</em></b></p></div><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><div style="text-align="justify;"><p>Localizamos, poniéndola dentro del rectángulo de búsqueda (search), la siguiente etiqueta:</p></div><table border="1" width="110px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>]]></b:skin></code><br />
</td> </tr>
</table><div style="text-align="justify;"><p>...e, inmediatamente antes, pegamos el siguiete código:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">8px</font> <font color="#2dff7d">solid</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code><br />
</td> </tr>
</table><div style="text-align:justify;"><p>Con el anterior código lograremos que todas las imágenes que pongamos en las entradas del blog adquieran un borde con las características indicadas en el mismo código. Veamos:</p><ul><li>El resaltado en <font color="#fcff06"><code>este color</code></font> adjudica un espacio entre el borde y la imagen, que en este ejemplo no existe ya que es de cero pixeles. Si queremos que haya ese espacio cambiamos el cero por el número de pixeles que le dé el espacio deseado.</li>
<li>El resaltado en <font color="#d361ff"><code>este color</code></font> adjudica el ancho al borde.</li>
<li>El resaltado en <font color="#2dff7d"><code>este color</code></font> es la propiedad que le da un estilo al borde. Ese estilo puede ser:<br />
<ul><li><font color="#2dff7d"><code>dotted</code></font>: borde en línea punteada.</li>
<li><font color="#2dff7d"><code>dashed</code></font>: borde en línea discontinua.</li>
<li><font color="#2dff7d"><code>solid</code></font>: borde normal o en línea continua.</li>
<li><font color="#2dff7d"><code>double</code></font>: borde en línea doble.</li>
<li><font color="#2dff7d"><code>groove</code></font>: borde con efecto ranura o acanalado.</li>
<li><font color="#2dff7d"><code>ridge</code></font>: borde con efecto cresta, rugosidad o cordoncillo.</li>
<li><font color="#2dff7d"><code>inset</code></font>: borde con proyección o perspectiva hacia adentro.</li>
<li><font color="#2dff7d"><code>outset</code></font>: borde con proyección o perspectiva hacia afuera.</li>
</ul></li>
<li>El resaltado en <font color="#ff506d"><code>este color</code></font> es el código hexadecimal del color adjudicado al borde.</li>
</ul><br />
Veamos bordes con cada uno de los estilos arriba indicados, y sus respectivos códigos, puestos a la siguiente imagen (en cada uno se le ha dado un ancho apropiado para poder apreciar claramente cada estilo):<br />
</div><br />
<table border="1" width="610px" cellpadding="3px" align="center"><tr><td colspan="2"><div style="text-align:center;"><b>Imagen sin borde</b></div></td></tr>
<tr><td colspan="2"><div style="text-align:center;"><b><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0J_wVhMqKDM9eFJqjL26X-LeUX-NUPiL8S0MhfhsUzz0mlv7asY0WBB7LNMTUo0-JQv13kUXhfcxex1Sm51VPafeXWvJYBh5SS-Wt8nNT8ie47vmIByEKuu7yOdH1Pq87-D1bED5j5bK/s1600/logotipo-blogger.jpg" /></div></b></div></td></tr>
<tr><td width="50%"><div style="text-align: center;"><b>Código</b></div></td><td width="50%" ><div style="text-align: center;"><b>Borde</b></div></td></tr>
<tr><td width="50%"><code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">5px</font> <font color="#2dff7d">dotted</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code></td> <td width="50%"><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24hk4aR0MF4dKiuGQqUQV9haiwqJTZnYwyy9BrdFxo5T7BYsZOAV9mQHRjrIny_FmzPoyb4L5ehRXNHRZSUdaAXh1H1i-iWngNyxBGB20Q6JlkuWpywd9TxjTIhWcFr2NWZa3YnKmio3U/s1600/borde_dotted.png" /></div></td></tr>
<tr> <td><code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">5px</font> <font color="#2dff7d">dashed</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code> </td><td><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuv0eJ6bDmplHWR6J4VuXtHmijBU4Vph0tAkFZRr4IUGDGjVVYxyDSLYwYsQN09HwIOcBixdB92J1T00J4DeKLeT5F_mCol4ZFuLn5G6eqNQE4lYdbfDXkDlpKC1zz0V_E2mj1WU81bq5F/s1600/borde_dashed.png" /></div></td></tr>
<tr> <td><code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">8px</font> <font color="#2dff7d">solid</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code> </td><td><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-dW6yJxgjcCqT6F7jmNtoDRC1D_exWZkl_nXEUiGnnzO7ZJo5UgWBvu2iDNv9sgMvfv__woROvkP__lZ6DW_ERJHF3QM9CDlbCG3yDXRJj9WXDO49suALUaS3nVTVA-llgoB3dXqYM8a/s1600/borde_solid.png" /></div></td></tr>
<tr> <td><code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">8px</font> <font color="#2dff7d">double</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code> </td><td><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigYqj0uHyqBx0QFpY-dbTNO22pMw1ma7GCPn34dxuxxWgJ4HZDGS8vQ5WlVczx_AmLpff8O1GX1L4NQIJ_XFQ-jZYRUE3l-BDbUVWpoc81NV51sf6TCIiuDVoyYHeAxO1iLzcU463GTWZ_/s1600/borde_double.png" /></div></td></tr>
<tr> <td><code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">8px</font> <font color="#2dff7d">groove</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code></td><td><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUuilps19qYY7tmeXrx54ztu1TgX_SJF6bYcovcFTveMRg6SSFsPNN5aWmLK2zwjQupRxz6W5Ev_NMemqPUdQm9XPyLw3UMsbrRBhtCE2FbwT6ihQbKtuiT5GTzW3feaQU7pCD7q0MnG5/s1600/borde_groove.png" /></div></td></tr>
<tr> <td><code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">8px</font> <font color="#2dff7d">ridge</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code></td><td><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZhfrXWflIdV9z_U0ANzBvYIhzzqunJtI1ZddCoZj0WRD4UkvrkYuJzRgfOuBKfyDit8czq40LH2HmbXkF55ZkudsIOxFKU2ycC4F3xlM3pD-0NfWT4wGOS09K1bH4STAC2Qm6j0sFp_S/s1600/borde_ridge.png" /></div></td></tr>
<tr> <td><code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">8px</font> <font color="#2dff7d">inset</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code></td><td><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmjTXGvM4ZoBjoXVvtE_50_gIuVVwZem6yDR_ucurr1gTHWOBq2hZPcJFLqQmWozB16doER_1iMwYHqa5PWyY_MDzqAz8R2OCO58poxoE4J1FW48Abs0poseaZs23Kn2JB9NZ_90dx5Db/s1600/borde_inset.png" /></div></td></tr>
<tr> <td><code>.post img, table.tr-caption-container {<br />
  padding: <font color="#fcff06">0px</font>;<br />
  border: <font color="#d361ff">8px</font> <font color="#2dff7d">outset</font> <font color="#ff506d">#fe4a4a</font>;<br />
}</code></td><td><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhte_C0KWOyS1BWc34ZKW4ZXmU5dBGwXntF5AbGen_XUg78xxgWiFxhiqlXw49L4FeDK88dhojlsNrqztIyG2V8RFjeX4xzXDlAd1nPsE2Y_6po4Y6L3F-kYvNMWp4Zdii5zZEADDmvt96-/s1600/borde_outset.png" /></div></td></tr>
</table><br />
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1f3CRG9" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1f3CRG9" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com14tag:blogger.com,1999:blog-6498596749076240896.post-78484600654022889002013-10-12T15:30:00.001-07:002014-12-14T07:26:28.805-08:00Efecto sombra para títulos de las entradas Blogger<table border="0" width="630px" cellpadding="5px"><tr> <td><br />
<div style="text-align:justify;"><p>Para darle un efecto de sombra a los títulos de las entradas vamos a <em>Editar HTML</em>:</p></div><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><ol><p>
<li>Localizamos la siguiente etiqueta, poniéndola dentro del rectángulo de búsqueda (search):</li>
</p><table border="1" width="110px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>]]></b:skin></code> </td> </tr>
</table><p>
<li>Inmediatamente antes pegamos el siguiente código:</li>
</p><table border="1" width="99%" cellpadding="5px" bgcolor="#194155"><tr> <td> <code>.post-title {<br />
  text-shadow: #58acfa <font color="#fcff06">6px</font> <font color="#d361ff">6px</font> <font color="#ff506d">2px</font>;<br />
}</code> </td> </tr>
</table><p>
<li><em>Vista previa</em> ► <em>Guardar plantilla</em></li>
</p></ol><div style="text-align:justify;"><p><b><em>Análisis del código:</em></b></p><ul><li>58acfa: es el código hexadecimal correspondiente al color asignado a la sombra. Le ponemos el nuéstro (códigos hexadecimales <a href="http://html-color-codes.info/codigos-de-colores-hexadecimales/" title="Códigos hexadecimales para colores" target="_blank">aquí</a>).</li>
<li><font color="#fcff06">6px</font>: asigna un margen vertical entre la sombra y el texto; a mayor número de pixeles más distancia entre la sombra y el texto. Anteponiéndole signo menos la sombra se proyectará a la izquierda del texto, sin signo, a la derecha.</li>
<li><font color="#d361ff">6px</font>: asigna un margen horizontal entre la sombra y el texto; a mayor número de pixeles más distancia entre la sombra y el texto. Anteponiéndole signo menos la sombra se proyectará encima del texto, sin signo, debajo.</li>
<li><font color="#ff506d">2px</font>: le asigna un aspecto difuminado (diluído, desvanecido, desdibujado) a la sombra; a mayor número de pixeles más difuminado (menos nitidez).</li>
</ul><p>Con el anterior código los títulos de las entradas se verán así:</p></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIdwKj20Bf4ql3SK3IbNh0RpNfTaG5TNFt915eWFlXpYw597x5YuJBxVuniqj5iDLWBrQ8EqRRbZ0o4ihg3gJEeg5IWNgPjJpF7VB2g46IHAWZMnj8LPBIOcUfqgLMwtG_6gOPM9Y7Bl-C/s1600/Efecto_sombra.png" title="Efecto sombra para títulos de las entradas"/></div><br />
<big><b>Otras formas de implementar el efecto sombra</b></big><br />
<div style="text-align:justify;"><p>Algunas plantillas, como la Simple, tienen integradas, en un mismo código CSS, las propiedades de los títulos de las entradas y los títulos de los comentarios; de ahí que si agregamos a ese código las propiedades que asignan el efecto sombra, adquirirán ese efecto tanto los unos como los otros. Veamos: </p><p>Vamos a <em>Editar HTML</em>:</p></div><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><div style="text-align:justify;"><p>Localizamos el código antes mencionado poniendo, en el cuadro de búsqueda (search), una línea del mismo:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>h3.post-title, .comments h4 {<br />
  font: $(post.title.font);<br />
  margin: .75em 0 0;<br />
}</code> </td> </tr>
</table><div style="text-align:justify;"><p>...y le agregamos la línea con las propiedades que asignan el efecto sombra, debiendo al código quedar así:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>h3.post-title, .comments h4 {<br />
  font: $(post.title.font);<br />
  margin: .75em 0 0;<br />
  text-shadow: #58acfa <font color="#fcff06">6px</font> <font color="#d361ff">6px</font> <font color="#ff506d">2px</font>;<br />
}</code> </td> </tr>
</table><div style="text-align:justify;"><p>Otras plantillas, como la Awesome inc., también tienen integradas, en un mismo código CSS, las propiedades de los títulos de las entradas y los títulos de los comentarios, con la diferencia que la etiqueta h4, asignada a los títulos de los comentarios puede ser usada para poner el efecto sombra a cualquier texto que queramos poner, con ese efecto, en cualquier entrada (en el editor HTML) o en gadgets HTML/JavaScript, teniendo en cuenta que los caracteres de esos textos tendrán el mismo tamaño que los de los títulos. Ese código es el siguiente:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>h3.post-title, h4 {<br />
  font: $(post.title.font);<br />
  color: $(post.title.text.color);<br />
}</code> </td> </tr>
</table><div style="text-align:justify;"><p>Para poner el efecto sombra le agregamos la misma línea que agregamos al código anterior.</p><p>Y para darles efecto sombra a textos en una entrada o en un gadget HTML/JavaScript, utilizando la etiqueta h4, debemos encerrar esos textos entre las etiquetas, así:</p></div><table border="1" width="170px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <h4>Aquí el texto</h4> </td> </tr>
</table><br />
<br />
<big><b>Efecto sombra para textos con etiquetas <h></b></big><br />
<div style="text-align:justify;"><p>Las etiquetas <h> son: <code><h1>...</h1></code>, <code><h2>...</h2></code>, <code><h3>...</h3></code>, <code><h4>...</h4></code>, <code><h5>...</h5></code> y <code><h6>...</h6></code>. A mayor número menor es el tamaño de los acracteres correspondientes al texto que encierran.</p><p>Habilitando en la plantilla el efecto sombra para las etiquetas <h> podemos poner, en entradas o en gadgets HTML/JavaScript, textos con ese efecto. Esa habilitación la hacemos así:<br />
</p></div><p>Vamos a <strong><em>Editar HTML</em></strong>:</p><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><div style="text-align:justify;"><p>Localizamos, poniéndola en el rectángulo de búsqueda, la siguiente etiqueta.</p></div><table border="1" width="110px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>]]></b:skin></code> </td> </tr>
</table><p>...e inmediatamente antes pegamos el siguiete código:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>h1, h2, h3, h4, h5, h6 {<br />
  text-shadow: #58acfa <font color="#fcff06">6px</font> <font color="#d361ff">6px</font> <font color="#ff506d">2px</font>;<br />
}</code> </td> </tr>
</table><div style="text-align:justify;"><p>(Para modificar el formato del efecto sombra tenemos en cuenta el "Análisis del código" hecho al principio del tutorial).</p><p>Con el anterior código en la plantilla, cualquier texto en una entrada o en un gadget HTML/JavaScritp puesto dentro de una de las etiquetas <h>, adquirirá el efecto sombra.</p><p>Debemos tener en cuenta lo siguiente:</p><ul><li>algunas etiquetas <h> asignan, dentro de la plantilla, formato a los diferentes títulos (de las entradas, de gadgets, de la sidebar, de los comentarios, etc.).</li>
<li>Habilitando el código con el efecto sombra para las etiquetas <h> ese efecto también lo adquirirán esos títulos.</li>
<li>También dentro de la plantilla algunas etiquetas <h> pueden tener un tamaño predeterminado diferente al que estas etiquetas asignan por defecto.</li>
</ul><p>Los tamaños que las etiquetas <h> asignan por defecto son los siguientes:</p></div><table border="0.2em" cellpadding="5px" width="610px" align="center" bgcolor="#173a4c"><tr> <td width="46%"><code><font color="#ffffff"><h1>Texto con efecto sombra</h1>:</font></code><br />
</td> <td width="54%"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPILgklzfRspqqrsWzF2aMUV3AskO7Sz-qZgSiBkyqXYg26nEEAbRqUog81BUliu8ILAMWIp4MkmJoXi_WJfSyIixX6-FB-7JT8_K1uNZSyw7dTecHdW-_ONEOGxsyfFGyHd7qC2U8WBw-/s1600/Sombra_h1.png" /></td> </tr>
<tr> <td><code><font color="#ffffff"><h2>Texto con efecto sombra</h2>:</font></code></td> <td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobQxgO6CKeJMqZqRaVzFrrR8EKP55JOtqQ4qkyxghMnU6VqN-lZoCmSoJNvZ1hqfSXhxAduTdOXuaHWWOpCQFlzES-fmjnUkr15WsOGny9YB8YZJ8lyG8ya8iZYgfnWYcTajhOm_ov-LC/s1600/Sombra_h2.png" /></td> </tr>
<tr> <td><code><font color="#ffffff"><h3>Texto con efecto sombra</h3>:</font></code></td> <td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL21-KDEfY9veOzH6V3s5SjXgnBr_eiZvUbOu8hJ7ZJFz6enV3F3ym5rkq5YxO-3r259_EH5wX-1fUlK4IAtmV90AlImq-scBFytYbiOAuw0qUiOmwqDzJE4e_8MBz0OD7ef-cb4j_96e1/s1600/Sombra_h3.png" /></td> </tr>
<tr> <td><font color="#ffffff"><code><h4>Texto con efecto sombra</h4></code>:</font></td> <td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxv6oW9nevaDfXWAD1-Zx6rj-9xR7-zV_mN9DI7nbPCRWbuOxJ-bL6o38mq3GkXEkW5O-CNnNKFGTE7o7-93oATksRGubVIQ2Aav_uRWagNMrifdliFQUoHjVhNVdX7imyvIPuqf3REgo3/s1600/Sombra_h4.png" /></td> </tr>
<tr> <td><code><font color="#ffffff"><h5>Texto con efecto sombra</h5>:</font></code></td> <td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcn6yRmMlBm9k8cUUXIE1o67DTnrDBp-S1ocT7cGiOtj7-0yAjN1Y2OYe1qTbg84NxDTpk3E0FOLvyW9zyTaWzAx-zwLRndN36BQqQcpVilZpGe7eeMpepbGlhyphenhyphen7gs7ixkOKjgMEIaF8CQ/s1600/Sombra_h5.png" /></td> </tr>
<tr> <td><code><font color="#ffffff"><h6>Texto con efecto sombra</h6>:</font></code></td> <td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9z5Qxu9pjwWiycU6PGZkIEQsnyQeqZ41CNt5wprhk1G7KtE_kblPotwhiyQKlGN0Nt_ytGVuuET2B6d8QjeQO0MJ-Nnp499eyArAY7uTJcH2G4GU9V6gBGWG-3ykAEE4PndXaHc1fwX8k/s1600/Sombra_h6.png" /></td> </tr>
</table><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1bylDKm" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1bylDKm" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-6498596749076240896.post-11982748220638882382013-10-07T14:18:00.000-07:002014-12-14T07:27:02.325-08:00Organizar etiquetas por secciones en Blogger<table border="0" width="630px" cellpadding="5px"><tr> <td><br />
<div style="text-align:justify";>Cuando en nuestro blog tratamos temas diferentes, para facilitar la búsqueda a los usuarios podemos organizar las etiquetas por secciones, así:<br />
</p></p>Vamos a:</p></div><table border="1" width="440px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> Página principal ► Diseño ► Diseño ► Añadir un gadget (en la sidebar) </td> </tr>
</table><div style="text-align:justify";><ul>...y añadimos tantos gadgets del tipo "Etiquetas"...</ul></div><div style="text-align:right;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieZ-voa6_FyDD-9xpBGNODgowh4tYgL_Xy8Fdsa7VFFT8DK9qpTOZyEIUl9kbexOTYprzxMeGNSsZvG_QYkXXj9cUGtv7WsincSRHSf9X9sKRLdTTRg_vfQStBKMMZhJ-EnCV_avkspQWe/s1600/etiquetas_secciones.png" /><br />
</div><ul>...cuantas secciones sean aquéllas en las que vamos a dividir el contenido del blog. </ul><div style="text-align:justify";><ul>A cada uno de los gadgets le damos la siguiente configuración: </ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9n5ikDiq4Molxo78yeFc59oas-9_GTLYd8Hkl5NWUKb6WwJb-Z5CxoIlXAGKWV7Q276qaYgnUCwn1IzbP-fonR2h4VqQIAR3YtBI6cAX80rup_npCrNExI4nI62GTyssiwuxbLw-2u0S3/s1600/etiquetas_secciones_3.png" /></div><div style="text-align:justify;"><ul><li>En <b><em>Título</em></b> ponemos el nombre del tema al que correspondan las entradas cuyas etiquetas aparecerán en cada gadget.</li>
<li>En <b><em>Selecciona las etiquetas que quieras que aparezcan</em></b> seleccionamos las etiquetas de las entradas correspondientes al tema de cada gadget.</li>
<li>Click en <b><em>Listo</em></b><br />
<li>Click enn <b><em>Guardar</em></b><br />
</ul>En cada gadget quedarán las etiquetas como las presenta Blogger, por defecto, con la configuración "Lista". Para darles una mejor configuración a los gadgets los personalizamos como se explica en <a href="http://bloguermast.blogspot.com/2013/03/personalizar-gadget-etiquetas-de-blogger.html" target="_blank">este turotial</a>. El código allí indicado personaliza todos los gadgets del tipo "Label" ("Etiqueta") que añadamos. </div></td> </tr>
</table><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://organizar-etiquetas-por-secciones.blogspot.com/"><img style="display:block; margin:0px auto 0px; text-align:center;cursor:pointer; cursor:hand;width: 120px; height: 40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDaSUuWQNx4jF4smX6VXLwyMHz6s1N0VuaZg-XJ_d1TOw4UWtH0OIqtyeD7xCnKyYC4fVcQy_hORYIPNCDSRIoLPfHx7dH4gT9TKRyE828a_sA7G0iL3mTz10mbKstArauICjl_hYcqo/s320/button_demo" border="0" alt="Etiquetas organizadas por secciones"title="Etiquetas organizadas por secciones"id="BLOGGER_PHOTO_ID_5564785591654580146" /></a> <table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1aMXvmo" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1aMXvmo" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-61275350008465260762013-10-05T11:17:00.001-07:002014-12-14T07:27:42.592-08:00Error 404 en Blogger, identificar, personalizar, solucionar<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> <div style="text-align: justify;">El error 404 se produce cuando los robots de los buscadores no pueden rastrear una URL ya que conduce a una entrada que no existe porque:</p><ol><li>la entrada fue eliminada, o</li>
<li>la URL fue mal escrita.</li>
</ol><p>Google dice: "Por lo general, los errores 404 no afectan a la posición que ocupa un sitio en los resultados de búsqueda, pero se pueden utilizar para mejorar la experiencia del usuario". No afectan la posición de un blog, en el caso de Blogger, pero sí el número de sus visitantes.</p><br />
<big><b>¿Por qué los errores 404 pueden disminuír el número de visitantes de un blog?</b></big><br />
<p>Porque si un usuario accede a un blog en busca de una entrada que no existe se va a encontar con este mensaje:</p></div><table border="1" width="350px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> La página que estabas buscando en este blog no existe. </td> </tr>
</table><div style="text-align:justify;"><p>Esta visita resulta fugaz e inútil, y muy posiblemente el visitante abandone el blog y no vuelva. Si hubiera encontrado lo que buscaba sería un muy probable visitante para otras oportunidades.</p><br />
<big><b>Personalizar el mensaje de error</b></big><br />
<p>El mensaje antes indicado no da ninguna alternativa al visitante. Podemos personalizarlo cambiándolo por otro más amable, y dándole, al usuario, la opción de ir a la página principal del blog.</p><p>Para personalizar el mensaje de error vamos a:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> Diseño ► Configuración ► Preferencias para motores de búsqueda ► Mensaje de página no encontrada personalizado ► Editar </td> </tr>
</table><div style="text-align:justify;"><p>En el área de texto escribimos el siguiente mensaje seguido del código que redirecciona a la página principal del blog:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> Discúlpenos, se ha presentado un inconveniente. En cinco segundos usted será redireccionado a la página principal del blog.<br />
<code><br />
<script type = "text/javascript"><br />
//Redireccion 404<br />
BSPNF_redirect = setTimeout(function() {<br />
location.pathname= "/"<br />
}, 5000);<br />
</script></code><br />
</td> </tr>
</table><div style="text-align:justify;"><p>El mensaje lo podemos cambiar. En el código 5000 corresponde a milécimas de segundo (cinco segundos); podemos modificar el tiempo de espera.</p><p>Veamos en funcionamiento la anterior personalización haciendo click sobre la siguiente URL correspondiente a una entrada inexistente en un blog y que redirecciona a la página principal del mismo:</p></div><div style="text-align:center;"><a href="http://pruebaredireccionar.blogspot.com/entrada-inexistente" title="Entrada inexistente en un blog" target="_blank">http://pruebaredireccionar.blogspot.com/entrada-inexistente</a><br />
</div><br />
<br />
<div style="text-align:justify;"><big><b>Prevenir errores 404</b></big><br />
<p>Los errores 404 prevenibles son los producidos por entradas eliminadas, y la forma obvia de prevenirlos es no eliminando entradas; es más conveniente redireccionarlas, para que las URLs de las mismas no lleven a ellas sino, por ejemplo, a la página principal del blog o a otra entrada.</p><p>Entonces, si queremos "desaparecer" una entrada de nuestro blog no la eliminamos sino que ponemos en el editor HTML de la misma el siguiente código:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><script><br />
location.href="<font color="#f06464">Aquí la URL de la página principal o de la entrada hacia la que queremos redireccionar</font>";<br />
</script></code> </td> </tr>
</table><br />
<div style="text-align:justify;"><p>De esta manera si alguien, desde un buscador, hace click en el enlace a la entrada que no queremos mostrar, será llevado, no a esa entrada, sino a la que la hemos redireccionado con el código anterior.</p><br />
<big><b>Identificar errores 404</b></big><br />
<p>Nuestro blog puede tener errores 404 sin que nosotros lo sepamos. Para saber si existen esos errores y poder identificarlos accedemos, con nuestra cuenta de Google a <a href="https://www.google.com/webmasters/tools" title="Herramientas para webmasters de Google" target="_blank">Herramientas para webmasters de Google</a>, añadimos nuestro blog haciendo click en la pestaña "Añadir un sitio" de la parte superior derecha y seguimos las instrucciones allí indicadas.</p><p>Añadido el blog:<br />
<ul><p>1. hacemos click sobre la imagen del mismo o sobre el enlace:</p></ul></div><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1asEzWC-oxBQYUqQhWQzLcgrc99yAHzH0a1R3VGUTwDNOdZLWEGVCPsMJfsqa82Ezo6kLfga744-F2aE0jKEw2Hs14Y8-_-uUQC6jrTKnEBG-BgwfYqwfFldWUP_AgceMYGt0Bcym4_ao/s1600/Error_404_1.png" /><br />
<div style="text-align:justify;"><ul><p>2. En el menú que aparece a la izquierda desplegamos el submenú "Rastreo" con un click sobre el mismo, a continuación click sobre "Errores de rastreo" y, por último, click sobre el cuadro que muestra el número de errores "No se encuentra", que son los errores 404.</p></ul></div><table border="0" width="610px" cellpadding="5px" align="center"><tr> <td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqzzIN3Q5OMzUEQp-MRSosjg-cByacfHspwKi6m7f2vPxIMa_dkan5jKrH5WH-SaS7_kVKbx0yiyLkrqicImgdoeY7U8lrhYIWW8wNBd6MDJhJaKVvOETYxGNTBcIatYs0bBZEMymXygS/s1600/Error_404_2.png" /></td><td>►</td><td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRC_fUeYY8-F7qNjntvRryUWD8ouIZGGB251pNGmwbkI6vO8q7tcm0C0R1c3aDyZL2h-5grSutKPundqO9nWRgxMPxVahstl0zwblSDbFvz06HyM42sQ09fSqlUUTrdrZ8yZKCLMyUslC/s1600/Error_404_3.png" /></td><td>►</td><td><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVWQARktq0JarCxZL2SYgcz4moScwQ_qDJDteWDEgolmD-jNzutISeoanauktLi0eMrzqJ7_nToQFNzvyKuRGiY6dasbRwkX7oNqg0QAAdJOxgKEYa1J4qXd2Kr0I6vZWFAwQHFXhVOC0/s1600/Error_404_4.png" /></td> </tr>
</table><div style="text-align:justify;"><ul><p>3. En la parte inferior aparecerán, en un cuadro estadístico y en una lista, los errores 404 detectados en los últimos 90 días.</p><p>4. Un click sobre cada URL de la lista nos mostrará un cuadro con la URL de la entrada que no pudo ser rastreada puesto que no existe, y los detalles del error.</p></ul><br />
<big><b>Solucionar errores 404</b></big><br />
<p>Los errores 404, producidos por entradas que han sido eliminadas, se pueden solucionar así:</p>Identificadas las URLs causantes de los errores, como ya se explicó, las reconstruímos creando entradas con URLs idénticas. Pongamos como ejemplo una URL como la siguiente:</p></div><table border="1" width="430px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> http://titulodelblog.blogspot.com/<font color="#ff7171">2013</font>/<font color="#ff7171">02</font>/<font color="#ff7171">titulo</font>-<font color="#ff7171">de</font>-<font color="#ff7171">la</font>-<font color="#ff7171">entrada</font>.html </td> </tr>
</table><div style="text-align:justify;"><p>Esta URL correspondería a una entrada creada en el segundo mes (<font color="#ff7171">02</font>) de <font color="#ff7171">2013</font>. Para reconstruír esa URL creamos una entrada con el título idéntico al que aparece en la misma reemplazando, obviamente, cada guión por un espacio. En cuanto a la fecha Blogger pone, por defecto, la del día en que se crea la entrada, entonces para que quede con la fecha que necesitamos la programamos en el menú "Configuración de la entrada" que está en el lado derecho del editor de la entrada, en Programar ► Establecer hora y fecha; allí modificamos el mes y el año, si es necesario; la hora y el día no afectan la URL.</p><p>En el editor HTML de la entrada ponemos, únicamente, el siguiente código:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><script><br />
location.href="<font color="#f06464">Aquí la URL de la página principal o de la entrada hacia la que queremos redireccionar</font>";<br />
</script></code> </td> </tr>
</table><div style="text-align:justify;"><p>Con lo anterior lograremos que cuando un usuario acceda a nuestro blog desde un buscador, a través de la URL de esa entrada que había sido eliminada, pero que reconstruímos, sea redireccionado a la página principal del blog, o a la entrada que hayamos escogido.</p></div></td> </tr>
</table><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/17gCRhn" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/17gCRhn" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table>Unknownnoreply@blogger.com11tag:blogger.com,1999:blog-6498596749076240896.post-68770293231402187722013-09-26T09:17:00.001-07:002014-12-14T07:28:11.629-08:00"Position: absolute" y "Position: relative" en Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> <div style="text-align:justify;">Veamos la diferencia que hay entre los valores "relative" y "absolute" aplicados a la propiedad "position", para posicionar elementos dentro de un blog:<br />
<br />
<br />
<big><b>Position: relative</b></big><br />
<p>Como su nombre los indica (relativo) posiciona un elemento, dentro del blog, en relación con los demás elementos del mismo, respetando los parámetros indicados en la plantilla.</p><br />
<big><b>Position: absolute</b></big><br />
<p>Como su nombre lo indica (absoluto) posiciona un elemento, dentro del blog, de manera absoluta es decir, sin tener en cuenta relación alguna con los demás elementos del blog, fuera del contexto del mismo.</p><br />
<big><b>Ejemplo</b></big><br />
<p>Vamos a mover la cabecera (header) del blog, poniéndole márgenes superior e izquierdo de 50 pixeles cada uno. La posición original de la cabecera es ésta:</p></div></td> </tr>
</table><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7nreEN_43rkjJp8BxX10mts2Hx3Wc512GhlcH2LdNZNyRTdUHFimWVoCGEgwH6G6p7I0C8L5n3JRz8HOzrJa22CPJdQZ3kMdwqhYcOKhhNBKl-AUKYj0HZHeCkni7JPmXwTWzIk27orf/s1600/position.png" /></div><p><table border="0" width="630px" cellpadding="5px"><tr> <td> <div style="text-align:justify;">Para darle una posición relativa pegamos en la plantilla, dentro de la sección CSS correspondiente a la cabecera, el siguiente código:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>.header-outer {<br />
   margin-left: 50px;<br />
   margin-top: 50px;<br />
   position: <font color="#f06464">relative</font>;<br />
}<br />
</code> </td> </tr>
</table><p>La cabecera quedará así:</p></td> </tr>
</table><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBgV1D04hTPHwgiydM1bG7j-o4_Mh3D-yNHevEIx9Vekthyfp5vYfSRPJlj947smcmFMqZcJh66crXJCB7MvI6p-S3WaAAcZaTsZAM9HEy0E2L1PGMDFN5FQBMmZ2j3HvKHtbir-fQlOgG/s1600/position_relative.png" /></div><table border="0" width="630px" cellpadding="5px"><tr> <td><div style="text-align:justify;"><ul><li>Como podemos observar la cabecera se desplaza posicionándose según los márgenes que le asignamos (izquierdo y superior), pero al mismo tiempo conserva el margen derecho, y los que tiene en relación con el cuerpo de las entradas y el gadget "Archivo del blog".</li>
<li>Es de anotar que esta posición la adquiere la cabecera por defecto, es decir aunque se omita del código la línea <code>position: <font color="#f06464">relative</font>;</code><br />
</ul><p>Para darle una posición absoluta utilizamos el mismo código anterior, pero cambiando el valor <font color="#fo6464"><code>relative</code></font> por el valor <font color="#fo6464"><code>absolute</code></font>. La cabecera quedará así: </p></div></td> </tr>
</table><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOq1Wdx7xSBv1SIYUGs-dFfCUCV33J5zSynpsknuL9n9TeR6QjxAHsZlYqV3g1V881mnY00N_psaUK1CpNAwIhlIyVSrJM4SnMg0D5QyQVj5zC8x57AOmL_jd0ArAU3Ica52pfGUI-qul/s1600/position_absolute.png" /></div><table border="0" width="630px" cellpadding="5px"><tr> <td><div style="text-align:justify;"><ul><li>La cabecera se desplaza según los márgenes que le asignamos pero sin tener en cuenta los demás parámetros: el margen derecho ni los que tenía en relación con el cuerpo de las entradas y con el gadget "Archivo del blog", saliéndose del contexto del mismo, como si estuviera sola. Se ajusta, además al ancho del título, que sí conserva, en relación con la cabecera, los márgenes asignados por defecto, ya que le dimos posición absoluta a la cabecera, nó al título. Obviamente que esta alternativa no es aplicable porque desconfigura el blog; se trata de explicar la diferencia entre "Position: absolute" y "Position relative":</li>
</ul><p>Si le ponemos a la cabecera un margen que supere al ancho del blog, con la posicion absoluta se saldrá del mismo. En el ejemplo le vamos a poner un margen izquierdo de 960 px utilizando este código:<br />
</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code>.header-outer {<br />
   margin-left: <font color="#f06464">960px</font>;<br />
   position: <font color="#f06464">absolute</font>;<br />
}<br />
</code> </td> </tr>
</table><p>Así se verá la cabecera:</p></td> </tr>
</table><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsZRbm4yat54Kr7dleYpxnDDjFCkOAvDJuADpVknGVjJ_EMFfX7ndISRjRABUJ5K1UfksK_QiQaKKwkwgvzNG3aEwSebN7Iqdq6DUDMbCPiyQVXVwYslFXIvevHkKRqzIE28ZMpoG0BmTs/s1600/position_absolute_1.png" /></div><table border="0" width="630px" cellpadding="5px"><tr> <td><div style="text-align:justify;"><p>Y si le ponemos ese mismo margen, pero con la posición relativa, la cabecera no se verá, y desplazará el contenido del blog hacia abajo ya que las letras del título del blog formarán, una debajo de otra, una línea vertical.</div><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/IclYux" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/IclYux" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-2237886379385166012013-07-28T06:46:00.000-07:002013-09-28T06:48:30.040-07:00Buscar un codigo en el nuevo editor<script>
location.href="http://bloguermast.blogspot.com/2013/07/nuevo-editor-html-de-blogger.html";
</script>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-55219519493128702432013-07-19T20:31:00.000-07:002014-12-14T07:29:12.173-08:00Nuevo editor HTML de Blogger<br />
<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td><div style="text-align: justify;">Usar el nuevo editor HTML de Blogger, según algunas inquietudes que se han recibido, representa cierta dificultad para algunos usuarios. <br />
<p>Veamos, a continuación, las especificaciones del nuevo editor y, al final, la manera de buscar una línea de código o un código dentro del mismo. Esta búsqueda, para los expertos puede ser muy sencilla, pero para los novatos, no.</p><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizaEoo1EXnRZV2CkA1bXBwByFcbCXhqoxyNTimCh8n-SUBSkmkl-mCD6qCJGm8GpBLf_z7glRlDBZLu30IrWAcYN6G52HTA9bhcFXdQr6fXXVQOSBxzwzF9mFwUEE62fdoSN3v_H7co6gT/s1600/Nuevo_editor_HTML.png" title="Nuevo editor HTML de Blogger" alt="Nuevo editor HTML de Blogger"/></div><p><big><strong>Pestañas</strong></big></p><ul><p>
<li><b><em>Atrás</em></b>: un click sobre esta pestaña nos saca del editor.</li>
</p><p>
<li><b><em>Guardar plantilla</em></b>: un click sobre esta pestaña guarda los cambios hechos en la plantilla.</li>
</p><p>
<li><b><em>Ir al widget</em></b>: un click sobre esta pestaña despliega una lista con las identificaciones de todos los widgets que tengamos en el blog...</li>
</p></div></ul><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga5kd6D8Oz89MNklBZQoz2LhH4gtpGQiJd7SviJGkXnKmnsLjav7GVnPtEofvTW1s5SY86RO5ezvSbYDaQ8HfWJ1IyxCIsBvoqrK_8DIGN0EEBOcgYpdWx_lveP-Ixv-WhPItVswqyhEEs/s1600/Ir_al_widget.png" title="Ir al código de un widget" alt="Ir al código de un widget"/></div><div style="text-align: justify;"><ul><p>...y un click sobre una de esas identificaciones nos llevará al código del widget correspondiente. Por ejemplo, si hacemos click sobre la identificación <b>Attribution1</b>, se nos presentará la línea con el código de ese widget...</p></ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGftBRzneyVvUx5IR0i_3HPlHWQj3SPaAFZrLqxSkH4mDqd0XZ8M8iMVPP2BsUDWf1dX2SuFnVP4_fvTIdld1uUys0EXa5rcZoVx126q72P4ovv8S2Sa_aFQk0sYugLfMnyNMS1ySkAvc9/s1600/Attribution1_1.png" title="Código widget Attribution" alt="Código widget Attribution"/></div><div style="text-align: justify;"><ul><p>...en la que podremos observar:</p><ul><li>Las etiquetas de apertura y de cierre del widget, mas nó su contenido.</li>
<li>Que el número correspondiente a la línea del código es el 1919, y el de la línea que le sigue es el 1936, lo que nos indica que el código del gadget <b>Attribution1</b> ocupa las líneas comprendidas entra la 1919 y la 1935, inclusive. </li>
<li>Una flecha al lado derecho del número. Un click sobre esa flecha desplegará el código, así:</li>
</ul></ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXaNuAs5gJQ-EQJGk5aG64fXUQQMqgBuVpVIr0-079swrfGylKlX0pLnD1iBjkgMCGP6KGk_ROiNIgzHewneX2iI8YaWnnaFd9ZQLxBYh8GMHzkGAqrRJOLdKk1wptDOCGUwmdKhYsH1lh/s1600/Attribution1_2.png" title="Código widget Attribution1" alt="Código widget Attribution1"/></div><div style="text-align: justify;"><ul><ul>...en donde aparece las líneas 1920 y 1935, pero nó las comprendidas entre los números 1921 y 1934, inclusive. Tendremos que hacer click sobre la flecha que aparece con el número 1920 para delplegar el código en su totalidad, que se verá así: </ul></ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgk2r59tyyMO-WIsGAbpeY0EKAe4fcySKrJkrMPfp7HSEPjEc7F3MvkIOKfomYQv6ehjhO_BIp-hSwpTRpXr3LW8focA0Gk4Mg2pof6Ubx8GmcPdRX1tyvSatnEnJFct5UfN-f8SxiQvsG/s1600/Attribution1_3.png" title="Código widget Attribution1" alt="Código widget attribution1"/></div><div style="text-align:justify;"><ul><ul><p>Obviamente la numeración de las líneas correspondientes al widget <b>Attribution1</b> no debe ser igual en todas las plantillas. Se trata de un ejemplo. <p>Lo anteriormente explicado aplica para los códigos de los demás widgets y también para los de las secciones que, como en el código del ejemplo, no se encuentren expandidos en el formato, por defecto, de la plantilla. Y para buscar una línea de código o un código que, dentro de ellos estén ocultos, no es necesario realizar todo este procedimiento ya que, como veremos más adelante, el buscador lo localizará expandiendo el artilugio correspondiente. Esta explicación es meramente ilustrativa.</p></ul></ul><ul><p>
<li><b><em>Editar plantilla</em></b>: un click sobre esta pestaña nos volverá al código de la plantilla cuando estemos en <em>Vista previa de la plantilla</em>.</li>
</p><p>
<li><b><em>Vista previa de la plantilla</em></b>: un click sobre esta pestaña nos mostrará el blog, dentro del mismo editor, reflejando los cambios que le hayamos hecho a la plantilla.</li>
</p><p>
<li><b><em>Plantilla de formato</em></b>: un click sobre esta pestaña ordenará el código HTML, incluyendo las adiciones, eliminaciones y modificaciones que le hayamos hecho. Esa ordenación quedará con el formato de <a href="http://es.wikipedia.org/wiki/Indentaci%C3%B3n" title="Indentación" target="_blank">indentación</a> o sangría.<br />
</li>
</p><p>
<li><b><em>Revertir los cambios</em></b>: un click sobre esta pestaña deshará los cambios que hayamos hecho al editar el código HTML.</li>
</p><p>
<li><b><em>Restablecer plantillas de artilugios a los valores predeterminados</em></b>: un click sobre esta pestaña producirá el efecto en ella indicado..</li>
</p></ul><br />
<p><strong><big>Buscar dentro del editor HTML</big></strong></p><p><b>Para buscar una línea de código:</b></p><ul><li>Ponemos el cursor del mouse dentro del editor y hacemos click.</li>
<li>Digitamos <b>Ctrl + F</b>. Con esto activaremos el rectángulo de búsqueda que tiene integrado el editor:</li>
</ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNp-Dug_BcEt3RYsqgimKctsl7gqr30L-ZO5sXCIMGFdH4z5T21mA3Pj8FjVmH8qohl6qDgvraQ0Vcy-30BovRMGq4jNrNd0_4B4Dr_ZzNuSj3dl-UgtvbJ5NHBS_GsPMghdr-8ER2Br0f/s1600/Nuevo_editor_HTML_3.png" title="Nuevo editor HTML de Blogger" Alt="Nuevo editor HTML de Blogger"/></div><div style="text-align:justify;"><ul><li>Introducimos en el rectángulo de búsqueda la linea de código a buscar y damos <b>Enter</b>. El buscador localizará la línea de código; si ésta se encuentra oculta dentro de un artilugio el buscador la localizará expandiendo el artilugio correspondiente.</li>
</ul><p><b>Para reemplazar una línea de código:</b></p><ul><li>Después de hacer click con el cursor del mouse dentro del editor, digitamos <b>Ctrl + Shift + F</b>. Con esto el rectángulo de búsqueda se activará así:</li>
</ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHjjmQJ_-dieffSotRuVMzVDhQMyy4ok6SeQfDaK3TX6uWXjuSxDjnTR82Tfq4xgTS2YJWUjLET-YUAJscU2Q1BiyZWASFfdfJoBLPApbgnLNfJL-omxenqzZcLPM5zV8FGLHnAy11IUE/s1600/Buscador_HTML_4.png" Title="Buscador en el editor HTML" alt="Buscador en el editor HTML"/></div><div style="text-align:justify;"><ul><li>Introducimos, en el rectángulo de búsqueda, la línea de código a reemplazar y damos <b>Enter</b>. El buscador nos pedirá la línea de código reemplazante:</li>
</ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7IyuTSM4-tJ7xKfX5XD10mg96sCK4rasllMWVUi0cWRKlsDM01e8yKNHKcTrFAvFf8njzGYqSTugoxJeETDI0BU6OLojrq6ApVvrMWVZwhI8MMzXitvotmp_xnkTCXy-O7eMHegJHjvn0/s1600/Buscador_HTML_5.png" title="Buscador en el editor HTML" alt="Buscador en el editor HTML"/></div><div style="text-align:justify;"><ul><li>Introducimos la línea de código reemplazante y damos <b>Enter</b>. El buscador nos pedirá confirmar el reemplazo:</li>
</ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoO4964QQCo_MjCrguuuoCVDoIiQfYorB9m7CWNrDVE0sH1HljSHSA1qrMsZ-6Xh6yJW2iDoJvwxZBh1oK6_9RfjoUgWXk_L8rnECaT3CG64X3oFn5eRpSZclfjk79nK1D1Woz1iakVCvg/s1600/Buscador_HTML_6.png" title="Buscador en el editor HTML" alt="Buscador en el editor HTML"/></div><div style="text-align:justify;"><ul><li>Hacemos click en <b>Yes</b> y la línea de código será reemplazada automáticamente.</li>
</ul><p><b>Para reemplazar una línea de código repetida:</b></p><ul><li>Después de hacer click con el cursor del mouse dentro del editor, digitamos <b>Ctrl + Shift + R</b>. Con esto el rectángulo de búsqueda se activará así:</li>
</ul></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpTVAxP_K5_VEUDTpT1XRae2wSUfl44muUrqVduWoCYLwT1xjh5yo-bwGEKEu_13l85a9ioA6pqhyphenhypheni4Ynbeb5VwFtYwXlPf7bFJVTGtkoyPik29Omva7tie5OPkx6uMRqbhUuR16RAP_0V/s1600/Buscador_HTML_7.png" title="Buscador en el editor HTML" alt="Buscador en el editor HTML"/></div><div style="text-align:justify;"><ul><li>Introducimos la línea de código repetida a reemplazar y damos <b>Enter</b>. La línea quedará resaltada en color amarillo todas las veces que se encuentre, y el buscador nos pedirá la línea de código que la va a reemplazar; la introducimos y damos <b>Enter</b>. La línea de código será reemplazada automáticamente, todas las veces que se encuentre.</li>
</ul></div><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/19zhWTo" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/19zhWTo" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-6498596749076240896.post-14398758824079689542013-07-11T15:03:00.001-07:002014-12-14T07:30:04.045-08:00Contraseña de acceso a entradas Blogger<table border="0" width="100%" cellpadding="5px"><tr> <td> <br />
Podemos restringir el acceso a una(s) entrada(s) de nuestro blog habilitando un formulario de acceso con contraseña, así: </p><p>1.- Cuando creemos la entrada, en el editor de<b><i> HTML</i></b>... </p><div class="separator" style="clear: both; text-align: center;"><img title="Crear entrada en editor HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO6Kdpo3nBHYJX7U3QIrGXWUUSuWuUveikyTReXXN56-9FrOqFX8RNFqEsBn1ggavJjgTyjHmlHKF8rBhpk0qc52Emlj6ZsCpZDHbVulVDH_CiEFo5fpVZHTHF35TP-AvutyuuBhW0kBs_/s1600/Crear_entradas.png" alt="Crear entrada en edotor HTML"/></div><p>...pegamos, antes del texto de la misma, el siguiente Script: </p><table border="1" width="100%" cellpadding="5px" bgcolor="#194155"><tr> <td> <code> <Script languaje="javascript"><br />
  var getin = prompt("Necesitas una contraseña para acceder a esta entrada.")<br />
  if (getin!="<font color="#fe5858">Aquí la contraseña</font>")<br />
  {location.href='<font color="#ffff00">URL de página anunciando error</font>'}<br />
  else<br />
  {alert('Contraseña correcta, acepta para ingresar')}<br />
</Script> </code> </td> </tr>
</table><div align="justify"><ul><li>En <font color="#fe5858"><code>Aquí la contraseña</code></font> ponemos el número de la contraseña.<br />
<li>Cuando la contraseña anotada en el formulario no es la correcta, el Script nos rediccionará a la página cuya URL debemos poner en <font color="#ffff00"><code>URL de página anunciando error</code></font>. </ul><p>2.- Para crear la página con el anuncio de <b><i>Error</i></b> tenemos dos opciones: <p><ul><li>Crear una entrada con el texto en donde anunciamos el error. Esta alternativa no es aconsejable porque, mientras no creemos más entradas, ésta, en la que anunciamos el error, se verá en la página principal, lo cual no es nada estético.<br />
<li>Crear un nuevo blog (en Blogger podemos crear todos los blogs que queramos) con una única entrada, que es la que va a contener el texto con el anuncio de <b><i>Error</i></b>. La URL de este blog es la que debemos poner en <font color="#ffff00"><code>URL de página anunciando error</code></font>. Esta opción es la ideal. </ul>Si son varias las entradas con acceso restringido, ponemos en cada una el Script (véase punto 1), y creamos en el nuevo blog una entrada con el anuncio de error por cada entrada, del blog principal, con acceso restringido, y en <font color="#ffff00"><code>URL de página anunciando error</code></font> ponemos la URL de la entrada respectiva. <p>En este último caso, en el que debamos crear varias entradas con anuncio de error en el nuevo blog, debemos habilitar, en el mismo <strong><em>Mostrar un máximo de 1 entrada en la página principal</em></strong>: <table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td>Diseño ► Configuración ► Entradas y comentarios ► Mostrar un máximo de 1 entrada en la página principal</td> </tr>
</table><p>Lo anterior con el fin de evitar que nos aparezcan, en la entrada principal del nuevo blog, varios anuncios de error. </p><p>3.- En la entrada que va a contener el anuncio de error, y a la que no le pondremos título, ponemos, en el editor de <strong><em>HTML</em></strong>, el siguiente código:</p></div><table border="1" width="100%" cellpadding="5px" bgcolor="#194155"><tr> <td> <code> <p><br />
<center><br />
<b>¡¡Contraseña errada!! Regresa, haciendo click sobre la flecha, e inténtalo de nuevo.</b><br />
<p><br />
<a href="<font color="#fe5858">URL de la entrada con acceso restringido</font>"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 47px;" src="<font color="#ffff00">http://www.clker.com/cliparts/e/a/7/a/1194985593422726425arrow-left-blue_benji_pa_01.svg.thumb.png</font>" border="0" alt="Intentar de nuevo" title="Intentar de nuevo"/></a><br />
</center> </code> </td> </tr>
</table><ul><li>En <font color="#fe5858"><code>URL de la entrada con acceso restringido</code></font> ponemos la URL de la entrada a la que debemos acceder con contraseña.<br />
<li><font color="#ffff00"><code>http://www.clker.com/cliparts/e/a/7/a/1194985593422726425arrow-left-blue_benji_pa_01.svg.thumb.png</code></font> es la URL de la imagen (flecha), que puede ser cambiada. </ul><p>Esta entrada se verá así: <p><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 600px; height: 168px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikaaSzzgoZzYwUTPQHuix_EHSWRLjUdutrnbXRvoruap9KVmnF2GJt3H_hKssiCuduLAdukA5f7-n12YWZI84myJVRzUamlMCW9H905FoZfcMYOI4Ai_9nSO_B2_RgCnH4WIo7lw24QQ/s1600/Contrase%25C3%25B1a_post.png" border="0" alt="Regresar a poner contraseña correcta" title="Regresar a poner contraseña correcta"/> <p><p>En el <b><i>Demo</i></b> vamos a utilizar esta clave: <b><i>12345</i></b>. Probemos utilizando la clave correcta y otra incorrecta: </p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bloguermast2.blogspot.com/2011/02/contrasena-de-acceso-una-entrada-del_23.html"><img style="display:block; margin:0px auto 0px; text-align:center;cursor:pointer; cursor:hand;width: 120px; height: 40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDaSUuWQNx4jF4smX6VXLwyMHz6s1N0VuaZg-XJ_d1TOw4UWtH0OIqtyeD7xCnKyYC4fVcQy_hORYIPNCDSRIoLPfHx7dH4gT9TKRyE828a_sA7G0iL3mTz10mbKstArauICjl_hYcqo/s320/button_demo" border="0" alt="Contraseña para acceder a una entrada"title="Contraseña de acceso a una entrada del blog "id="BLOGGER_PHOTO_ID_5564785591654580146" /></a> <p>Como vimos en el demo, una vez introducida la contraseña correcta aparecerá un mensaje como éste:</p><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PjLyRiwpog3Im0hB6YgcDgeWQ3sV-2UQ0h67VXCYWgjJSQZ2FOsidqAF8CQzD7BSYo06nS2viAUN4e4AxLDBNFeWKIamR8nyiUOJWyUfgO6e3ZCmHwp8DzRzU9D8kJZwXJuZLW0PpNvL/s1600/Contrase%C3%B1a_post_2.png" /></div><div style="text-align:justify;"><p>...que dependiendo del navegador, puede contener o nó la segunda la línea <strong><em>"Evita que esta página cree cuadros de diálogos adicionales"</em></strong>. Esta clase de mensajes suele crear desconfianza. Si queremos que este cuadro no aparezca, sino que, introducida la contraseña correctamente, se acceda directamente a la entrada, eliminamos del código del punto 1 estas líneas:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>  else<br />
  {alert('Contraseña correcta, acepta para ingresar')}</code></td> </tr>
</table><p> </p><b><big>Poner más de una contraseña</big></b></p><div style="text-align:justify;"><p>Si necesitamos poner más de una contraseña en una entrada con acceso restringido, ponemos, en el código del punto 1, la siguiente línea:</p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code>  if (getin!="<font color="#fe5858">Aquí la contraseña</font>")</code></td> </tr>
</table><p>...tantas veces cuantas contraseñas necesitemos poner. En este caso el cuadro indicado arriba, con el mensaje del blog, en caso de que lo dejemos habilitado, aparecerá únicamente con la última contraseña.</p><p> </p><b><big><i>Nota</big></b></i> <p><div style="text-align:Justify;">La contraseña se nos exigirá cuando queramos ingresar a la(s) entrada(s) con acceso restringido, pero también se nos exigirá para ingresar a la página principal cuando en ésta haya varias entradas y entre las mismas esté una entrada con acceso restringido. </p></div><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1b25dyV" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1b25dyV" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com24tag:blogger.com,1999:blog-6498596749076240896.post-3510278699435188662013-07-05T09:03:00.001-07:002014-12-14T07:30:42.633-08:00Numerar los comentarios en Blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> Para numerar los comentarios:<br />
<p>1. vamos a:</p><table border="1" width="610px" align="center" bgcolor="#194155"><tr> <td> Diseño </td> <td> ► </td><td>Plantilla</td> <td> ► </td> <td>Editar HTML </td> <td> ► </td> <td> Click dentro del editor </td> <td> ► </td><td>Ctrl+f</td> <td> ► </td> <td align="center"><a href="#" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4h6EanZgWRGNDsTkktyMkL4eqvIpEOomRRHjL-G3CWB9Xfm01AgGeAY3RvYX6W8t2XX55AYr7bdsFRQr15vpCE431V7OY_VyGihO5pjz8aPDJi1wVxfLzWaAULj3V9yRQiQCzeP8bfex/s1600/Buscador_HTML_3.png" /></a><br />
</td> </tr>
</table><p>2. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><div expr:id='data:widget.instanceId + "_comments-block-wrapper"'><br />
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'><br />
        <font color="#ff6060"><script type='text/javascript'>var CommentsCounter=0;</script></font><br />
          <b:loop values='data:post.comments' var='comment'><br />
            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'><br />
              <b:if cond='data:comment.favicon'><br />
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br />
              </b:if></code><br />
</td> </tr>
</table><p>3. Dentro del anterior código agregamos la <font color="#ff6060">línea resaltada</font>.</p><p>4. Un poco más abajo del anterior código localizamos el siguiente:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><b:if cond='data:comment.authorUrl'><br />
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br />
              <b:else/><br />
                <data:comment.author/><br />
              </b:if></code><br />
</td> </tr>
</table><p>5. A continuación pegamos éste:</p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><span class='numberingcomments' style='float: right; font-size: <font color="#ff6060">16px</font>; color:<font color="#ff6060">#ffffff</font>'><br />
<a rel='nofollow' style='text-decoration:none' title='Comment Link'><font color="#ff6060">#</font><br />
<script type='text/javascript'><br />
CommentsCounter=CommentsCounter+1;<br />
document.write(CommentsCounter);<br />
</script><br />
</a><br />
</span></code><br />
</td> </tr>
</table><ul>Las partes <font color="#ff6060">resaltadas</font> (tamaño de los caracteres, color y numeral), pueden ser cambiadas.</ul><p>6. Guardar plantilla.</p><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/1f7S759" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/1f7S759" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6498596749076240896.post-35024262459672815742013-06-25T12:04:00.000-07:002014-12-14T07:31:17.483-08:00Tamaño de imágenes subidas a blogger<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> Ahora blogger da, para las imágenes subidas, la posibilidad de escoger entre cinco tamaños, así:<br />
<br />
Una vez elegido el archivo del equipo, y añadida la imagen seleccionada...<br />
<br />
<div style="text-align:center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHf_7ZCf0S48ejMsnm7fCTdvpT18TSKzYleMEQNH70GjmyHnSQmhDjSB0RZpyakaNsg6XqGgMl3RPKRIAINAY8AU_dec5zsSI3bFn0nAe4U6CZrJn0VsRdUm9XEkKa2gSuzUGweUqjkk-/s1600/Subir_imagenes_1.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHf_7ZCf0S48ejMsnm7fCTdvpT18TSKzYleMEQNH70GjmyHnSQmhDjSB0RZpyakaNsg6XqGgMl3RPKRIAINAY8AU_dec5zsSI3bFn0nAe4U6CZrJn0VsRdUm9XEkKa2gSuzUGweUqjkk-/s1600/Subir_imagenes_1.png" alt="Subir imagen" title="Subir imagen"/></a><br />
</div><br />
...se nos presenta el cuadro con las opciones de diseño: <p><ul><li>Alineación de la imagen<br />
<li>Tamaño de la imagen<br />
</ul><div style="text-align:center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQZRj8brBM0k22OqvqC1Ms4qxWPKPycHQBeWw011okjzcloN_uS2oUti81BwDf24zjxvQD4gx07h-qmNG9u-GfuLdbHo7FlR4BBc88kSP9Hwu7mc3DX9fINjGgjAcMqwy1zv1uBFpxZMt/s1600/Subir_imagenes_2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQZRj8brBM0k22OqvqC1Ms4qxWPKPycHQBeWw011okjzcloN_uS2oUti81BwDf24zjxvQD4gx07h-qmNG9u-GfuLdbHo7FlR4BBc88kSP9Hwu7mc3DX9fINjGgjAcMqwy1zv1uBFpxZMt/s1600/Subir_imagenes_2.png" alt="Opciones de diseño para imagen subida" title="Opciones de diseño para imagen subida"/></a> </div><p><div style="text-align: justify;">Nos ocuparemos del tamaño (la alineación es obvia), tomando como ejemplo una imagen cuyas medidas originales son: ancho (width): 387px, y alto (height): 142px. <p>Subida la imagen, en el Editor HTML de la entrada correspondiente se genera un código que, dependiendo del tamaño escogido, será como uno de los siguientes: </div><p>Para la opción <strong><em>pequeño</em></strong>: <p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><a href="<font color="#ff4040">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8vGPD1c0mC_I81QJomijet8xallHooqmldBYu5dXZIqU88psfuyUs_rc50Ey8BQJWzLDwl5wdRHYLpYocy2ycCE8DIab2-04CGD7PJJUWOOyKWcNmUHcup3eShcdLO37VB0o20gQg_HRR/<font color="#E690FF">s1600</font>/</font><font color="#fff000">Blogger.png</font>" <font color="#00ff00">imageanchor="1"</font>><<font color="#58faf4">img border="0"</font> src="<font color="#ff4040">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8vGPD1c0mC_I81QJomijet8xallHooqmldBYu5dXZIqU88psfuyUs_rc50Ey8BQJWzLDwl5wdRHYLpYocy2ycCE8DIab2-04CGD7PJJUWOOyKWcNmUHcup3eShcdLO37VB0o20gQg_HRR/<font color="#E690FF">s200</font>/</font><font color="#fff000">Blogger.png</font>"/></a> </code><br />
</td> </tr>
</table><p>Ésta es la imagen: <div style="text-align:center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8vGPD1c0mC_I81QJomijet8xallHooqmldBYu5dXZIqU88psfuyUs_rc50Ey8BQJWzLDwl5wdRHYLpYocy2ycCE8DIab2-04CGD7PJJUWOOyKWcNmUHcup3eShcdLO37VB0o20gQg_HRR/s1600/Blogger.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8vGPD1c0mC_I81QJomijet8xallHooqmldBYu5dXZIqU88psfuyUs_rc50Ey8BQJWzLDwl5wdRHYLpYocy2ycCE8DIab2-04CGD7PJJUWOOyKWcNmUHcup3eShcdLO37VB0o20gQg_HRR/s200/Blogger.png" alt="Logotipo de Blogger" title="Logotipo de Blogger"/></a> </div></p><div style="text-align:justify;"><ul><li><font color="#E690FF"><code>s1600</code></font> indica que 1.600 pixeles es la máxima medida con que se muestra la imagen en la versión imagen ancla (abajo se explica), en su dimensión más larga (en este caso es el ancho). Como en este caso la dimensión más larga es de 387 pixeles, así se mostrará la imagen. Ésta no es la imagen que aparece en la entrada.<br />
<li><font color="#E690FF"><code>s200</code></font> indica que la imagen se muestra hasta con un máximo de 200 pixeles en su dimensión más larga (en este caso es el ancho); la otra dimensión se adapta automáticamente. Es la imagen que aparece en la entrada. Un click sobre la imagen llevará a la imagen ancla.<br />
</ul></div>Para la opción <strong><em>Mediano</em></strong>: <p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><a href="<font color="#ff4040">http://2.bp.blogspot.com/-<br />
Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/<font color="#E690FF">s1600</font>/</font><font color="#fff000">Blogger.png</font>" <font color="#00ff00"> imageanchor="1"</font>><br />
<<font color="#58faf4">img border="0"</font> src="<font color="#ff4040">http://2.bp.blogspot.com/-<br />
Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/<font color="#E690FF">s320</font>/</font><font color="#fff000">Blogger.png</font>"/></a> </code><br />
</td> </tr>
</table><p>Ésta es la imagen: <div style="text-align: center;"><a href="http://2.bp.blogspot.com/-
Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/s1600/Blogger.png" imageanchor="1"> <img border="0" src="http://2.bp.blogspot.com/-
Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/s320/Blogger.png" alt="Logotipo de Blogger" title="Logotipo de blogger"/></a> </div><p><div style="text-align:justify;"><ul><li><font color="#E690FF"><code>s1600</code></font> indica que 1.600 pixeles es la máxima medida con que se muestra la imagen en la versión imagen ancla (abajo se explica), en su dimensión más larga (en este caso es el ancho). Como en este caso la dimensión más larga es de 387 pixeles, así se mostrará la imagen. Ésta no es la imagen que aparece en la entrada.<br />
<li><font color="#E690FF"><code>s320</code></font> indica que la imagen se muestra hasta con un máximo de 320 pixeles en su dimensión más larga (en este caso es el ancho); la otra dimensión se adapta automáticamente. Es la imagen que aparece en la entrada. Un click sobre la imagen llevará a la imagen ancla.<br />
</ul></div>Para la opción <strong><em>Grande</em></strong>: <p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><a href="<font color="#ff4040">http://2.bp.blogspot.com/-<br />
7hwa1TH5epM/UciSJEMzJ7I/AAAAAAAACA8/6jpRa86O5ws/<font color="#E690FF">s1600</font>/</font><font color="#fff000">Blogger.png</font>" <font color="#00ff00"> imageanchor="1"</font>><br />
<<font color="#58faf4">img border="0"</font> src="<font color="#ff4040">http://2.bp.blogspot.com/-<br />
7hwa1TH5epM/UciSJEMzJ7I/AAAAAAAACA8/6jpRa86O5ws/<font color="#E690FF">s400</font>/</font><font color="#fff000">Blogger.png</font>"/></a> </code><br />
</td> </tr>
</table><p>Ésta es la imagen: <div style="text-align: center;"><a href="http://2.bp.blogspot.com/-
7hwa1TH5epM/UciSJEMzJ7I/AAAAAAAACA8/6jpRa86O5ws/s1600/Blogger.png" imageanchor="1"> <img border="0" src="http://2.bp.blogspot.com/-
7hwa1TH5epM/UciSJEMzJ7I/AAAAAAAACA8/6jpRa86O5ws/s400/Blogger.png" alt="Logotipo de Blogger" title="Logotipo de Blogger"/></a> </div><p><div style="text-align:justify;"><ul><li><font color="#E690FF"><code>s1600</code></font> indica que 1.600 pixeles es la máxima medida con que se muestra la imagen en la versión imagen ancla (abajo se explica), en su dimensión más larga (en este caso es el ancho). Como en este caso la dimensión más larga es de 387 pixeles, así se mostrará la imagen. Ésta no es la imagen que aparece en la entrada.<br />
<li><font color="#E690FF"><code>s400</code></font> indica que la imagen se muestra hasta con un máximo de 400 pixeles en su dimensión más larga (en este caso es el ancho); como la dimensión más larga de la imagen original es de 387 pixeles, así se mostrará la imagen. Es la imagen que aparece en la entrada, y que, en este caso, es igual a la imagen ancla. Un click sobre la imagen llevará a la imagen ancla.<br />
</ul></div>Para la opción <strong><em>Extra grande</em></strong>: <p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><a href="<font color="#ff4040">http://1.bp.blogspot.com/-<br />
20RCg5bzoJc/UciSYlfXfKI/AAAAAAAACBE/WUMhtviQzCA/<font color="#E690FF">s1600</font>/</font><font color="#fff000">Blogger.png</font>" <font color="#00ff00"> imageanchor="1"</font>><br />
<<font color="#58faf4">img border="0"</font> src="<font color="#ff4040">http://1.bp.blogspot.com/-<br />
20RCg5bzoJc/UciSYlfXfKI/AAAAAAAACBE/WUMhtviQzCA/<font color="#E690FF">s640</font>/</font><font color="#fff000">Blogger.png</font>"/></a> </code><br />
</td> </tr>
</table><p><div style="text-align: justify;"><ul><li><font color="#E690FF"><code>s640</code></font> indica que la imagen se muestra hasta con un máximo de 640 pixeles en su dimensión más largas (en este caso es el ancho); como la dimensión más larga de la imagen original es de 387 pixeles, así se mostrará la imagen. Es la imagen que aparece en la entrada, y que, en este caso es igual a la imagen ancla. Un click sobre la imagen llevará a la imagen ancla.<br />
</ul></div>Para la opción <strong><em>Tamaño original</em></strong>: <p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><a href="<font color="#ff4040">http://1.bp.blogspot.com/-<br />
g9nVF2pQ6Fs/UciSyvCkUPI/AAAAAAAACBM/d47z3xFZPvY/<font color="#E690FF">s1600</font>/</font><font color="#fff000">Blogger.png</font>" <font color="#00ff00"> imageanchor="1"</font>><br />
<<font color="#58faf4">img border="0"</font> src="<font color="#ff4040">http://1.bp.blogspot.com/-<br />
g9nVF2pQ6Fs/UciSyvCkUPI/AAAAAAAACBM/d47z3xFZPvY/<font color="#E690FF">s1600</font>/</font><font color="#fff000">Blogger.png</font>"/></a> </code><br />
</td> </tr>
</table><p><div style="text-align: justify;"><ul><li><font color="#E690FF"><code>s1600</code></font>, en las dos imágenes, indica que ambas se mostrarán en su tamaño original, siempre y cuando no excedan los 1.600 pixeles en su dimensión más larga. En este caso la imagen se mostrará con sus medidas originales: 387px de ancho y 142 pixeles de alto.<br />
</ul></div><p> </p><b><big>Análisis del código</big></b> <p><div style="text-align: justify;">Tomamos como referencia el código correspondiente a la opción <strong><em>Mediano</em></strong>, y tenemos en cuenta los mismos parámetros para los otros códigos: <p>El código contiene, a su vez, los códigos de dos imágenes, así: <p>1. <b>Imagen ancla</b>: <p></div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><a href="<font color="#ff4040">http://2.bp.blogspot.com/-<br />
Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/<font color="#E690FF">s1600</font>/</font><font color="#fff000">Blogger.png</font>" <font color="#00ff00"> imageanchor="1"</font>> </code></td> </tr>
</table><p><div style="text-align:justify;"><ul><li>Es la imagen en su versión original, con un límite de 1.600 pixeles en su dimensión más larga, y punto de destino del link o enlace que es la segunda imagen.<br />
<li>Los resaltados en <font color="#ff4040"><code>este color</code></font>, y en <font color="#E690FF"><code>éste</code></font> conforman la URL de la imagen en su versión original, que no es la que aparece en la entrada. <br />
<li><font color="#E690FF"><code>s1600</code></font> indica la medida en pixeles (1.600px) de la dimensión más larga permitida (ancho o alto, o ambas cuando la imagen es cuadrada) de la imagen, en su versión original. La dimensión más corta se adapta, por defecto, guardando la proporción. Es decir, que si la dimensión más larga sobrepasa los 1.600 pixeles, la imagen quedará anclada con 1.600 pixeles en su dimensión más larga; y si la dimensión más larga es menor que 1.600 pixeles, quedará anclada con sus medidas originales. <br />
<li>El resaltado en <font color="#fff000"><code>este color</code></font> es el nombre o título, y el formato de la imagen. <br />
<li>El resaltado en <font color="#00ff00"><code>este color</code></font> indica que la URL de esta sección corresponde a una imagen ancla (las anclas son referencias que se emplean, en una página, con el fin de ser el punto de destino de un link). </ul></div><p>2. <b>Imagen link o enlace</b>: <p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><<font color="#58faf4">img border="0"</font> src="<font color="#ff4040">http://2.bp.blogspot.com/-<br />
Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/<font color="#E690FF">s320</font>/</font><font color="#fff000">Blogger.png</font>"/></a></code> </td> </tr>
</table><p><div style="text-align:justify;"><ul><li>Es la imagen que sirve de enlace con la primera. Es decir, que un click sobre esta imagen lleva a la imagen ancla.<br />
<li>El resaltado en <font color="#58faf4"><code>este color</code></font> impide que se muestre un borde que algunos navegadores crean, por defecto, en toda imagen que sea un enlace o link (esta imagen lo es). <br />
<li>Los resaltados en <font color="#ff4040"><code>este color</code></font> y <font color="#E690FF"><code>éste</code></font>conforman la URL de la imagen como la presenta Blogger en la entrada. <br />
<li><font color="#E690FF"><code>s320</code></font> indica que 320 pixeles es el límite que pone Blogger para presentar la imagen en la entrada, en su dimensión más larga (ancho o alto, o ambas cuando la imagen es cuadrada), con la opcion <b><em>Mediano</em></b>. La dimensión más corta se adapta, por defecto, guardando la proporción. Es decir, que si la dimensión más larga sobrepasa los 320 pixeles, la imagen quedará en la entrada con 320 pixeles en su dimensión más larga, y si la dimensión más larga es menor que 320 pixeles, quedará con sus medidas originales. <br />
<li>El resaltado en <font color="#fff000"><code>este color</code></font> es el nombre o título, y el formato de la imagen. </ul>Como se anotó arriba, un click sobre la imagen link o enlace llevará a la misma imagen (imagen ancla), en su versión original. Si queremos evitar esto reemplazamos, en el código generado al subir la imagen, la Url de la imagen ancla por el signo numeral (<b>#</b>), debiendo quedar así:</div><p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><a href="<font color="#ff4040">#</font>"><br />
<<font color="#58faf4">img border="0"</font> src="<font color="#ff4040">http://2.bp.blogspot.com/-<br />
Lm-NP6-8RxE/UciR5jN0yBI/AAAAAAAACA0/bHaHLvP_AAE/<font color="#E690FF">s320</font>/</font><font color="#fff000">Blogger.png</font>"/></a> </code><br />
</td> </tr>
</table><p>..y entonces un click hecho sobre la imagen llevará al inicio de la entrada que la contiene. <p> </p><big><b>Cambiar el tamaño de las imágenes</b></big> <p><div style="text-align:justify;">Para modificar el tamaño de una imagen en una entrada poniéndole un tamaño que no está dentro de las opciones a elegir, tenemos en cuenta la segunda parte del código, la que corresponde a la que hemos denominado Imagen link o enlace. En ella cambiamos (tomando como ejemplo la <b><em>Opción Mediano</em></b>) <font color="#E690FF"><code>s320</code></font> que, como ya vimos indica 320 pixeles en la dimensión más larga de la imagen, por <font color="#E690FF"><code>sXXX</code></font>, reemplazando las equis por el número de pixeles al que queremos aumentar o disminuír el tamaño de la imagen, tomando siempre su dimensión más larga (ya sabemos que la otra se adapta automáticamentela). Esta dimensión debe estar dentro de un rango comprendido entre un pixel y el número de pixeles de la imagen original, en su dimensión más larga. Aunque le pongamos una mayor, la imagen se adaptará a la de la imagen original. <p>Veamos un ejemplo, tomando siempre como referencia la <b><em>Opción Mediano</em></b>: <p>En la URL correspondiente a la imagen link cambiamos <font color="#E690FF"><code>s320</code></font> (320px) por <font color="#E690FF"><code>s100</code></font> (100px), medida con la que no contamos dentro de las opciones de tamaño, ponemos esa URL en la barra de direcciones de una ventana aparte, y accedemos a la misma, la veremos así, como también se verá en la entrada en la que pngamos la imagen (clik sobre el enlace): </div><p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyP-_8SOHdW_b-yPy83soC2YcD-zo_dhdd88YYnO7lcgeUkvJw8xnN_Pj3YNvKmfeyxAqD4oHw8q69c1QrPqlanFSqT8-VmJFKmYiDSRI_SI8OHnkFm_BI32O0KIsBK89wON1lOUxPC72/s100/Blogger.png" target="_blank"><code>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyP-_8SOHdW_b-yPy83soC2YcD-zo_dhdd88YYnO7lcgeUkvJw8xnN_Pj3YNvKmfeyxAqD4oHw8q69c1QrPqlanFSqT8-VmJFKmYiDSRI_SI8OHnkFm_BI32O0KIsBK89wON1lOUxPC72/<font color="#E690FF">s100</font>/<font color="#fff000">Blogger.png</code></font></a> </td> </tr>
</table><p><div style="text-align:justify;">En la pestaña de la ventana en donde aparece la imagen podremos ver (en todos los navegadores, excepto Internet Explorer), las medidas de la imagen: 100 pixeles de ancho, medida que le pusimos en la URL, y 37 pixeles de alto, medida a la que se adaptó automáticamente o por defecto. </div>
<table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/181IUsZ" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/181IUsZ" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-6498596749076240896.post-38557188436593455092013-06-13T15:09:00.000-07:002014-12-14T07:31:33.703-08:00Enlaces dentro de una entrada<br />
<table border="0" width="630px" cellpadding="5px"><tr> <td> <div style="text-align:justify;">Cuando el contenido de una entrada hace necesario, por su extensión, dividirlo en varias partes, es conveniente crear enlaces que lleven, desde un índice, a cada una de las partes en particular. Estos enlaces se denominan marcadores, y no solamente se utilizan en índices, aquí lo hacemos a manera de ejemplo; también se pueden utilizar, en entradas de contenido muy extenso, para facilitar al usuario ir a cualquier parte de la misma de forma rápida.<br />
<br />
Veamos la explicación con un ejemplo:<br />
<br />
En una entrada se va a tratar un artículo sobre informática, considerando los siguientes aspectos: definición, etimología, orígenes y funciones.<br />
<br />
En el índice ponemos los títulos de cada una de las partes en las que hemos dividido el contenido de la entrada:<br />
<br />
<br />
<b><big>Índice</big></b><br />
<ol><li>Definición<br />
<li>Etimología<br />
<li>Orígenes<br />
<li>Funciones<br />
</ol><p> </p><b><big>Enlace origen</big></b> <p>Cada <font color="#ff5656">título</font> del índice lo ponemos, en el editor HTML de la entrada, al crear la misma, dentro de un enlace que apunte a la parte de la entrada correspondiente (destino del enlace), así: </div><p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><a href="<font color="#fdfd01">#</font><font color="#ff5656">Definición</font>" <font color="#55ff2f">title</font>="<font color="#ff5656">Definición</font>"><font color="#ff4bfa">Definición</font></a><br />
<a href="<font color="#fdfd01">#</font><font color="#ff5656">Etimología</font>" <font color="#55ff2f">title</font>="<font color="#ff5656">Etimología</font>"><font color="#ff4bfa">Etimología</font></a><br />
<a href="<font color="#fdfd01">#</font><font color="#ff5656">Orígenes</font>" <font color="#55ff2f">title</font>="<font color="#ff5656">Orígenes</font>"><font color="#ff4bfa">Orígenes</font></a><br />
<a href="<font color="#fdfd01">#</font><font color="#ff5656">Funciones</font>" <font color="#55ff2f">title</font>="<font color="#ff5656">Funciones</font>"><font color="#ff4bfa">Funciones</font></a><br />
</code></td> </tr>
</table><p><div style="text-align:justify;"><ul><li>El signo numeral (<font color="#fdfd01">#</font>) hace que el enlace apunte a un elemento dentro de la misma entrada. Sin este signo el enlace no encontrará el elemento ya que lo buscará por fuera de la entrada, y aparecerá un mensaje indicando que esa página no existe.<br />
<li>El atributo <font color="#55ff2f"><code>title</code></font> hace que aparezca un texto con el título correspondiente al poner el cursor sobre cada uno de ellos (es opcional). <br />
<li>Cada uno de los <font color="#ff4bfa"><code>títulos</code></font> con <font color="#ff4bfa">este color</font> es el texto que aparece en el índice.<br />
</ul><p> </p><b><big>Destino del enlace</big></b> <p>Cada uno de los títulos de cada una de las partes en que hemos dividido el contenido de la entrada, en el editor HTML de la misma, lo ponemos dentro de un código destino, así: </div><p><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td> <code><a <font color="#fdfd01">name</font>="<font color="#ff5656">Definición</font>"> <font color="#55ff2f"><h3></font><font color="#ff4bfa">Definición</font><font color="#55ff2f"></h3></font></a><br />
<a <font color="#fdfd01">name</font>="<font color="#ff5656">Etimología</font>"> <font color="#55ff2f"><h3></font><font color="#ff4bfa">Etimología</font><font color="#55ff2f"></h3></font></a><br />
<a <font color="#fdfd01">name</font>="<font color="#ff5656">Orígenes</font>"> <font color="#55ff2f"><h3></font><font color="#ff4bfa">Orígenes</font><font color="#55ff2f"></h3></font></a><br />
<a <font color="#fdfd01">name</font>="<font color="#ff5656">Funciones</font>"> <font color="#55ff2f"><h3></font><font color="#ff4bfa">Funciones</font><font color="#55ff2f"></h3></font></a></code><br />
</td> </tr>
</table><p><div style="text-align:justify;"><ul><li>El atributo <font color="#fdfd01"><code>name</code></font> asigna un nombre al destino del enlace para que éste lo pueda identificar.<br />
<li>Las etiquetas <font color="#55ff2f"><code><h3></code></font>...<font color="#55ff2f"><code></h3></code></font> dan a los títulos el formato de tales (según el formato por defecto de los títulos en cada blog, pueden ser <font color="#55ff2f"><code><h1></code></font>...<font color="#55ff2f"><code></h1> </code></font>, <font color="#55ff2f"><code><h2></code></font>...<font color="#55ff2f"><code></h2></code></font> o <font color="#55ff2f"><code><h3></code></font>...<font color="#55ff2f"><code></h3></code></font>).<br />
<li>Cada uno de los <font color="#ff4bfa"><code>Textos</code></font> con <font color="#ff4bfa">este color</font> es el título de cada una de las partes en que hemos dividido el contenido de la entrada.<br />
</ul><p> </p><div style="text-align: justify;"><b><big>Enlace "Ir al principio"</big></b> <p>Por último podemos utilizar, al final de cada parte en que dividimos la entrada, o al final de la misma, el siguiente código, que nos genera un enlace para volver al principio de la entrada: </div><table border="1" width="610px" cellpadding="5px" align="center" bgcolor="#194155"><tr> <td><code><a href="#"<font color="#55ff2f"><code>title</font>="Ir al principio" ><font color="#ff5656">Ir al principio</font></a></code></td> </tr>
</table><p><ul><li>El texto <font color="#ff5656"><code>Ir al principio</code></font> podemos cambiarlo por "Ir al inicio" "Regresar" "Ir arriba" etc. <br />
<li>El atributo <font color="#55ff2f"><code>title</code></font> hace que aparezca el texto <font color="#ff5656">Ir al principio</font> al poner el cursor sobre el enlace.<br />
</ul></div><p> </p>Veamos los enlaces en funcionamiento: <p><div style="text-align:center;"><a href="http://bloguermast2.blogspot.com/2013/06/enlaces-dentro-de-una-entrada.html" imageanchor="1" ><img title="Enlaces dentro de una entrada" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDaSUuWQNx4jF4smX6VXLwyMHz6s1N0VuaZg-XJ_d1TOw4UWtH0OIqtyeD7xCnKyYC4fVcQy_hORYIPNCDSRIoLPfHx7dH4gT9TKRyE828a_sA7G0iL3mTz10mbKstArauICjl_hYcqo/s320/button_demo" alt="Enlaces dentro de una entrada"/></a> </div><table border="1" width="100%" align="center"><tbody>
<tr> <td width="33%"> <div class="fb-like" data-href="http://bit.ly/19zk1Pn" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></td> <td width="33%"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/19zk1Pn" data-via="Bloguermast" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></td><td width="33%"><g:plusone></g:plusone> </td> </tr>
</tbody> </table></td> </tr>
</table>Unknownnoreply@blogger.com4