Mostrando entradas con la etiqueta zona de blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta zona de blogger. Mostrar todas las entradas

miércoles, 3 de agosto de 2011

Borrar el Cartel "MOSTRAR ENTRADAS"

Este cartel que personalmente me parecia molestoso y antiestético ahora lo podremos borrar

 1er paso : nos dirigimos a diseño en la pestaña HTML expandir plantilla de artilugios

2do paso : con la ayuda del buscador (control + F) buscamos el siguiente codigo


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

3er paso: una ves encontrado debemos borrarlo y guardamos con eso se soluciona el problema.

 

Cambiar el ancho del blog

Blogger por defecto nos muestra unas plantillas en las cuales la mayoría nos da un reducido ancho tanto para la barra lateral como donde va el contenido pero antes de explicarles como cambiar las dimensiones tienen primero que aprender cuales son las partes:

Ahora que ya sabemos como se llaman cada uno vamos mano a la obra, dirijamonos primero en edición Html y allí con la ayuda del "Ctrl +F" buscamos lo siguiente:


#header {

y aumentamos el valor 100 (por decir un ejemplo) más donde dice "Width".

#content-wrapper {

Le aumentamos los 100 que aumentamos al comienzo para que guarde concordancia.

ahora vamos a la sección:

#sidebar-wrapper {

y le cambiamos el valor "width" a uno mayor por ejemplo 30 más

también nos dirigimos a la sección:

#main-wrapper {

y le cambiamos el valor a uno mayor pero que no pase de la diferencia del aumento del "content wraper" con el "sidebar" por lo que en este caso sería 70 (100-30)


*width significa ancho por lo que aumentarle el valor la plantilla se hará más ancha.

*pueden jugar con los valores hasta que sea de su agrado pero recuerden que el ancho normal maximo standar es 980px de ancho

Desabilitar el Clik derecho con un mensaje

Con este script cada vez que la visita potencialmente no podrá sobrear las letras ni nada y cada ves que de un clik derecho se mostrara un mensaje de derecho de autor o uno creado por tí

Como implementarlo?

1. Ubicamos desde Edicion HTML este código:


</body>

y antes de él pegamos:


<script language='JavaScript'>
function click() {
if (event.button==2) {
alert('Copyright todos los derechos reservados');
}
}
function keypresed() {
alert('Copyright todos los derechos reservados ');
}
document.onkeydown=keypresed;
document.onmousedown=click;
</script>


3. Guardas la plantilla y listo!

puedes cambiar el mensaje que deseas mostrar editando donde dice "Copyright todos los derechos reservados" espero te sirva

Efecto desvanecer pagina al clikar en un enlace

hola estoy muy feliz gracias a la ayuda de mi amigo Kippers he podido conseguir un truco realmente vistoso y como se darán cuenta ya lo estoy utilizando en el blog.

se trata de un efecto de desvanecimiento o degradado en la pagina que al entrar clikar en un enlace de la pagina o al salir de ella dara la sensacion de que la página se desvanece.

el truco es realmente sencillo solo deben pegar despues del <head>
el siguiente código:



<meta http-equiv="Page-Enter" content="BlendTrans(Duration=1)" />

<meta http-equiv="Page-Exit" content="BlendTrans(Duration=1)" />





Y listo espero que el truco sea de su agrado.
Actualización este truco solo es visualizable en Internet Explorer, no es compatible con Mozilla

Poner Post Relacionados con imagenes con with Thumbnails en el blog

una buena noticia mis amigos bloggers desde ya se podrá poner muy facilmente los post relacionados, de una manera sencilla y rapida que hará que tu visitas no se vallan tan rapido como llegaron sino que ahora tendran mas de donde poder elegir para leer, ahora bien esta herramienta es verdaderamente maravillosa, aunque tiene un pequeño inconveniente que despues dire cual es, ahora bien para poder hacer uso de esta herramienta tan solo debemos de ingresar a:

http://www.linkwithin.com/learn

allí nos horientaran como, pues bien ahora que ya hicieron los pasos como dice en la pagina en tres sencillos pasos ya tendran su widget de post relacionados con imagenes funcionando,



ahora el pequeño inconveniente es que este widget tambien se muestra en la portada ocsionando la demora al cargar si es que la portada tiene varias entradas, adema saldran las entradas relacionadas depues de cada entrada, para esto la solucion es sencilla, lo unico que hay que hacer es ir al panel de diseño copiar el codigo de tu gadget linkwithin copiar y eliminar el widget.


copie el codigo que me daba el widget y lo transformas con este servicio

Escape HTML - Blogrowds Resources

una vez convertido guardas en el blog de notas el codigo


y me vas a expandir plantilla de artilugios

busca este codigo:


</b:includable>

<b:includable id='commentDeleteIcon' var='comment'>




y arriba de ello pegas esto:


<b:if cond='data:blog.pageType == "item"'>



<!-- Aquí el código de tu widget convertido -->



</b:if>

Boton agregar a favoritos en tu blog

aqui les traigo otro truco sencillo, un boton que hará que tus visitas si así lo consideran conveniente agregarte facilmente a sus favoritos, el siguiente códigolo agregan desde Panel de control -> Diseño -> Añadir Gadget -> html/javascript:


<center><script language="JavaScript">
function agregar(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://aquitublog.blogspot.com";
var titulo="Aqui pones el titulo de tu blog";
window.external.AddFavorite (url,titulo);
}
else {
if(navigator.appName == "Netscape")
alert ("Presiona Crtl+D para agregar Aqui otra ves el titulo de tu blog a tus favoritos");
}
}
</script>
<input value="Agregar a favoritos" onclick="javascript:agregar();" type="button"/></center>



texto con efecto maquina de escribir

Codigo:

 <script language="JavaScript1.2"><!--



//Secify scroller contents

var line=new Array()

line[1]="texto 1"

line[2]="texto 2"

line[3]="texto 3"

line[4]="texto 4"

line[5]="texto 5"

line[6]="texto 6 (si quieres puede seguir hasta el infinito)"



//Specify font size for scoller

var ts_fontsize="12px"



//--Don't edit below this line



var longestmessage=1

for (i=2;i<line.length;i++){

if (line[i].length>line[longestmessage].length)

longestmessage=i

}



//Auto set scroller width

var tscroller_width=line[longestmessage].length



lines=line.length-1 //--Number of lines



//if IE 4+ or NS6

if (document.all||document.getElementById){

document.write('<form name="bannerform">')

document.write('<input type="text" name="banner" size="'+tscroller_width+'"')

document.write(' style="background-color: '+document.bgColor+'; color: '+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')

document.write('</form>')

}



temp=""

nextchar=-1;

nextline=1;

cursor="]"

function animate(){

if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){

nextline++;

nextchar=-1;

document.bannerform.banner.value=temp;

temp="";

setTimeout("nextstep()",3000)}

else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){

nextline=1;

nextchar=-1;

document.bannerform.banner.value=temp;

temp="";

setTimeout("nextstep()",1000)}

else{

nextstep()}}



function nextstep(){



if (cursor=="\\"){

cursor="|"}

else if (cursor=="|"){

cursor="/"}

else if (cursor=="/"){

cursor="-"}

else if (cursor=="-"){

cursor="\\"}





nextchar++;

temp+=line[nextline].charAt(nextchar);

document.bannerform.banner.value=temp+cursor

setTimeout("animate()",25)}



//if IE 4+ or NS6

if (document.all||document.getElementById)

window.onload=animate

// --></script>



Efecto Página tiembla al entrar en ella

El día de hoy y despues de una larga ausencia les traigo un javascript que quizás te pueda interesar para que sirve o que hace?, pues siemplemente al ingresar en tu blog (o web) el navegador temblará por el lapso de un corto tiempo, pues si eso es todo lo que hace este script:

para implementarlo tan solo tendrás que copiar el script despues del head (primero) desde Diseño -> Edición HTML. tal y como lo muestro en el ejemplo:


Ahora una pequeña aclaración, el código inertara un pequeñisimo botoncito nada molesto. (podríamos llamarlo una pequeña retribución por el hosting)

Código

<script type="text/javascript"
src="http://juanmosa.com/javascript/temblar.js"></script>

*en esta oportunidad se ponde debajo del head para que sea lo primero en cargar y en ejecutarse tal y como muestra la imagen del ejemplo.

Jutificar el texto en blogger

Pues hoy vengo a traerles un truco para los que gustan de los parrafos justificados para los que aun no saben a lo que me refiero les dejo esta imagen:

Fijense que en azul tiene la caracteritica de esta alineado a la izquierda dando la impresion de una discordancia simetrica al final de cada linea, por otro lado en la linea roja tiene el atributo alineación justificada dando simetría lo que le da un acabado profesional. En blogger por defecto tiene la de alineación a la izquierda, desde el editor puedes hacer que post individuales usen la alineación que quieras independientemente de las demás.

Pero si lo que tu buscas es que la alineación justificada se de para todas tu entradas puedes implementar cambiando un pequeño código desde edición html:

/* Outer-Wrapper */
 
#outer-wrapper { 
 width: 980px; 
 margin: 0 auto; 
 padding: 0; 
 text-align: justify; 
 font: normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif; 
 border: 4px ridge #3399cc; 
 background: #c3d9ff; 
}

fijense en la parte resaltada de verde pues bien buscamos la sección:

#outer-wrapper { 
con la ayuda de ctrl + F y cambiamos la parte en la que dice text-align: left; por justify; tal y como el código de arriba, si es que no hay nada entonces agregale esa linea del código y listo.

Dos Columnas En La Entrada

Ejemplo:


hola hoy he encontrado un nuevo truco sirve para escribir un post con dos columnas
como pueden ver este truco sirvio para hacer este post quizá te sirva espero que si


*ahora para hacer esto es muy simple aqui les dejo el código:
<div style="float: left; width: 45%">texto-columna-izquerda</div><div style="float: right; width: 45%">texto-columna-derecha</div>
<div style="clear: both"></div>

tan solo ponga su texto en donde dice texto columna izquierda y derecha

martes, 2 de agosto de 2011

Nube de entiquetas que se mueve en 3D para blog de blogger

Si queremos que las etiquetas de nuestro blog estén en una nube de tres dimensiones en movimiento deberemos hacer lo siguiente:

1) Vamos a Diseño
2) Edición HTML
3) Buscamos <b:section class='sidebar' id='sidebar' preferred='yes'> (tecleamos Ctrl + F para buscar más rápido)
4) Una vez localizado pegaremos justo después el siguiente código:



<b:widget id='Label99' 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'>
&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>




Si queremos modificar el tamaño tan solo debemos cambiar el 250 y 200 por los valores que queramos.

Clicamos en vista previa y si todo está bien guardamos la plantilla.

Suscribirse sólo a etiquetas determinadas

Si tienes un blog en el que tratas muchas temáticas, es posible que no tengas lectores fieles, pero afortunadamente puedes fidelizarlos si permites elegir el suscribirse sólo a una o varias etiquetas.

Para añadir la posibilidad de suscribirse a determinadas etiquetas de tu blog debes hacer lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Marca la casilla expandir artilugios
4) Busca <b:loop values='data:labels' var='label'> (teclea Ctrl + F para buscar más rápido)
5) Te encontrarás con algo así:


<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>


Pues bien, debajo de <li> pega el siguiente código:


Código a copiar/pegar<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Suscribete por etiquetas' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

6) Clica en vista previa y si todo está correcto, guarda tu plantilla. Ahora ya tendrás disponible la opción de que tus lectores se puedan suscribir a una etiqueta en concreto.



EXTRA: Si estás atento te habrás dado cuenta que en lugar de proporcionar la opción de suscribirse también puedes poner una imagen al lado de las etiquetas. Para ello, en lugar de poner el código del paso 5) pon este:


<img src='http://www.ENLACEdelaIMAGEN' style='vertical-align:middle;border:0'/>


Sólo deberás poner el enlace de la imagen que quieras, pero siempre teniendo en cuenta la dimensión de la imagen. Yo recomiendo no exceder de un tamaño 16x16px.

Carrusel De Imagenes

Para colocar este slideshow (carrusel de imágenes) en nuestro blog de Blogger deberemos seguir las siguientes acciones:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> y antes pegamos el siguiente código:
<script src='http://pmsc.free.fr/gb/J/1039115625.js' type='text/javascript'/>
<script src='http://pmsc.free.fr/gb/J/1039115553.js' type='text/javascript'/>

<style type='text/css'>
#mygallery{overflow: hidden;}
</style>

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjhet4BdAOrxA64P2LXTzUJIzUxss0c2vI57td0WonyzpsvN6FFINsti_PiM1HCcCil77ErZXhDkeKceSk2xfhUp9JiZgG7xLk7WGHk8AbFb3U1qlgG016f05ib7Njz3a0MHF-ZDx_UZw/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXtGICHi97H5J9ezNbXAV9HI53_j6b_qD-A9qvtOAwCXDndHTTVuLGHT9VvCau-6VYh-5SBJVfsCVLEAGUPAwgccW7vnHLXn2POR-Ykb_qn0mGR4xA4dCl2HMIJ59uxMp1PrVEO0zrQ-U/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})

</script>

Estos dos scripts los he subido a un servicio gratuito para subir scripts. Te recomiendo que los guardes por si algún día fallan.

4) Ahora buscamos el código ]]></b:skin> y añade encima lo siguiente:
#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgum7qSytTCTUEl7YU4Pg7L_LTACMqnDI1qngzVBF135jRTl14mMGW_9W30l-61T3Vr_RNOXn3ERaxGuQGskLTeg4q2qpINbkkYBZYa0thrCP4QhDWbNDmt6Sn26rqQjwaMmeRKC2PCJQ/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}

.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

5) Ahora clicamos en vista previa y si no hay ningún error, guardamos la plantilla.
6) Finalmente vamos a Diseño> Elementos de página> Añadir un gadget> HTML/Javascript y allí pegamos el siguiente código:

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 2nd -->

<!-- 3rd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 3rd -->

<!-- 4th imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" alt="DESCRIPCION" title="TITULO"> <img src="http://ENLACEIMAGEN.jpg"/> </a>
</div>
<!-- end code of 4th -->

</div></div></div>


Si nos fijamos en ese último código, en él es donde incluiremos cada imagen del slideshow (carrusel de imágenes). Cada bloque de código por imagen esta diferenciada por  <!-- 1st imagen --> y <!-- end code of 1st --> y entre ese código ese está el enlace de la imagen que deberemos incluir, concretamente en http://www.ENLACEENTRADA.html deberemos poner el enlace al que queramos que se nos dirija cuando hagamos clic en una imagen determinada; y en http://ENLACEIMAGEN.jpg deberá ir el enlace de la imagen que queramos incluir. Y así con todas imágenes predefinidas. No te olvides DE la descripción y título del SEO imágenes para Blogger. Si queremos añadir o eliminar imágenes basta con fijarse en el código y ver cómo está formado. No guarda ningún secreto.

Todo listo, espero que te guste el resultado final.

Slide (galería de imágenes) para tu blog

Voy a tratar de explicar lo mejor posible cómo poner un slide de imágenes que rotan en vuestro blog. Pero, ¿qué es un slide? pues básicamente un slide es una galaría de imágenes que van pasando una tras otra y que puedes parar que roten si mantienes el cursor de tu ratón sobre una de las ímagenes. Además, si clicas en una de las imágenes aparecerás en la entrada de tu blog que le hayas asignado a esa imagen.
 Llegamos al punto fuerte, ¿cómo instalar esta galería de imágenes en tu blogspot? Pues debemos seguir los siguientes pasos:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript. En él pega el siguiente código:




<script type="text/javascript">
//Ancho (en pixeles)
var sliderwidth="650px"
//Alto
var sliderheight="150px"
//Velocidad 1-10
var slidespeed=2
//Color de fondo:
slidebgcolor="#000000"

//Vínculos y enlaces de las imágenes
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'
leftrightslide[1]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'
leftrightslide[2]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'
leftrightslide[3]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'
leftrightslide[4]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'

var imagegap=""
var slideshowgap=5


var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>



Cosas que debes modificar a tu gusto:
var sliderwidth="650px" -> Este es el ancho total que tendrá la galería de imágenes.
var sliderheight="150px" -> Este es el alto total que tendrá la galería de imágenes.
var slidespeed=2 -> El 2 es la velocidad que tendrá el movimiento de las imágenes. Puedes emplear una escala del 1 (menos velocidad) al 10 (más velocidad).
height="Xpx" -> Sustituye la X por el tamaño que le pusiste al ancho total que tendrá la galería de imágenes, es decir, var sliderheight="150px", de esta forma conseguirmos que las imágenes tengan una altura máxima.


Enlaces de la página a enlazar y enlaces de las imágenes
http://www.ENLACEdelaENTRADA.blogspot.com -> Aquí debes poner el enlace al que quieras que se acceda cuando se clique sobre la imagen.
http://ENLACEdelaIMAGEN.jpg -> Aquí debes poner el elace de la imagen.
title="Aquí el título" -> Aquí pon el nombre que quieres que aparezca cuando pasas el cursor del ratón sobre la imagen.


¿Cómo añadir más imágenes? Pues bien fácil, después del [4] deberás pegar el [5] y así sucesivamente:
leftrightslide[5]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'

IMPORTANTE
1) Todas las imágenes deben tener el mismo tamaño (ancho y alto) para que la galería de imágenes no quede mal. Si te salen descuadradas ves adaptándolas a tu gusto.
2) Este gadget sólo funciona como gadget, no funciona en una entrada.

Menú vertical para tu blog de blogger

Para instalar este menú debes hacer lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Busca ]]></b:skin> (teclea Ctrl + F para buscar más rápido)
4) Justo arriba de ]]></b:skin> pega el siguiente código:

/* Menu nav
----------------------------------------------- */

#nav,#nav li {
margin: 0;
padding: 0;
list-style: none;
}

#nav a {
width: 140px;
height: 27px;
background: url(http://img46.imageshack.us/img46/2955/menunav.gif) no-repeat;
color: #666;
display: block;
font: bold 12px/22px Arial, sans-serif;
text-decoration: none;
text-indent: 14px;
}

#nav a:hover {
background-position: 0 -27px;
color: #900;
text-decoration: none;
}

Código a copiar/pegar

5) Clica en vista previa y si no hay ningún problema, guarda tu plantilla.
6) Ahora ves a Diseño->Elementos de página->Añadir un gadget->HTML/Javsscript. En él pega el siguiente código:

<ul id="nav">
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
<li><a href="#">Título</a></li>
</ul>

Código a copiar/pegar

Sustituye cada # por el enlace de la entrada que quieras enlazar en este menú.

Si deseas añadir o eliminar enlaces en el menú, fíjate en la estructura. Elimina o añade esta línea:
<li><a href="#">Título</a></li>

¿Qué modificaciones puedes hacer? Pues poca cosa, a menos que decidas cambiar la imagen de fondo (http://img46.imageshack.us/img46/2955/menunav.gif) por otra que hagas. Debes tener en cuenta que si empleas otra imagen deberás adaptar el tamaño width (ancho) y height (alto).

Menú desplegable con pestañas de varios niveles para tu blog de blogger

Si quieres un menú para tu blog de blogger que tenga varias pestañas y que cuando pasas el ratón por encima salgan más submenús debemos hacer lo siguiente:


1) Vamos a Diseño
2) Edición de HTML
3) Buscamos el código: ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes de ]]></b:skin> pegamos el siguiente código:


/* Menu desplegable
------------------------------------------------------*/

#menubloque {
background:#8c8c8c;
width: 500px;
height: 35px;
font-size: 13px;
color: #ffffff;
border: 1px solid #424242;
padding: 0px auto 0;
font-weight: bold;
margin: 15px auto 0;
font-family:'Trebuchet MS',Arial,Verdana,Sans-Serif;
}
#menudesplegable li {
margin: 0;
list-style: none;
padding: 0;
}
#menudesplegable {
margin: 0;
padding: 0;
}
#menudesplegable ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menudesplegable li a, #menudesplegable li a:link, #menudesplegable li a:visited {
color: #FFFFFF;
display: block;
font-weight: normal;
padding: 9px 15px 8px;
text-transform: lowercase;
margin: 0;
}
#menudesplegable li a:active, #menudesplegable li a:hover {
color: #000000;
background: #cccccc;
text-decoration: none;
margin: 0;
padding: 9px 15px 8px;
}
#menudesplegable li li a:link, #menudesplegable li li a, #menudesplegable li li a:visited {
color: #FFF;
font-weight: normal;
text-transform: lowercase;
background: #bbbbbb;
width: 150px;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#menudesplegable li li a:hover, #menudesplegable li li a:active {
background: #e3e3e3;
color: #000000;
padding: 7px 10px;
}
#menudesplegable li {
float: left;
padding: 0;
}
#menudesplegable li ul a {
width: 140px;
}
#menudesplegable li ul {
position: absolute;
margin: 0;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
padding: 0;
}
#menudesplegable li:hover, #menudesplegable li.sfhover {
position: static;
}
#menudesplegable li ul ul {
margin: -33px 0px 0px 170px;
}
#menudesplegable li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#menudesplegable li:hover ul, #menudesplegable li li:hover ul, #nav li li.sfhover ul,#menudesplegable li li li:hover ul, #menudesplegable li.sfhover ul, #menudesplegable li li li.sfhover ul {
left: auto;
}
/* Fin menu desplegable ---------------------------*/




5) Ahora buscamos <div id='content-wrapper'>
6) Justo antes de <div id='content-wrapper'> pegamos el siguiente código:


<div id='menubloque'>
<ul id='menudesplegable'>
<li><a href='URL DE LA PAGINA'>Inicio</a></li>
<li><a href='URL DE LA PAGINA'>Contácto</a></li>
<li><a href='URL DE LA PAGINA'>Sobre mí</a></li>
<li>
<a href=''>Categorías</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li>
<a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>

<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href=''>Categorías 2</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 5</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>




El bloque señalado en verde es el bloque que contiene los enlaces "fijos" es decir, los que no despliegan opciones.

Las palabras marcadas en naranja representan los nombres que despliegan las opciones (o los enlaces).

Sustituye:
TITULO: por el título de la página o el enlace.
URL DE LA PAGINA: por la dirección del blog o la página web.

Menú vertical para blogger (III) de color verde

ara poner este menú en tu blog sigue los siguientes pasos:

1) Vamos a Diseño
2) Edición de HTML
3) Busca ]]></b:skin> (teclea Ctrl + F para buscar más rápido)
4) Justo arriba de ]]></b:skin> pega el siguiente código:


Código a copiar/pegar/* Menu Green Bubble
---------------- */
#Greenbubble {
padding:0;
width:150px;
margin:10px 0 0 10px;
}

#Greenbubble ul {
float:right;
margin:0;
padding:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#Greenbubble li a {
display:block;
margin:0 0 10px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj64WfmnOj3I6RV1Mupd0TCHu7WySQLHSco68HdKOklGAlup5P-0OZN7DVL6AHgwoIP-X7UhYKS2gKZet7rGwu7FLYqx02PHPDhoENcKoS03CSplFK2Y6myfon4TmJAohsJS_5jnZXJh5I/s1600-r/greenbubble.png) no-repeat scroll 0 0;
background-position: -22;
color: #ffffff;
font-family: Tahoma;
font-size: 13px;
height: 21px;
padding: 2px 0 0 30px;
width: 122px;
}
#Greenbubble li a:hover {
color:#FFFFFF;
font-family: Tahoma;
font-size: 13px;
height: 21px;
text-decoration:none;
background-position: 0px -23px;
}

/* Fin menu Green Bubble
----------- */

5) Clica en vista previa y si no hay ningún problema, guarda tu plantilla.
6) Ahora ves a Diseño->Elementos de página->Añadir un gadget->HTML/Javsscript. En él pega el siguiente código:


<div id="Greenbubble">
<ul>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
<li><a href="URL DE LA PAGINA" >TITULO</a></li>
</ul>
</div>


Sustituye URL DE LA PAGINA por la URL correspondiente de la página o entrada que quieras enlazar. Después en TITULO pon el nombre que desees dar a ese enlace.

Para añadir más enlaces, fíjate en la estructura y añade esta línea:
<li><a href="URL DE LA PAGINA" >TITULO</a></li>



No olvides visitar todos los otros menu para blogger que ya expliqué anteriormente.

Cómo numerar las páginas en Blogger (II)

El proceso de paginación en Blogger es muy sencillo y lo lograremos siguiendo los siguientes pasos:

1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "Expandir artilugios"
4) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
5) Antes de ]]></b:skin> pegaremos el siguiente código:

<!-- Paginar Blogger -->
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
<!-- Fin Paginar Blogger -->

6) Ahora buscamos </body>
7) Antes de </body> pegaremos el siguiente código:

<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Observaciones:
var postperpage=7;   -> Indica el número de entradas por página.
var numshowpage=6;   -> Indica el número de páginas que se mostrarán en el scroll.

8) Por último buscamos 'data:label.url' y cada vez que lo encontremos lo encontremos lo sustituimos por 'data:label.url + &quot;?&amp;max-results=7&quot;' De esta forma estaremos editando la paginación en las etiquetas o categorías (labels).

Ya está todo listo. Espero que te guste esta nueva forma de numerar las páginas en Blogger.

Nube de etiquetas en movimiento

ATENCIÓN:
Este código presentó problemas con el alojamiento de un archivo, el archivo ya ha sido realojado y se ha modificado el código.
Si tu nube de etiquetas ya no se ve elimina la anterior y repite estos pasos.
Si tienes problemas con la nube de etiquetas en Internet Explorer visita la entrada de Oloblogger con otra opción para colocar la nube.



Podemos poner una nube de etiquetas en movimiento (tag cloud) en la sidebar de Blogger con un poco de flash. Para ello usaremos sólo un código que hará todo el trabajo sucio.

Lo primero es ir a Diseño > Edición de HTML y SIN expandir artilugios buscamos esta etiqueta:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Si usas una plantilla del Diseñador de Blogger entonces deberás buscar esta línea:
<b:section-contents id='sidebar-right-1'>

Justo debajo de ella pegamos lo siguiente:
<b:widget id='Label99' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://ciudadblogger.hostzi.com/tagcloud.swf" width="190" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="https://sites.google.com/site/ciudadbloggerfiles/Home/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


Ahora podemos personalizar nuesta nube con los datos que están en color rojo:
Nube de etiquetas, es el nombre del gadget
190 es el ancho
200 es el alto
#ffffff es el color de fondo, en este caso blanco
000000 es el color de la letra
style='12' es el tamaño de la letra
"tspeed", "100" es la velocidad con la que se mueven las etiquetas

Ahora sólo guardan los cambios y listo. Este elemento lo pueden arrastrar donde ustedes quieran.

NOTA: Siempre antes de hacer un cambio en la plantilla deben guardar una copia de ella.

Personaliza la suscripcion de FeedBurner

Si tienes en tu blog una caja de suscripción por mail de FeedBurner o aún si no la tienes puedes obtenerla y personalizarla para hacerla mucho más atractiva y no sólo lograr más tentación para suscribirse al feed, sino hacerla que se adapte al diseño de tu blog.
Por defecto estas cajas de suscripción son así:

Lo que haremos será darle un toque personalizado añadiendo color de fondo, una imagen u otro color de texto.
  1. Primero consigue tu código de esta herramienta en FeedBurner, ingresa a tu cuenta y luego en la pestaña Publicize elige Suscripciones por Email del menú de la izquierda.
  2. Ahora escoge tu idioma y copia el código.
Ese es el código básico, ahora vamos a hacerle unas modificaciones usando como ejemplo el código de mi feed.
Si quieres cambiarle el color de fondo tanto de toda la caja como al área de texto entonces agrega estas líneas:
<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background-color:pink" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Ingresa tu correo</p><p><input style="width:140px; background-color: #ffffff;" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input style="background-color:grey;" value="¡Suscríbete ya!" type="submit"/><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

La primera parte en color rojo es la que dará un color de fondo, en este caso rosa, pero puedes cambiarlo por otro color; la segunda parte en rojo es lo que le da el color al botón, en este caso es un gris oscuro.
Se verá así:


En este ejemplo igual he cambiado el borde, por defecto dice: border:1px yo lo he cambiado por border:6px
También he quitado el letrero que dice: Delivered by FeedBurner, si también quieres quitarlo entonces elimina la parte en color verde.

Igual puedes usar una imágen de fondo y cambiar el color de la letra para que se vea algo así:



<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background: url('http://dl.getdropbox.com/u/647003/bg-colors.JPG');" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><span style="color: rgb(255, 255, 255); font-weight: bold;">Ingresa tu correo</span></p><p><input style="width:140px; background-color: rgb(238, 194, 178)" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input style="background-color:yellow;" value="¡Suscríbete ya!" type="submit"/></form>

En este caso la primera parte en color rojo es la que agrega la imagen, tú puedes usar la imagen que quieras, sólo cambia la URL por otra.
La segunda parte en rojo le dará un color rosa a la caja de texto; y la última parte es el color del botón, en este caso amarillo.
Y por último la parte en azul es la que cambia el color del texto, yo he puesto en estilo negrita y color blanco para que resalte de la imagen. En cualquiera de los casos puedes modificar los colores por los que gustes.
Incluso puedes cambiar el "Ingresa tu correo" y el "Suscríbete" por lo que tú quieras.

Recuerda que este código es un extracto del mío, así que no lo copies tal como está, consigue el tuyo como expliqué en los primeros dos pasos y luego agrega las líneas de cambios que creas necesarios, de lo contrario tus lectores se suscribirían a mi feed...lo cual no me molestaría.
 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Buy Coupons