¿Como incluir una barra "Cargando Página"? -75-

Permite insertar una barra en el centro de la página que especifica que el sitio está cargando su contenido. Una vez finalizado, se elimina la barra y muestra la página completa.

1. Ir a Plantilla, luego a Edición de HTML y antes de </head> pegar el siguiente código:

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

2. Después ir a Elementos de página y pegar el siguiente código:

<div id='imgLOAD' style="TEXT-ALIGN: center">
<b>Cargando</b>
<IMG src="http://i151.photobucket.com/albums/s137/andrewmusic1/loading.gif">
</div>

* Después lo arrastramos en donde mejor nos parezca.

Nota:
Esto también lo podemos poner dentro del código de la plantilla.

Existen páginas que te ofrecen diferentes tipos de barras Cargando Página:
Napyfab
Load Info
Activity Indicators

¿Cómo incluir una Radio Online en el Blog? -74-

Si deseas que tu radio favorita suene en tu blog, lo podrás hacer utilizando un simple código que a continuación te proporcionare:

1. Necesitamos obtener la URL de la radio, es decir su dirección por donde transmite su señal. Generalmente se puede obtener desde el mismo reproductor que la emisora tiene en su página web, entonces tendrás que escuchar la radio, para luego poner el mouse sobre el reproductor, después presionar el botón derecho, el cual se abrirá una ventana y clic en Propiedades, es ahí en donde veras la URL por la cual transmite su música.

2. Pegar el siguiente código en donde quieras, sea en la Sidebar o en la Columna principal:

<EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/windows/windowsmedia/en/Download/default.asp?tcode=9#location2" src="http://URL-de-la-Radio-Online" name="MC1" height=45 width=280 AutoStart=False ShowStatusBar=True ShowGotoBar=Talse TransparentAtStart=true bbclient=0></EMBED>

* En donde dice la URL de la radio online, pones la dirección de la emisora.
* Para que funcione debes cambiar: AutoStart=False por AutoStart=True.

Nota: Por ejemplo, puedes poner el mouse sobre el reproductor, luego seguir los pasos anteriormente mencionados y verás que la dirección por donde se transmite la radio que estás escuchando es: http://216.246.4.18/asxfiles-live/ny60winlive7001.asx

Estas escuchando Kiss Radio (España)

¿Como hacer una Nube de Etiquetas? -73-

Una nube de etiquetas es una representación visual de las “etiquetas” o palabras clave usadas en un sitio web. Generalmente este listado de palabras se ordena alfabéticamente y con diferente tamaño según su relevancia.

Para empezar a poner nuestra nube de etiquetas en el blog tenemos que etiquetar todos nuestros post.

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>).

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. Después agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues casi al final (antes de </head>).

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://ayudaparaelblog.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

3. Buscar el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><?xml:namespace prefix = data /></data:label.name></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Do not change anything past this point -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Explicación del paso Nº 2
- En lcBlogURL, se debe poner la dirección de tu blog.

- En maxFontSize, podemos modificar el tamaño de la fuente mostrada.

- En maxColor = [0,0,255], podemos modificar el color de la fuente mostrada.
Por ejemplo:
[255,0,0] = Rojo claro
[0,255,0] = Verde claro
[128,0,0] = Rojo oscuro
[0,128,0]= Verde oscuro
[0,0,128] = Azul oscuro
Mas combinaciones de colores en HYPE's Color Specifier.

- En minFontSize, podemos modificar el tamaño de la fuente mostrada.

- En minColor = [0,0,0], podemos modificar el color de la fuente mostrada.

- En lcShowCount (true o false) .- Si es true se mostrará una nube de etiquetas con el número de entradas que existen. Mientras que en false simplemente se vera una nube de etiquetas sin su respectivo número.

Nota:
- Para que te resulte este truco debes tener como máximo más de 2 entradas en caso contrario no se mostrará.

Etiquetas (categorías o secciones) en forma de un menú de pestañas o solapas -72-

En algunos sitios web encontramos un menú de pestañas en forma horizontal para una navegación mucho mejor. Probablemente para algunos es de bastante utilidad por su fácil y rápida navegación por la página.

Para empezar a poner nuestro menú de pestañas en el blog tenemos que etiquetar todos nuestros post.

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

* Cambia los valores de mawidgets="2" y showaddelement="yes".

2. Después buscas el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><?xml:namespace prefix = data /></data:label.name></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsE'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li></b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

4. Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere estilo del menú, el cual se podrá realizar cambios, utilizando tu criterio.
El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://i151.photobucket.com/albums/s137/andrewmusic1/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

En donde dice:
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
el número 50 se refiere al posicionamiento, es decir moverlo hacia la izquierda, por ejemplo cambialo a 0 y mira lo que pasa.
Luego mas abajo dice: padding:5px 15px 4px 6px;
el número 5 se refiere al espacio, por ejemplo cambailo a 0 y mira lo que pasa.

Nota: Te voy a proporcionar algunos estilos de menú que he subido a Photobucket para que lo utilices en tu blog. Pero al utilizar algún estilo, tendrás que hacer una simple modificación.

Tabs A Color de las Tabs: Blancas
Tabs B Color de las Tabs: Grises
Tabs C Color de las Tabs: Verdes
Tabs D Color de las Tabs: Rosas
Tabs E Color de las Tabs: Rojas
Tabs F Color de las Tabs: Celeste
Tabs G Color de las Tabs: Azules
Tabs H Color de las Tabs: Negras
Tabs I Color de las Tabs: Naranjas
Tabs J Color de las Tabs: Cristal
Tabs K Color de las Tabs: Cafe

Por ejemplo, si utilizas el estilo A, entonces te vas al paso 2 y en <div id='tabsF'> le cambias el id por el estilo que haz escogido. En este caso hemos escogido el estilo A entonces seria, <div id='tabsA'>

5. Finalmente cuando vas a guardar los cambios te saldrá probablemente un mensaje:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.
• Label1
Confirmar y guardar
Simplemente guardas y confirmas.

Nota: Para que resulte todo esto debes irte a Elementos de la página y arrastrar Etiquetas poniendolo debajo de la cabecera.

Plantillas con una 2da Sidebar (3 columnas) -71-

1. Para usar estas plantillas tienes que descargar el documento y copiar el código que se te brinda.
2. Ir al blog. Tienes que ir a diseño de plantilla, después a Edición de HTML (no necesitas Expandir plantillas de artilugios) y automáticamente te muestra el código de la plantilla que usas actualmente.
3. Selecciona todo el código y bórralo. Ahora pega el código que ya tenías copiado (la nueva plantilla).
4. Guarda los cambios. Reconstruye tu blog y listo.

Minima Descargar
Minima Black Descargar
Minima Blue Descargar
Minima Ochre Descargar


Minima Descargar
Minima Black Descargar
Minima Blue Descargar
Minima Ochre Descargar


Denim Descargar


Denim Descargar

Nota: Poco a poco estre subiendo las demás.

Ocultar/Mostrar la barra de navegación de Blogger (2) -70-

Acerca el mouse aquí abajo para que aparezca la imagen y alejalo para que desaparezca.

Consiste en ocultar la barra de navegación y mostrarla cuando se coloca el mouse en la parte superior del blog o página.

Así que para ocultar esta barra tendrás que hacer lo siguiente:
- Ir a Plantilla, después a Edición de HTML (no necesitas Expandir plantillas de artilugios) y agregas el siguiente código entre ]]></b:skin> y </head>.

<script src='http://wiki.script.aculo.us/javascripts/prototype.js' type='text/javascript'/>
<script src='http://wiki.script.aculo.us/javascripts/scriptaculous.js?load=effects' type='text/javascript'/>

<script type='text/javascript'>
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window, 'load', navbarHack, false);
</script>

Vía: Hodavame

Menú desplegable, un simple botón (2) -69-

Este menú desplegable consiste en hacer clic al botón y se muestra una lista de opciones.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>)

.texthidden {
display:inline
}

.shown {
display:block
}

2. Entre ]]></b:skin> y </head> agregar lo siguiente:

<script src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/>

- Guardar cambios.

3. Ir a Elementos de la página, clic en Añadir un elemento de página y seleccionar HTML/Javascript. Ahí tendrán que agregar el siguiente código:

<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="musica" class="texthidden">
<li><a href="http://www.radioblogclub.com/" target="_blank">Radio Blog</a></li>
<li><a href="http://www.goear.com/index.php" target="_blank">Goear</a></li></ul>


<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="video" class="texthidden">
<li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>
<li><a href="http://www.veoh.com/" target="_blank">Veoh</a></li></ul>

**Como punto de partida hemos hecho un menú de música en el que aparece una lista: Radio Blog y Goear. Además, hay un menú de video en el que aparece: You Tube y Veoh

- En esta parte de código puedes repetirla cuantas veces quieras, ustedes tendrán que armarlo a su gusto.
- Solo tendrán que agregar el botón, la dirección de la página con su respectivo nombre.
- Además, puedes añadir una imagen justo antes del texto que aparece la lista.

Explicación:
- Si por ejemplo, a parte de música deseamos poner video entonces al crear otro botón, en expandcollapse('musica') cambiamos en donde dice música por video. Además, el id=”música” lo modificamos por video.
- En <img border="0" src="http://direccion-de-la-imagen"/>, viene hacer la imagen del botón.
- En donde dice Radio Blog, Goear, You Tube, vienen a ser una lista.
- En <a href="http://www.radioblogclub.com/" target="_blank">, viene hacer el enlace de la página enlazada.

Ejemplo:


Crear botones en Buttonator

Vía: A Consuming Experience

Agregar Emoticones en el blog -68-

Emoticones.- Son figuras construidas con caracteres ortográficos, para expresar gestos o emociones en los mensajes enviados y los usuarios las utilizan diariamente en su chat. Algunas de las más usuales son:
1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <head> y </head>. Preferible que lo pegues casi al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

<script src='http://benjamin0331.googlepages.com/addSmiley.js' type='text/javascript'/>

2. Entre <b:skin><![CDATA[ y ]]></b:skin> agregar lo siguiente:

.post-body img#new {
margin:0;
padding:0;
border:none;
}

* Esto es para evitar que los Emoticonos se desplacen o se vean con un borde.

- Los emoticones se verán en los post (entradas) y en los comentarios cuando están expandidos. Una vez que el blog acabe de cargar aparecerán los emoticonos.

Nota: Estos emoticones te funcionan bien si es que no utilizas el Leer Más (Entradas ampliables).

Vía: Ben's

Cambiar el color de fondo de los comentarios -67-

Consiste en agregar un color de fondo a los comentarios, el cual puedes asignar un color de fondo para el autor del blog (un color de texto también) y otro para el autor de los otros blogs.

1. Ir a diseño de la Plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Buscar el id ='comments-block'.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<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>

</b:if>

<dd class='comment-footer'>

* Agregar lo que está de color rojo.

3. Seguimos en la plantilla. Entre <b:skin><![CDATA[ y ]]></b:skin> buscar lo siguiente (estilo del comentario):

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
Sigue más código de estilo
…..
…..
….
.deleted-comment {
font-style:italic;
color:gray;
}

4. El siguiente código lo deje para el último porque se refiere al estilo del comentario (modificado), el cual se podrá realizar cambios utilizando tu criterio. Una vez ubicado el estilo del comentario lo reemplazamos por lo siguiente:

#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#e6e6e6 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGlah3HIk1MEf9iNGfA8hmsULONeqGmmB88b9IrlrEYSz-3XQKqY78k6a8TfjWos2APUo59-wpzq-852lUIC822poQ0GFhYXYIYA_X6QqofwXViWKXUYlxulpoY-k4oAn0B_8iw/s200/page_edit.png") no-repeat 2px .35em;
margin:.5em 0 0;
padding:3px 0 0 18px;
font-weight:bold;
}
.comment-body {
background:#eeeee6;
margin:0;
padding:7px 7px 7px 7px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
background:#e5e5e5;
margin:0;
padding:7px 7px 7px 10px;
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2;
text-decoration:bold;
}
.comment-footer {
background:#e6e6e6;
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Explicación:
- En .comment-author, aparece el nombre del autor y puedes cambiar el color de fondo y la url que viene a ser el icono
- .comment-body, ahí se visualiza el color de fondo para los que dejan comentarios.
- .comment-body-author, ahí se visualiza el color de fondo para el autor del blog.
- .comment-body-author p, puedes cambiar el color de texto del autor del blog.
- .comment-footer, aparece la fecha y puedes cambiar el color de fondo.

Vía: Stubborn Fanatic

Colores aleatorios en el fondo del blog -66-

Consiste en un color distinto cada vez que entramos al blog.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y buscas lo siguiente:

body {
background:$bgcolor;
...
}

* Eliminar background:$bgcolor;

2. Agregar el siguiente código después de <body>

<script type='text/javascript'>
var bgcolorlist=new Array("#626868", "#515f6c", "#999966", "#9ea8a8", "#b2bdbd", "#41485e", "#777777", "#eeeee6")
document.bgColor=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]</script>

- En new Array (), puedes cambiar los códigos de los colores que deseas.
Por otro lado, si quieres que más colores cambien le agregas más o en caso contrario le quitas.

- Para que veas el resultado en tu blog presiona F5 de tu teclado y veras que aparecen distintos colores en el fondo del blog.

Últimos Post (2) -65-

En Blogger existe la manera de agregarle a nuestro blog los títulos de los últimos post, pero a muchos no les ha gustado, quizás sea porque el número máximo de post es cinco, entre otras cosas. Pero existe un nuevo truco y me parece mucho mejor.

» Ir a diseño de plantilla, clic en Añadir un elemento de página y seleccionan HTML/Javascript. Ahí tendrán que agregar lo siguiente:

<script src=" http://andrewhonors.googlepages.com/showrecentposts_es.js"></script>
<script language="javascript">
var numposts = 7;
var numchars = 100;
var showpostdate = true;
var showpostsummary = true;
var standardstyling = true;
</script>
<script src="http://andrewmusicmovie.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Explicación:
Podemos modificar lo siguiente:

numpost .- Es el número de post a mostrar desde 1 hasta 25.

numchars .- Se mostrará un número de palabras para cada comentario.

showpostdate (true o false) .- Si es true se muestra la fecha del post.

showpostsummary (true o false) .- Si es true se mostrará el resumen del post (entradas).

standardstyling (true o false) .- Si es true se aplicará un estilo estándar. El resumen se mostrará en letra cursiva y existirá un espacio entre cada comentario. Mientras que en false se vera todo junto.

** En donde dice: andrewmusicmovie.blogspot.com cámbialo por la dirección de tu blog.

Vía: Beautiful Beta

Últimos Post (Blogger)

¿Cómo modificar la Columna Pricipal y la Sidebar del blog? -64-

Para aumentar o disminuir el tamaño de la Columna principal o Sidebar necesitaremos hacer algunas modificaciones en el blog.
Esto prácticamente resulta para las siguientes plantillas: Todas las Minima (Dark, Blue, Ochre, Lefty, Stretch, Lefty Stretch), Denim.

» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios).

1. En la plantilla tenemos que ubicar lo siguiente:
/* Header
-----------------------------------------------
#header-wrapper {
width:660px;
...
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
...
}

#main-wrapper {
width: 410px;
...
}

#sidebar-wrapper {
width: 220px;
...
}

2. Tendremos que modificar el width (ancho) del #header-wrapper, #outer-wrapper, del #main-wrapper y de la #sidebar-wrapper.
Ejemplo:
#header-wrapper {
width: 900px;
...
}

#outer-wrapper {
width: 900px;
...
}

#main-wrapper {
width: 500px;
...
}

#sidebar-wrapper {
width: 320px;
...
}

3. Para que veas los cambios haces clic en Vista Previa y si crees que has hecho bien las modificaciones, simplemente clic en Guardar Plantilla.

Nota: Quizás esto te pueda servir como una guía para las demás plantillas.

¿Cómo poner un texto en movimiento en la barra de estado y título? -63-

La barra de título, está en la parte superior y nos indica la página web en la que el navegador está situado.

La barra de estado, nos aparece en los exploradores por lo general abajo y suele mostrar información sobre la página.

Para agregar el siguiente código tienes dos formas de agregarlo:
- Ir a diseño de la plantilla, clic en Añadir un elemento de página y seleccionas HTML/Javascript.
- Ir a diseño de la plantilla, luego Edición de HTML y lo agregas antes de </head>

Para la barra de título

<script type="text/JavaScript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",140)
}
if (document.title)
titlemove()
</script>

** setTimeout("titlemove()",140), esta línea se refiere al movimiento del texto, si deseas le cambias el valor de 140 por otro valor.
Probablemente el texto lo veas muy junto o no se aprecie bien, entonces en Opciones, Básico y en el Título le agregas guiones o puntos. Pero acuérdate que cambiaria el titulo de tu blog, es decir estaría con puntos o guiones.

Para la barra de estado

<script language="JavaScript">
var MessageText = "Bienvenidos a Ayuda para el Blog..."
var DisplayLength = 50
var pos = 1 - DisplayLength;
function ScrollInStatusBar(){
var scroll = "";
pos++;
if (pos == MessageText.length) pos = 1 - DisplayLength;
if (pos<0)
{
for (var i=1; i<=Math.abs(pos); i++)
scroll = scroll + "";
scroll = scroll + MessageText.substring(0, DisplayLength - i + 1);
}
else
scroll = scroll + MessageText.substring(pos, pos + DisplayLength);
window.status = scroll;
setTimeout("ScrollInStatusBar()",100);
}
ScrollInStatusBar()
</script>

- En var MessageText, escribes tu mensaje.
- var DisplayLength, viene a ser la longitud de tu mensaje.
- setTimeout("ScrollInStatusBar()",100), esta línea se refiere al movimiento del texto, si deseas le cambias el valor de 100 por otro valor.

Personalizar la fecha de los post (entradas) -62-

Blogger coloca por defecto la fecha de los post en una sola línea, asi que en esta oportunidad vamos a cambiar la apariencia de la fecha en un estilo diferente, el cual podrás personalizarla a tu gusto.

1. Ir a Configuración. Después a Formato. De ahí, en donde dice: Formato de cabecera de fecha, escogemos la siguiente opción:

Clic en la imagen para agrandarla

* No te olvides que tienes que Guardar valores.

2. Ir a plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregas el siguiente código entre <head> y </head>. Preferible que lo pegues al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

<script src='http://andrewhonors.googlepages.com/fecha.js' type='text/javascript'/>

3. Después buscas lo siguiente:

<div class='blog-posts'>
....
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

4. Una vez ubicado, reemplazas <data:post.dateHeader/> por lo siguiente:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

5. Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere al estilo de la fecha, el cual se podrá realizar cambios, utilizando tu criterio.
El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

#fecha {
display: block;
margin: 0px 1px;
float: right;
padding: 5px;
color: #464646;
background: #cccccc;
border: #cccccc 1px solid;
text-transform: capitalize;
}

.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}

.fecha_mes {
display: block;
font-size: 10px;
}

.fecha_anio {
display: block;
font-size: 10px;
}

Explicación:
#fecha {
En margin, ver aquí.
float, puedes cambiarlo de posición, sea left o right.
padding, puedes aumentar o disminuir el formato de la fecha.
color y background, puedes modificar los colores del texto como el fondo.
border, cambiar el color y en 1px por otro valor, sea 2 ó 3 (aumenta mas el borde).

.fecha_dia, .fecha_mes y .fecha_anio {
En font-size, puedes cambiar el tamaño de la letra.

Vía: Recursos Blog & Web

¿Cómo utilizar un bloque entrecomillado? (blockquote) -61-

Blockquote.- Define una cita. Es comúnmente usado para definir citas largas como párrafos. <blockquote> </blockquote>

En algunos blogs/sitios web encontramos citas o frases con una imagen de unas dobles comillas de apertura, el cual nos puede servir para citar algo que dijo alguna actriz, cantante, entre otras cosas.

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

blockquote {
background: url(http://aquí-la-direccion-de-la-imagen) no-repeat 0 3px;
color: #666;
padding-left: 25px;
font-size : 15pt;
font-style: italic;
margin-bottom: 1px;
display:block;
padding-top:5px;
}

Explicación
- En url, se debe poner el enlace a la imagen con las dobles comillas.
- En padding-left, sirve para mover el texto entre le borde izquierdo.
- En font-size, podemos modificar el tamaño de la fuente mostrada.
- En font-style, define que la fuente se muestre en una de tres formas: normal, italic u oblique (inclinada).
- En padding-top, sirve para desplazar el texto hacia abajo.

2. Para que las dobles comillas tengan efecto en una entrada hacemos lo siguiente:
Escribimos alguna cita o frase, luego lo sombreamos y clic en bloque entrecomillado o sino en edición de HTML también lo podemos insertar.

Clic en la imagen para agrandarla

Nota: Te voy a proporcionar algunas comillas que he subido a Photobucket para que lo utilices en tu blog.

http://i151.photobucket.com/albums/s137/andrewmusic1/quoteblack.gif


http://i151.photobucket.com/albums/s137/andrewmusic1/quotefirebrick.gif


http://i151.photobucket.com/albums/s137/andrewmusic1/quote.gif

Últimos Comentarios (2) -60-

En Blogger existe la manera de agregarle a nuestro blog los últimos comentarios que nos dejan los que nos visitan, pero a muchos no les ha gustado, quizás sea porque el número máximo de comentarios es cinco, tarda en actualizarse, entre otras cosas. Pero existe un nuevo truco y me parece mucho mejor.

» Ir a diseño de plantilla, clic en Añadir un elemento de página y seleccionan HTML/Javascript. Ahí tendrán que agregar lo siguiente:

<script style="text/javascript" src="http://andrewhonors.googlepages.com/showrecentcomments2_sp.js"></script>
<script style="text/javascript">
var numcomments = 6;
var showcommentdate = true;
var showposttitle = true;
var numchars = 30;
var standardstyling = true;
</script>
<script src="http://andrewmusicmovie.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Explicación: Podemos modificar lo siguiente:

numcomments .- Es el número de comentario a mostrar desde 1 hasta 25.

showcommentdate (true o false) .- Si es true se muestra la fecha del comentario.

showposttitle (true o false) .- Si es true se mostrará el titulo del post (entradas), en donde el usuario ha dejado su comentario.

numchars .- Se mostrará un número de palabras para cada comentario.

standardstyling (true o false) .- Si es true se aplicará un estilo estándar. El resumen se mostrará en letra cursiva y existirá un espacio entre cada comentario. Mientras que en false se vera todo junto.

** En donde dice: andrewmusicmovie.blogspot.com cámbialo por la dirección de tu blog.

Vía: Hasckospere y Beautiful Beta

Últimos Comentarios (Blogger)

¿Cómo cambiar la cabecera por una imagen? -59-

Cabecera de página.-Visualiza el título y la descripción de tu blog.

En Blogger existe una opción para insertar una imagen en la cabecera de forma fácil y rápida. Así que ahora podemos dejar de lado aquellos trucos que utilizábamos.

» Ir a diseño de la Plantilla, después clic en editar Cabecera (header) y nos aparecerá lo siguiente:

Clic en la imagen para agrandarla

Si deseamos que nuestra imagen tenga un título y una descripción debemos seleccionar la primera casilla, en caso contrario que queramos solamente la imagen la segunda casilla.
** Al subir nuestra imagen la guardamos y volvemos hacer clic en editar Cabecera, para que nos aparezcan las opciones.

Probablemente si el título y la descripción lo queremos en el centro, entonces hacemos lo siguiente:
» Ir a Plantilla, después a Edición de HTML (no Expandir plantillas de artilugios). Ahora buscamos lo siguiente:
#header y #header .description
Tanto al primero como al segundo le agregamos después:
text-align:center;
* Si en tu plantilla existe esto, lo modificas a tu gusto.

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 710px (píxeles) y un alto de 120 px. Estos valores son simplemente un aproximado. En todo caso puedes fijarte en donde dice #header, ahí te indica un ancho (width).

Encuesta para el Blog: Free Website Polls -58-

Free Website Poll es una herramienta sencilla y práctica que nos permite generar hasta quince encuestas a la vez para nuestro blog o sitio web.
Para hacer una encuesta no hace falta ni registrarse, basta formular la pregunta, las posibles respuestas y obtendrás un código HTML para agregarlo en nuestro site o blog. Cada encuesta activa te permite un máximo de 20 respuestas.
Por otro lado, si deseas puedes registrarte y obtendrás aspectos configurables, tal es el caso de agregarle color, alineamiento de opciones, tipografía a usar, entre otras cosas.
**En mi Sidebar he agregado esta herramienta**

Insertar elementos en la Sidebar (Blogger nuevo)
Insertar elementos en la Sidebar (Blogger antiguo)

Ocultar/Eliminar el mensaje: Mostrando entradas... -57-

Probablemente a muchos usuarios les molesta aquel mensaje que aparece cada vez que haces clic sobre una etiqueta (categoría o sección) y nos dice en que etiqueta estamos. Además nos da la opción de ver todas las entradas publicadas.

- Si queremos ocultar hacemos lo siguiente:
» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

.status-msg-wrap {
visibility:hidden;
display:none;
}

- Si queremos eliminar hacemos lo siguiente:
» Ir a diseño de la plantilla. Después clic en Edición de HTML y clic en Expandir plantillas de artilugios y buscas lo siguiente (eliminas lo que está de color azul):

<!-- posts -->
<div class='blog-posts'>

<b:include data='top' name='status-message'/>

<data:adStart/>

Si no deseas eliminarlo, entonces puedes ponerle un par de código de comentario (lo que está de color rojo):

<--! <b:include data='top' name='status-message'/> -->

Imágenes aleatorias en la cabecera -56-

Consiste en una imagen distinta cada vez que entramos al blog.

» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código después de <body>.

<script type="text/javascript">

var banner= new Array()

banner[0]="http://aqui-la-dirección-de-la-imagen"
banner[1]="http://aqui-la-dirección-de-la-imagen"
banner[2]="http://aqui-la-dirección-de-la-imagen"
banner[3]="http://aqui-la-dirección-de-la-imagen"
banner[4]="http://aqui-la-dirección-de-la-imagen"
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

- En banner [0], [1], [2], [3], [4] tendrás que agregar la dirección de tu imagen, el cual debe tener un ancho de 660px (pixeles) y un alto de 130px aproximadamente. En todo caso, buscas en la plantilla que estas utilizando, el ancho de la cabecera (header).
Por otro lado, si deseas que más imágenes cambien le agregas más líneas o en caso contrario le quitas.

banner[0]="http://aqui-la-dirección-de-la-imagen"

- En donde dice: left (izquierdo), le puedes cambiar por center (centro) o right (derecho).

- Prácticamente esto resulta mucho mas fácil con las plantillas Minima, Denim, Scribe y Tic Tac. Con las demás también, pero se tiene que hacer ciertas modificaciones en la cabecera.

- Para que veas el resultado en tu blog presiona F5 de tu teclado y veras que aparecen distintas imágenes en la cabecera.

- Finalmente, si deseas que te ayude mas con las plantillas que se tiene que hacer ciertas modificaciones, me dejas un comentario mencionándome que plantilla usas.

** Utlizando esto el titulo aparecera, si deseas eliminarlo visita aquí. Simplemente te puede servir como una guía.

Cambiar la Plantilla (Template) del Blog (2) -55-

Si deseas hacer un cambio de imagen en tu blog, en TemplatePanic puedes encontrar plantillas para la versión antigua y nueva de Blogger y también para WordPress.




1. Para usar estas plantillas tienes que guardar en la computadora un archivo zip.
2. Luego el archivo que haz guardado en la PC, lo descomprimes.
3. Ir al blog. Tienes que ir a diseño de plantilla, después a Edición de HTML y clic en Examinar, buscas la plantilla y clic en Subir.
4. Clic en vista previa y luego guardas los cambios. Reconstruye tu blog y listo.

Nota: Para hacer este cambio, te recomiendo que guardes primero el código de la plantilla que estas utilizando.

Poner un icono en la lista de Etiquetas (Categoría o Sección), Comentarios, Autor... -54-

Icono para la lista de Etiqueta (Categoría o Sección)
» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

#Label1 li {
list-style:none;
padding-left: 18px;
background: transparent url(http://Aquí-la-dirección-del-icono) no-repeat center left;
}

Explicación:
- La lista de etiquetas están definidas con la clase Label1.
- La propiedad list-style, especifica el tipo de marcador de artículos de lista.
- La propiedad padding-left, describe cuanto espacio colocamos entre el borde izquierdo y el contenido.
- En el background, la url correspondiente al icono.
** Estos iconos tienen que ser: 16px por 16px.
** Terminando de leer este post, te proporciono 2 páginas de iconos.

Icono para los Comentarios
Es el mismo paso cuando agregas un icono a la lista de Etiqueta. En este caso he puesto dos códigos: en el primero el icono aparece al costado de la palabra comentario y el segundo un icono al lado del nombre del autor.

.post-comment-link {
padding-left:20px;
padding-top:5px;
background: url(http://Aqui-la-direccíón-del-icono) center left no-repeat;
}

#comments dl dt {
font-weight: bold;
font-style: italic;
margin-top: 35px;
padding: 1px 0 0 18px;
background: transparent url(http://Aquí-la-dirección-del-icono) top left no-repeat;
}

Icono para el Autor (Publicado por)
Es el mismo paso cuando agregas un icono a la lista de Etiqueta.

.post-author {
padding-left:20px;
padding-top:5px;
background: url(http://Aquí-la-dirección-del-icono) center left no-repeat;
}

Icono al costado de la palabra Etiqueta
Es el mismo paso cuando agregas un icono a la lista de Etiqueta.

.post-labels {
padding-left:20px;
padding-top:5px;
background: url(http://Aquí-la dirección-del-icono) center left no-repeat;
}

Páginas de Iconos
famfamfam
FreeIconsWeb

Vista de post en Etiquetas/Páginas de archivos -53-

Esto consiste en mostrar sólo los títulos de los post cuando seleccionas una Etiqueta (Categoría o Sección), el cual está provisto de un [+/-] para poder expandir/reducir y leer el post.
Por ejemplo, cuando le das clic en Blogger (nuevo) se mostrará todos los post con su respectivo título pero no la información y al hacer clic en [+/-] recién podrás leer el artículo completo.

1. Ir a plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregas el siguiente código entre <head> y </head>. Preferible que lo pegues al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

<script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'/>

2. Luego buscas lo siguiente:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>

3. Agregas lo siguiente antes de <b:includable id='main' var='top'>

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

4. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas lo siguiente (lo que está con color azul) después de:

<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

5. Finalmente, guardarmos los cambios.

Generador de Botones -52-

Existen páginas web en donde podemos generar o crearnos botones al instante para colocarlos en nuestro blog, foros, etc. Estos pequeños botones son agradables a la vista y pueden servirte como un botón de enlace o para otra utilidad. Lo único que tienes que hacer, es lo siguiente:

1. Ingresar a Button Maker.
2. Editar tanto el texto como los colores del bloque derecho, izquierdo y el botón en general.
3. Finalmente, clic en Generate Button (Generar Botón), lo descargas a tu computadora como si fuera cualquier imagen (clic derecho y escoges Guardar imagen como…). Después tendrás que subirlo a ImageShack o Photobucket, para pegar el botón en el blog.

Ejemplo del estilo del botón:

80x15

88x31

Hay otras páginas que te ofrecen crear los botones de diferentes tamaños (cuestión de gustos). Aquí te dejo algunas:
Píxel Button
Web 2.0 Button Maker (Genera botones de todas las clases y colores, incluso añadiendo iconos con imágenes informativas)
Web Taller
Botones Flash
Graphic Navbar Generator
80x15 Brilliant Button Maker
gtmcknight-buttons (Es una colección con más de 3600 botones antipixel para descargar en forma gratuita, el cual están agrupados en diversas categorías)
Online Button Maker
Súpergenerador de Botones en Línea
Buttonator.com
Feed Subscription Button Maker (Botón de sindicación)

¿Cómo poner una imagen de fondo en el blog? -51-

1. Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y buscas lo siguiente:

body {
background:$bgcolor;
...
}

2. Tendrás que agregar después de background:$bgcolor lo siguiente (lo que está de color azul):

body {
background:$bgcolor url(http://Aquí la direción de la imagen) fixed no-repeat top left;
...
}

Explicación:
- El valor no-repeat, la imagen no se repite. Además podemos cambiarlo por otros valores como repeat-x, repetirá la imagen horizontalmente mientras que el valor repeat-y, repetirá la imagen verticalmente y si se especifica repeat, la imagen se repetirá horizontal y verticalmente.
- El valor fixed, la imagen se desplazará con el contenido o será fija.
- El valor top left, la posición de la imagen.

Nota: La imagen debe ser grande, tipo wallpaper, el cual tienen un ancho de 1024 pixeles (px) y un alto de 685 px aproximadamente.

Ver ejemplo aquí.

Cambiar la cabecera por una imagen (Plantillas Nº 867 y Nº 865) -51-

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitamos agregar simplemente un código. Esto prácticamente resulta para la plantillas Nº 867 y Nº 865.
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque la modificación no va hacer igual para las demás. Quizás esto te puede servir simplemente para guiarte.

Para poner una imagen en la cabecera de las plantillas Nº 867 y Nº 865 tendremos que hacer lo siguiente:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el div con el id header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

2. Una vez ubicado <div id='header-wrapper'>, tendrás que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>
</div>

* Al reemplazar todo esto, te saldrá un mensaje diciendo:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

• Header1

Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 744 px y un alto de 130 px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:

<img src="http://aquí-tu-imagen" width="500" height="100" />

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayudaparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />

Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

¿Cómo poner etiquetas en Blogger? -50-

Para poner Etiquetas, Secciones o Categorías en la Sidebar (Barra lateral) tendrás que hacer lo siguiente:

1. Ir a diseño de la plantilla. Después clic en Añadir un elemento de página, seleccionar Etiquetas, luego le pones un título y lo clasificas por orden alfabético o por frecuencia de uso.

2. Para que aparezca en los posts. Clic en Editar Entradas del blog, luego marcar la casilla correspondiente y poner en el cuadro de texto: Categorías o Secciones, entre otros.

3. Asignar etiquetas. Cuando escribes una entrada, tienes un espacio en la parte inferior del formulario denominado Etiquetas de esta entrada. Ahí tendrás que introducir las etiquetas que quieras, separándolas por comas. También puedes hacer clic en el vínculo Mostrar todo para ver una lista de las etiquetas que hayas utilizado previamente y para añadir una, simplemente haz clic en ella.

Clic en la imagen para agrandarla

4. Etiquetar. En Editar entradas, seleccionamos los posts que queramos que compartan etiquetas.

Clic en la imagen para agrandarla

Stickers para el blog -49-

Blogsticker es un servicio que permite colocar stickers sociales al blog, el cual es una banda diagonal que aparece en la esquina superior del blog.
En Blogsticker podemos encontrar diferentes categorías como: banderas de países, deportes, películas, TV, ciencia, música, entre otras.
Una vez que te registras puedes escoger entre todas sus categorías un máximo de 5 stickers, los cuales se alternaran cada vez que accedan a tu blog, pero al momento que hagan click al sticker, irás a la página de blogsticker y resumirá todas las noticias de los diferentes blogs registrados.
Por ejemplo, si le das click al sticker veras como resume en la página de Blogsticker toda aquella persona registrada al servicio y con su respectivo sticker.

Para comenzar a utilizar el servicio tenemos que hacer lo siguiente:
1. Crear una cuenta (con activación por e-mail).
2. Clic en Claim a new blog, después agregar la dirección de nuestro blog y comprobar que sea nuestro, ya sea mediante un post con un código, subiendo un archivo a nuestro servidor o añadiendo un metatag.
3. Insertar un código Javascript que hace referencia única a tu blog.
4. Empezar a elegir los stickers que aparecerán en tu blog.

Cambiar la cabecera por una imagen (Plantillas Rounders) -48-

Cabecera de página.-Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para la plantillas Rounders (2, 3, 4).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto te puede servir simplemente para guiarte.

En la cabecera de las plantillas Rounders tienen unas curvas, así que lo eliminaremos y luego agregamos la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el siguiente código:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

2. Tendrás que eliminar el background de header-wrapper y la url en header. Después cambiar el valor de padding de header. Entonces el resultado seria así:

#header-wrapper {
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("") no-repeat left bottom;
padding:0 0 8px;
}

3. Luego buscas el div con el id header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

4. Una vez ubicado <div id='header-wrapper'>, tienes que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>
</div>

* Al reemplazar todo esto, te saldrá un mensaje diciendo:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

• Header1

Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 740px y un alto de 120px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:

<img src="http://aquí-tu-imagen" width="500" height="100" />

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayudaparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />

Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

Drop Caps al estilo revista para el blog -47-

Drop Caps.- Es la primera letra de un párrafo que aparece más grande que las demás.

1. Ir a Plantilla, después a Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final, porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

.dropcaps {
float:left;
color: $headerBgColor;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

En algunas plantillas no tienen definido $headerBgColor, así que lo cambias por $titlecolor o sino puedes ponerle el código del color que quieras. Además le puedes cambiar el tamaño de la letra en: font-size.

2. Para que funcione esto necesitas un código más, que lo vas a pegar en:
- Ir a Opciones. Después a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a publicar algo, prácticamente en todas las entradas te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. No olvidar guardar los cambios. El código es el siguiente:
<span class="dropcaps">D</span>
Ejemplo:

Dolores O’Riordan, vocalista del grupo irlandés, The Cranberries presenta su tema ‘Ordinary Day’, primer sencillo promocional de su primer disco en solitario titulado “Are You Listening?”, que saldrá a la venta el 7 de mayo en Estados Unidos y al día siguiente en Europa.
- El resultado es una letra mayúscula que se alarga 5 líneas.

Nota:
En vista previa no se visualiza.

Via: Mandarin Design

¿Cómo puedo modificar el número de entradas que se muestran en mi blog? -46-

posts=entradas

1. Ir a Configuración. Después a Formato.
2. Ajustar el número según considere:No olvidar Guardar valores.

Cambiar la cabecera por una imagen (Plantillas Denim) -45-

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para la plantillas Denim (Stretch Denim, Washed Denim, Stretch Denim Light).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto te puede servir simplemente para guiarte.

En la cabecera de las plantillas Denim eliminaremos un borde y el título para luego agregar la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos lo siguiente:

/* Header
----------------------------------------------- */

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

2. Se tiene que cambiar el valor del border de header, entonces el nuevo valor será: border:0 (sin px). Después en el mismo header agregamos lo siguiente:
background: url(http://Aquí-la-direccion-de-tu-imagen) no-repeat;
Entonces el resultado seria así:

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
background: url(http://i151.photobucket.com/andrewmusic1/Ayudaparaelblog.jpg) no-repeat;
border: 0 solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

3. En h1.title ocultamos el título, así que tendrás que agregar lo siguiente (lo que esta en azul):

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
visibility:hidden;
}

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 760 px y un alto de 120 px. Estos valores son simplemente un aproximado.
- Otra alternativa para este tipo de plantillas es utilizar: Cambiar el titulo por una imagen.
El resultado seria así:

En este ejemplo el titulo y la descripción del blog son imágenes.

Cambiar el título por una imagen
Cambiar la descripción por una imagen