jesgo23: javascript

Highlight.js nos permite colorear el código que listamos en nuestras entradas, según el tipo de lenguaje.

De esta manera comprendemos más fácilmente los listados de código que instalaremos después en las plantillas ayudándonos en su modificación si fuera necesario.

Demo.

Los pasos son sencillos:

1. Bajamos el fichero zip que contiene los ficheros necesarios (default.css y highlight.pack.js). En la carpeta styles hay otros ficheros css que modifican el estilo, sería bueno hacer pruebas con cada uno de ellos para ver cuál es el que mejor se adapta a nuestro blog. Nos permite bajar también el lenguaje, en Blogger sería suficiente con css, xml y javascript en la mayoria de los casos.

2. Alojamos los ficheros default.css y highlight.pack.js en nuestro alojamiento habitual (últimamente hay problemas con skydrive).

3. Despues de </head> pegamos este código:

<link href='TU_URL/default.css' rel='stylesheet' type='text/css'/>
<script src='TU_URL/highlight.pack.js' type='text/javascript'/>
<script type='text/javascript'>hljs.initHighlightingOnLoad();</script>

TU_URL es la dirección del alojamiento.

Guardamos la plantilla.

4. En la entrada donde vamos a poner el listado del código pondremos:

<pre><code class="LENGUAJE">

AQUI EL CÓDIGO

</code></pre>

cambiaremos LENGUAJE por css, html o javascript dependiendo del tipo de código a listar.

S3Slider es otro carrusel (slide) para ver una serie de fotos con un texto.

El texto se adapta a los lados, con una descripción de cada foto o elemento. Aquí ya vimos otro carrusel.

Demo.

Estos son los pasos a seguir:

1. Bajamos los ficheros jquery.js y y s3slider.js y los alojamos en nuestro alojamiento habitual.

2. Antes de </head> ponemos:

<script src="TU_URL/jquery.js" type="text/javascript"></script>
<script src="TU_URL/s3Slider.js" type="text/javascript"></script>

3. Después de <body> ponemos:

<script type="text/javascript">
$(document).ready(function() {
$("#s3slider").s3Slider({
timeOut: 4000
});
});
</script>

En timeOut: 4000 modificamos el tiempo en milisegundos que tardarán en deslizarse las imágenes.

4. Ponemos lo siguiente donde queramos poner el Carrusel:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="TU_URL_IMAGEN1" />
<span>TEXTO DE LA IMAGEN1</span>
</li>
<li class="s3sliderImage">
<img src="TU_URL_IMAGEN2" />
<span>TEXTO DE LA IMAGEN2</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

En TU_URL_IMAGENX ponemos la dirección url de nuestras fotos.
En TEXTO DE LA IMAGENX ponemos el texto que describe cada foto.
Añadimos los bloques :

<li class=”s3sliderImage”>
<img src=”TU_URL_IMAGEN” />
<span>TEXTO DE LA IMAGEN</span>
</li>

que necesitemos.

5. Añadimos el css antes de ]]> :

#s3slider {
width: 400px;       /* mismo ancho  que las imágenes */
height: 300px;      /* misma altura que las imágenes */
position: relative; /* importante */
overflow: hidden;   /* importante */
}#s3sliderContent {
width: 400px;       /* mismo ancho que las imágenes */
position: absolute; /* importante */
top: 0;             /* importante */
margin-left: 0;     /* importante */
}
.s3sliderImage {
float: left;        /* importante */
position: relative; /* importante */
display: none;      /* importante */
}
.s3sliderImage span {
position: absolute; /* importante */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad caja del texto */
-moz-opacity: 0.7;         /* opacidad caja del texto */
-khtml-opacity: 0.7;       /* opacidad caja del texto */
opacity: 0.7;              /* opacidad caja del texto */
color: #fff;
display: none;      /* importante */
top: 0;
/*
si ponemos top: 0;
la caja de texto estará en la parte superior
si ponemos bottom: 0;
la caja de texto estará en la parte inferior
*/
}
.clear2 {
clear: both;
}

Fácil.

Con esto ponemos la foto de los comentaristas de nuestras entradas.

En otras plataformas es bastante común encontrar plantillas con la foto de los comentaristas de nuestro blog, esa foto es la que se encuentra en el perfil de los lectores. Blogger no contempla esa posiblidad.
Vamos a hacer algunos cambios que nos permitirá tenerlo en Blogger.

1. Descargamos el archivo comment_photos.js y lo alojamos en nuestro servidor habitual.

2. Antes de </head> añadimos este script:


<script src='url_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage =
'url_imagen_sinfoto'
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author',
1);});
//]]></script>

En url_comment_photos.js ponemos la url donde hemos alojado el fichero . js anterior.
En url_imagen_sinfoto ponemos la url de la foto que hemos elegido para identificar los comentaristas que no tienen foto en su perfil de Blogger.
En BloggerProfiles.imageWidth = 60; ponemos la anchura de la foto.
En BloggerProfiles.imageHeight = 75; ponemos la altura de la foto.

3. Expandimos la plantilla y buscamos la parte siguiente e incorporamos las dos lineas resaltadas en amarillo:


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentphoto' style='float:left;'/>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>

Y añadimos este css antes de ]]></b:skin>.


.commentphoto img {
margin: 2px;
}

Visto en Purple Moggy.

Se trata de igualar la altura de la sidebar cuando tenemos dos o más columnas.

Desde siempre había querido tener las dos sidebars de mi plantilla de la misma altura ya que como tienen distinto color de fondo parecía que una se quedaba coja respecto de la otra. Al final lo he conseguido usando jQuery.

1. Bajamos el fichero jquery-1.2.6.js y lo alojamos en nuestro servicio de alojamiento habitual.

2. Antes de </head> copiamos el script:


<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".columnas"));
});
</script>

3. Antes de ]]></b:skin> copiamos el css que adapta el estilo de las columnas a nuestro blog, en mi caso es el siguiente:


/* Columnas
---------------------------- */
.columnas {
width:100%;
float:right;
margin: 0px;
padding: 0px;
}

.columnas .widget{
text-align: left;
margin: 3px;
padding: 3px;
}

.columnas h2 span {
color: $sidebarheader;
}

.columnas ul {
list-style:none;
margin-left: 0;
}

.columnas li {
margin:0;
padding-left: 5px;
text-indent:-40px;
line-height:1.5em;
}

.columnas p {
color:#666;
line-height:1.5em;
}

4. Sin expandir artilugios buscamos esto o algo parecido (depende de los widgets que tengamos en nuestras sidebar1 y sidebar2):

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Últimas entradas' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Últimos comentarios' type='HTML'/>
</b:section>
</div>

y cambiamos sidebar por columnas, quedando así:


<div class='sidebar-wrapper'>
<b:section class='columnas' id='sidebar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='columnas' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Últimas entradas' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Últimos comentarios' type='HTML'/>
</b:section>
</div>

Eso es todo. Este truco es muy útil cuando tenemos las sidebars entre dos widebars, como es mi caso en esta plantilla.

Visto en cssnewbie.

En los últimos tiempos se están poniendo de moda las plantillas tipo "magazine" para Blogger; en esas plantillas suele haber un carrusel o "slide" de fotos que gráficamente queda muy bien.

Demo

Me han preguntado como ponerlo en un blog. Vamos a ver como hacerlo.

Primero antes de ]]></b:skin> pegar:


#myslides{background:#2c3133;}
.stepcarousel{position: relative; /*no tocar*/
overflow: scroll; /*no tocar*/
width: 950px; /*Anchura total del carrusel*/
height: 165px; /*Altura total del carrusel */
margin: 0px 14px 5px 14px;
background:#2c3133;
}
.stepcarousel .belt{
position: absolute; /*no tocar*/
left: 0;top: 0;
}
.stepcarousel .panel{ 
float: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 10px 17px ; /*margen de cada foto*/
width:220px; /*Anchura de cada foto*/
background:#202325;
height:140px;
border:1px solid #393f42;
}
.stepcarousel .panel p{
text-align: left; /*no tocar*/
overflow: hidden; /*no tocar*/
margin: 5px 5px ; /*margen de cada foto*/
}
.stepcarousel .panel h2{
text-align: left; /*no tocar*/
height:20px;overflow: hidden; /*no tocar*/
margin: 2px 5px ; /*margen de cada foto*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*no tocar*/
background:#040404; /*fondo de la imagen*/
margin: 10px 10px 10px 10px; /*margen de cada foto*/
padding:0px 0px;
}

Aquí deberiamos modificar ancho, alto, background, etc. para adaptarlo graficamente a nuestro blog.

Segundo, antes de </head> pegar:


<script src='URL TU ALOJAMIENTO DE jquery.js' type='text/javascript'/>
<script src='URL TU ALOJAMIENTO DE slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--sfHover = function() {var sfEls = document.getElementById("menu").getElementsByTagName("LI");var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=" sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]></script>

Los ficheros .js se pueden descargar aquí.

Tercero, poner lo siguiente donde queramos poner el Carrusel (normalmente estará bien antes de <div id='content-wrapper'>) :


<!-- Casing -->
<div id='casing'>
<!-- Myslides -->
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({galleryid: &#39;mygallery&#39;, //id of carousel DIVbeltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVspanelclass: &#39;panel&#39;, //class of panel DIVs each holding contentpanelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: [&#39;http://web2feel.com/images/rem1.jpg&#39;, -14, 60], rightnav: [&#39;http://web2feel.com/images/rem2.jpg&#39;, 0, 60]},statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panelscontenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]})</script><div class='stepcarousel' id='mygallery'><div class='belt'><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div><div class='panel'><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE'><img alt='#' height='120' src='URL_IMAGEN' width='200'/> </a></div></div></div></div></div>

Cambiar YOUR-POST-LINK por la dirección url (enlace) que queramos que se dirija cuando se pinche en la foto.

Cambiar YOUR-POST-TITLE por el título que queramos que salga cuando se pase el ratón por encima.

Cambiar URL_IMAGEN por la dirección de vuestra foto.

Parece más dificil de lo que realmente es. :)

Highlight.js en Blogger. Colores en el código

s3Slider, otro carrusel de fotos en Blogger

Poner foto comentaristas en blogger

Igualar columnas sidebar en blogger

Carrusel (Slide) de fotos en Blogger

Comentarios

Buenos Enlaces

Entradas

Utilidades

Visitas

Seguidores