Tirando de Blog: Personaliza tu Blog

Mostrando entradas con la etiqueta Personaliza tu Blog. Mostrar todas las entradas

¿Deseas poner en tu blog unos banners para publicidad en la sidebar?

Este es el código que debes insertar como un nuevo elemento Html/Javascript:


<center>
<div class="banner img">
<a href="URL ENLACE" title="Banner publicidad 15x15"><img style="margin:0px 5px 5px 0px;" alt="Nombre/Título enlace" src="URL IMAGEN"/></a>
<a href="URL ENLACE" title="Banner publicidad 15x15"><img style="margin:0px 0px 5px 0px;" alt="Nombre/Título enlace" src="URL IMAGEN"/></a>
<a href="URL ENLACE" title="Banner publicidad 15x15"><img style="margin:0px 0px 5px 0px;" alt="Nombre/Título enlace" src="URL IMAGEN"/></a>
<a href="URL ENLACE" title="Banner publicidad 15x15"><img style="margin:0px 0px 5px 0px;" alt="Nombre/Título enlace" src="URL IMAGEN"/></a>
</div>
</center>

Los datos que puedes modificar son los que están en rojo.

Y el resultado seria este:

[+/-]

Numerador de paginas para Blogger

Hoy he implementado en el blog un numerador de páginas, tal y como os muestro en esta imagen:

Para hacerlo de una forma rápida y sin necesidad de editar nuestra plantilla, será tan fácil como copiar el código que os dejo a continuación y posteriormente pegarlo como un elemento Html/Javascript. Desde Diseño, Elementos de página, Añadir un gadget, Elemento HTML-Javascript.

Cuando lo tenemos agregado colocaremos el nuevo elemento debajo de las entradas del blog arrastrándolo con el ratón guardamos cambios y listos.

CODIGO:


<style>

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #ccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #ccc;

background-color:#ccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #ccc;

background: #ccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #ccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333;

}

</style>







<script type="text/javascript">



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';



var pageCount = 4;

var displayPageNum = 5;

var upPageWord = 'Anterior';

var downPageWord = 'Siguiente';







var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';



for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0  (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=''){

if(itemCount==0  (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

itemCount++;

}

}



for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}

}else{

upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}



fFlag++;

}



if(p==(thisNum-1)){

html += '<span class="showpagePoint">'+thisNum+'</span>';

}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

html += '<span class="showpageNum"><a href="/">1</a></span>';

}

}else{

html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';

}

}



if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){



if(thisNum>1){

if(!isLablePage){

html = ''+upPageHtml+' '+html +' ';

}else{

html = ''+upPageHtml+' '+html +' ';

}

}



html = '<div class="showpageArea"><span  class="showpageOf"> Paginas ('+(postNum-1)+')</span>'+html;



if(thisNum<(postNum-1)){

html += downPageHtml;



}



if(postNum==1) postNum++;

html += '</div>';



if(isPage  isFirstPage  isLablePage){

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");



if(postNum <= 2){

html ='';

}



for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}



if(pageArea&&pageArea.length>0){

html ='';

}



if(blogPager){

blogPager.innerHTML = html;

}

}



}

</script>



<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

En negrita dos datos que puedes variar.

Visto en: El Bufón Digital

[+/-]

Usar un dominio propio en Blogger

En la última entrada os explicaba los pasos que seguí para reorganizar las etiquetas de dos de mis blogs ya que cree una web fusionando los dos.

Hoy os explicaré como pase del dominio "blogspot.com" a un dominio ".com" propio para utilizarlo en Blogger y dio como resultado a www.planetazaping.com.

Paso a paso hice lo siguiente....

1er. Paso contratar el dominio.

Debemos hacerlo a través de una entidad registradora de dominios (Domain Service Provider) y escoger el que mas nos convenga: .com, .es, .net, .info etc. El mismo dominio elegido puede variar de precio según la empresa que utilicemos para ello.

Blogger tambien ofrece el servicio de venta de dominios.

2o. Configuración nuestro dominio.

Una vez poseemos un dominio tenemos que configurar los DNS (Domain Name System) de nuestro dominio mediante los registros CNAME.

Los pasos a seguir son distintos según cada entidad registrante, en Google encontramos una guía en español de los más comunes.

Guia de Google.

A grandes trazos el proceso es el siguiente:

A – Entrar al panel de administración de nuestro dominio y buscaremos la administración de DNS.

B - Buscaremos los registros CNAME, y debemos eliminarlos todos.

C - Crearemos un registro CNAME nuevo de la siguiente forma:

En el campo de NAME escribiremos www.

Y en el campo HOST NAME escribiremos ghs.google.com

Una vez echo esto ya tenemos la ruta creada apuntando a nuestro blog, y ya podemos guardar las modificaciones.

3o. Configuración de Blogger.

Accedemos a Configuración – Publicación.

En Opciones avanzadas donde pone Tu dominio, escribiremos nuestro dominio:

En mi caso http:// www.planetazapping.com

Guardamos la nueva configuración y listos.

Los cambios suelen tardar entre 24 y 48 horas para que los registros sean actualizados y la redirección completada.

En mi caso en cuestión de horas ya funcionaba mi nuevo blog con dominio propio.

Blogger también se encarga de redireccionar nuestro antiguo blog al nuevo.

¿El resultado? Este www.planetazapping.com

Os espero.

[+/-]

Buscador interno para el blog

Hoy mismo he recibido un correo electrónico de Gloria donde me preguntaba como poner un buscador interno en su blog.
Sin muchas complicaciones he pensado que es el que yo uso en mi blog, si alguien también lo necesita aquí os dejo el código para que lo podáis utilizar:

<form action="http://search.blogger.com/" name="b-search">
<input id="b-query" name="as_q" type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input value="tirandodeblog.blogspot.com" name="bl_url" type="hidden"/>
<input id="b-searchbtn" alt="Search This Blog" value="Busca" title="Buscar en Tirando de Blog" onclick="document.forms['b-search'].bl_url.value=
' tirandodeblog.blogspot.com '" type="submit"/>
</form>

Del código anterior podéis modificar lo que os resalto en rojo, lo que viene en azul es donde tenéis que poner la dirección de vuestro blog.

Espero que sea de vuestra utilidad

[+/-]

Desvaneciendo

[+/-]

Personalizar nuestros comentarios

El pasado 17/04/09 recibí un comentario de Zorra que decía así:

"Hola Sisco: Quisiera saber como puedo lograr que en mi blog mis comentarios aparezcan como los tuyos aquí, es decir de diferente color y la firma sobre el lado derecho? Gracias y besos!"

Ante todo disculpa mi tardanza y ahora nos ponemos manos a la obra:

Las instrucciones que os daré son para la plantilla Mínima y estan extraidas del blog de Rosa. Las explicaré en tres pasos.

1er. Paso: Configurar formulario de comentarios.

Una vez configurado el formulario para ser mostrado como una entrada incrustada a continuación, haremos lo siguiente:

2º Paso: Mostrar los comentarios del autor resaltados.
Accedemos a nuestra plantilla - Edición de HTML - Expandir plantillas de artilugios y buscaremos el código que corresponde al bloque de comentarios y añadiremos el código resaltado en rojo:

<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'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<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'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Seguiremos en nuestra edición de la plantilla y buscaremos:

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Una vez localizado el código anterior, a continuació le añadiremos lo que os resalto en rojo:

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3D9FF;
}

Gracias a estas últimas líneas podemos personalizarlo a nuestro gusto, color fondo, grosor y color del borde.

3er. Paso: Colocar una firma en cualquier de los lados del comentario.

Una firma similar a la que yo muestro en mis comentarios la obtendréis en My Live Signature.

Si ahora queremos colocar una imagen que sirva como firma de nuestros propios comentarios, y para ello buscaremos esta parte del código anterior y añadiremos lo que os muestro en rojo:

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

Ya solo nos queda añadir antes de ]]></b:skin> este otro código:

 .firma {
display:block;
width: 58px;
height: 32px;
padding-left: 90%;
}

Mediante estas otras líneas podéis controlar el ancho (width) y alto (heigth) de nuestra imagen, en padding-left: 90%; la posición de la misma, el valor left podéis variarlo por rigth o center.

Espero sea de vuestra utilidad y recordad que ante la duda, un buen consejo es hacer siempre una cópia de vuestra plantilla.

[+/-]

Tres columnas en el pie del blog

Hoy he instalado tres columnas en el pie de este blog, ¿Te apetece ponerlas en el tuyo?

Ante todo debemos retirar cualquier elemento que tengamos colocado en el pie del blog desplazándolo momentáneamente a la sidebar.

Accederemos a nuestra plantilla en “Edición Html” no es necesario expandir los artilugios y buscaremos el siguiente código en la plantilla.

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Cambiaremos la línea <b:section class='footer' id='footer'/> por este código:

<div id='footer-columna-contenedor'>


<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>


<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>


<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>


<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>


<div style='clear:both;'/>

<p>

</p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>


<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>


</div>

<div style='clear:both;'/>


</div>

Una vez hemos añadido el código anterior antes de ]]></b:skin> pegaremos este nuevo código.

#footer-columna-contenedor {
clear:both;
}

.footer-columna {
padding: 10px;
}

Guardamos los cambios y ya podemos colocar los elementos que habíamos retirado a la sidebar en el sitio que deseemos, el resultado final seria este:

[+/-]

Cambiar de lado la sidebar

[+/-]

Añadir un vídeo a una entrada del blog

[+/-]

Bordes

[+/-]

Enmarcar el título de las entradas

Hasta el momento hemos enmarcado :

· La fecha de nuestros post.

· El pie del post.

Hoy lo que haremos es enmarcar el título de los post:

Accederemos a “Edición de HTML”, no es necesario expandir artilugios.

Buscaremos /*Posts

Y luego el siguiente código:

.post h3 {

  margin:.25em 0 0;

  padding:0 0 4px;

  font-size:140%;

  font-weight:normal;

  line-height:1.4em;

  color:$titlecolor;

Eliminamos:

color:$titlecolor;

Y pegamos el siguiente código:

background-color: #99C9FF;

Si queremos centrar el título del post añadiremos:

text-align:center;

Este es el resultado:

Podemos añadir también un borde pegando en el mismo sitio el siguiente código:

border: dotted #000000; 4px

Quedaria asi:

El código final con todas nuestras modificaciones seria este:

.post h3 {

  margin:.25em 0 0;

  padding:0 0 4px;

  font-size:140%;

  font-weight:normal;

  line-height:1.4em;

  background-color: #99C9FF;

text-align:center;

border: dotted #000000; 4px

}

Por supuesto podemos modificar el color de fondo (#99C9FF;) y el grosor del marco (line-height:1.4em;), el tipo de borde (dotted), también podriamos incluir mas cosas como por ejemplo una imagen de fondo.

[+/-]

Ranking de comentaristas de nuestro blog

¿Os gustaría mostrar en vuestra sidebar una lista de las personas que dejan más comentarios en nuestro blog?

En Blogger Buster nos muestran un artilugio que permite mostrar las 10 personas que más han comentado en el blog, mostrando el número de comentarios que han hecho.
En la pagina encontramos un editor de código para crear el widget a mostrar en nuestra sidebar.

Para crearlo haremos lo siguiente:

En Widget Title escribe el nombre que desees que tenga tu nuevo artilugio.
En Blog URL añade la dirección de tu blog (sin http://, eso ya lo añade el artilugio).
En Filter your name, pondremos el nombre con el cual solemos responder los comentarios para que este sea filtrado y no muestre nuestros propios comentarios.

Una vez hayamos rellenado todos los datos haremos clic sobre el botón Customize y se nos activará el botón de Add to blog>>. Si clicamos sobre él y se abrirá una nueva pestaña con la página de Blogger de Añadir elemento de página. Selecciona el blog en el que lo quieras poner, clica sobre "Añadir artilugio" y ya lo puedes colocar en la posición que desees de tu sidebar. Como no, también podemos obtener el código html para que podamos hacerle alguna modificación:

<script type="text/javascript">

function pipeCallback(obj) {

 document.write('<ol>');

 var i;

 for (i = 0; i < obj.count ; i++)

 {

 var href = "'" + obj.value.items[i].link + "'";

 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

 document.write(item);

 }

 document.write('</ol>');

 }

 </script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=720a4578c7b83dfce64615cb0ad3c642&url=http%3A%2F%2Ftirandodeblog.blogspot.com&num=10&filter=Sisco" type="text/javascript"></script>

<span style="gt;Widget by <a href="http://www.bloggerbuster.com">Blogger Buster </a></span>

Una vez seguidos todos los pasos, he obtenido el siguiente resultado para este blog:

Visto en: Meta Microcosmos

Actualización 09/03/2009: El widget sólo contabiliza los últimos 500 comentarios del blog, a tal efecto puede ser que el número de comentarios de cada uno de nuestros visitantes varie según los comentarios hechos en la franja de los últimos 500 comentarios.

Actualización 13/08/2009: Parece ser que el Widget que os presento en este post ha dejado de funcionar, de todas formas siguiendo las instrucciones podeis probarlo vosotros mismos.

[+/-]

Importar y exportar en Blogger

Este fin de semana he estado reeditando las etiquetas del blog para organizarlas según temáticas y de paso hacer alguna que otra actualización a post antiguos. Fue entonces cuando vi que en nuestro editor de entradas había una nueva opción: “Entradas Importadas”.

Buscando un poco mas de información he encontrado en Blogger Buzz una notíca de 9 de enero de 2009 donde daban a conocer el lanzamiento de la nueva opción de Blogger en Borrador: "Importar y Exportar para blogs de Blogger". Esta nueva función abre un nuevo rango de portabilidad para nuestros blogs, ya que permitirá combinar blogs, transferir secciones de posts y realizar copias de reserva para nuestros posts y comentarios.

Combinar dos o más blogs en uno:

Si tenemos algunos blogs separados y nos gustaría comenzar de cero, ahora podremos combinarlo en un blog nuevo.
Mover posts individuales de blog a blog:

Publicar los posts en varios blogs, transferir grandes grupos de posts de un blog a otro con un sólo clic.
Hacer una copia de seguridad del blog para nuestro propio almacenamiento:

Nunca es una mala idea crear copias de reserva de nuestro propio contenido y ahora podremos exportar fácilmente una versión de archivo de nuestro blog al disco duro con una herramienta simple.
Mover nuestro blog a otra plataforma de blogs:

Gracias al formato estandar de Blogger, Atom XML abrirá nuevos canales entre proveedores y dejará llevarse el contenido en caso que decidamos movernos a otra plataforma. Y desde luego, si decidimos volver a Blogger, podremos importar los archivos exportartados, según Blogger, en cuestión de segundos.

Para acceder a esta función lo haremos desde Escritorio accediendo a la solapa Configuración, Básico.

Algunas advertencias:

Actualmente sólo soporta la importación desde blogs de Blogger. Aun no es posible importar desde WordPress, Typepad, LiveJournal o cualquier otra plataforma de blogs.

Antes de importar un blog por primera vez, recomienda crees un nuevo blog de prueba para que podamos practicar el proceso de importar. Una vez veamos su funcionamiento comenzar a probar con el blog autentico.

Si has habilitado una advertencia de contenido para tu blog, tendrás que removerla antes de que tu blog pueda ser exportado.

Extraído de: Blogger Buzz.

La ayuda que estas buscando?

Insertar vídeos de Youtube en nuestra sidebar

Menú vertical fácil

Códigos HTML para nuestro blog

Banners para publicidad

Numerador de paginas para Blogger

Usar un dominio propio en Blogger

Re-etiquetar

Subir pdf a Blogger (2)

Subir un powerpoint a blogger

Buscador interno para el blog

Desvaneciendo

Personalizar nuestros comentarios

Tres columnas en el pie del blog

Cambiar de lado la sidebar

Añadir un vídeo a una entrada del blog

Bordes

Enmarcar el título de las entradas

Ranking de comentaristas de nuestro blog

Importar y exportar en Blogger

Buscador interno:

GRACIAS POR SEGUIRME

Cosas para no perderse

VISITAS

Menciones:

Premios