blogemundo.tk

Añadir más zonas de gadgets (Cabecera y arriba del post)

2011-10-08T08:25:00.000-07:00

Te ha pasado que quieres agregar un gadget en la cabecera, o quizá arriba de los posts? Seguro que más de alguno le gustaría tener esta opción, tal vez para agregar la fecha actual, un chat, un contador de visitas, o lo que se te ocurra, esto por defecto las plantillas para blogger, no te lo permiten, pero se puede modificar fácilmente.

Primero veremos como añadir gadgets en la cabecera (Header), Ve a Diseño-> Edición de HTML-> busca (Ctrl+F) lo siguiente:

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

Y lo remplazas por esto:

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

Ahora ya se podrán poder hasta 5 gadgets en la cabecera.

Para gadgets arriba de los posts (Main) se hace lo mismo, busca lo siguiente:

<b:section class='main' id='main' showaddelement='no'>

Y remplazalo por:

<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>

De esta manera ya se pueden agregar 5 gadgets arriba de los posts (Solo arriba del primer posts).

Efecto Zoom en Imagenes (Pantalla Semi-Completa)

2011-10-08T08:12:00.000-07:00

Un gran efecto en las imagenes sin duda es el zoom, sobre todo en aquellas imagenes grandes, este efecto permite agrandar una imagen al contorno de la ventana y poder verla con mas detalle, el efecto lo puedes utilizar en una Entrada o en un Gadget, lo que facilita su uso.

Para ello ve a Diseño-> Edición de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify={
 dsettings: {
  magnifyby: 3, //default increase factor of enlarged image
  duration: 500, //default duration of animation, in millisec
  imgopacity: 0.2 //opacify of original image when enlarged image overlays it
  },
 cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
 zIndexcounter: 100,

 refreshoffsets:function($window, $target, warpshell){
  var $offsets=$target.offset()
  var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
  warpshell.attrs.x=$offsets.left //update x position of original image relative to page
  warpshell.attrs.y=$offsets.top
  warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
  warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
  if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
   warpshell.newattrs.x=winattrs.x+5 
  }
  else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
   warpshell.newattrs.x=winattrs.x+5
  }
  if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
   warpshell.newattrs.y=winattrs.y+5
  }
 },

 magnify:function($, $target, options){
  var setting={} //create blank object to store combined settings
  var setting=jQuery.extend(setting, this.dsettings, options)
  var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
  var newattrs={}
  newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
  newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
  $target.css('cursor', jQuery.imageMagnify.cursorcss)
  if ($target.data('imgshell')){
   $target.data('imgshell').$clone.remove()
   $target.css({opacity:1}).unbind('click.magnify')
  } 
  var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
  $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
  $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
  $target.bind('click.magnify', function(e){ //action when original image is clicked on
   var $this=$(this).css({opacity:setting.imgopacity})
   var imageinfo=$this.data('imgshell')
   jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
   var $clone=imageinfo.$clone
   $clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
   .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
   function(){ //callback function after warping is complete
    //none added  
   }) //end animate
  }) //end click
  $clone.click(function(e){ //action when magnified image is clicked on
   var $this=$(this)
   var imageinfo=$this.data('$relatedtarget').data('imgshell')
   jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
   $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,
   function(){
    $this.hide()
    $this.data('$relatedtarget').css({opacity:1}) //reveal original image
   }) //end animate
  }) //end click
 }
};

jQuery.fn.imageMagnify=function(options){
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
  if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
   jQuery.imageMagnify.magnify($, $imgref, options)
  }
  else if (this.complete){ //account for IE not firing image.onload
   jQuery.imageMagnify.magnify($, $imgref, options)
  }
  else{
   $(this).bind('load', function(){
    jQuery.imageMagnify.magnify($, $imgref, options)
   })
  }
 })
};

jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
  
 }) 

};


//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function($){
 var $targets=$('.magnify')
 $targets.each(function(i){
  var $target=$(this)
  var options={}
  if ($target.attr('data-magnifyto'))
   options.magnifyto=parseFloat($target.attr('data-magnifyto'))
  if ($target.attr('data-magnifyby'))
   options.magnifyby=parseFloat($target.attr('data-magnifyby'))
  if ($target.attr('data-magnifyduration'))
   options.duration=parseInt($target.attr('data-magnifyduration'))
  $target.imageMagnify(options)
 })
 var $triggers=$('a[rel^="magnify["]')
 $triggers.each(function(i){
  var $trigger=$(this)
  var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
  $trigger.data('magnifyimageid', targetid)
  $trigger.click(function(e){
   $('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
   e.preventDefault()
  })
 })
})


/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

//]]>
</script>

Ahora solo se agrega el siguiente codigo en donde quieras ver el efecto (En una Entrada ó un Gadget):

<img src="http://urldelaimagen.jpg" class="magnify" style="width:225px;height:150px" />

Puedes repetir cuantas veces quieras el codigo anterior, dependiendo de las imagenes que quieras poner.

Configuracion:
Cambia la direccion (url) marcada en rojo por la direccion de la imagen que quieras poner.
width:225px : Es el ancho de la imagen por default.
height:150px :Es el Alto de la imagen por default.

Agregar botones de redes sociales en el blog

2011-10-04T15:08:00.000-07:00

Estos son unos botones muy sencillos pero muy prácticos para que nuestros lectores puedan seguirnos en las diferentes redes sociales. No es nada del otro mundo, sólo son iconos agrupados en una lista que tienen un efecto pushbutton al pasar el cursor sobre ellos.

Los botones son tres: Google +, Facebook, y Twitter, pero se pueden agregar más.

Puedes verlos en esta misma entrada.

Para poner estos botones de las redes sociales en tu blog sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega los siguientes estilos:

/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y ahí pega esto:

<ul class="BotonesSociales">
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvIJExzyHsDDM6-QlKaQcMbtXzZ6_UvN9N2fZDr_6gWGhacRtwinSe5qS-dliRGVX8TTmRTgeMfbiN2hUTxOYIgtV4aiKLdzMfi-FgZIw5Fyrl9NTC4b8DdX587C_-RtnqZC1lHW0Rc8/" /> <span>Agrégame en tus círculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK_KfgOXy6i336NfI0_z4St8BLxI63pkOeVHwg-hE_XyIONC8eoVJZeobykusFv56IpJVyaqhaPMl5PLvnvt4IwbCx7EHIn_8OQ89ZON0vI3xmT-z7MBrRt2Jc_MZSiJ6l6pOQbq7FCA4/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibO_cOjVpWG03hJvsSyVAS1Ay7C-6thk-yGw-8byMEmJUByUvEXm5E0QgZ12AVjSY3w539RFyJjrWItlDgNubtJ98d-ii0MhAAm706RiknGrvvjwZtF_11y9WFjEtVnNrdjmvPqQu5oh4/" /> <span>Sígueme en Twitter</span></a></li>
</ul>

Para finalizar cambia los nombres de usuario o ID donde se indica en color rojo y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que están de color verde dentro del primer código.

Si quieres agrega más botones sólo añade antes de </ul> una línea como esta por cada botón extra cambiando la URL del enlace, la URL de la imagen y el texto:

<li><a href="URL del enlace"><img src="URL de la imagen" /> <span>Texto</span></a></li>

Y ahora sí, es todo.

Caja de aviso para el blog con opción de cerrar

2011-10-04T14:13:00.001-07:00

El resultado es una caja de avisos con opción de cerrar y como tiene CSS3 se aprecian sombras tanto en la caja como en el texto de Aviso.

No, no intentes cerrarla, esta es una imagen.

Y bueno, la colocación es prácticamente sólo un paso, únicamente hay que entrar en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y ahí pegar lo siguiente:

<style type="text/css">
#aviso{
width:500px; /* Ancho de la caja */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* Color del borde */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* Color de fondo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Color del texto */
}
.letrero-aviso { /* Estilos de la palabra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>

<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHGBAC9yyqGiin6qJLGkAA5gPHe6u0uMbzBoNjYXjWvNZ8kdRXeF5-pKuoqoOlgcZ5ybFECynzizGK3Hb1pte7UBlgH0_NpzqlyX1ZNiF0sjCjkjWo0ltBvOu3U0_7po09siWcFpobtQK_/" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
...Aquí va el mensaje...
<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja6iYMdXPtZXAEGZsQd8Hp8mH_RWwOYthcqFoTPSGn7NNO2s5daCoCkGP5N7PW9-Z3IT8ergyhyphenhyphenvV3s7kv4PQtKROTRC1W5Y8EelQq_NJPVR8IIGLDGxz9qi1el6dSWBxB5Te5up5yGR52/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNfQubUt3c2gRdPFANAgrkbInbHVfZw-EqrxzhAdbhA1VqplTAyCZmUSBDQRc_o4X-ASFfNFwj_636cw5GYORpTOy-RfqBin9jt7I7-ogPCSKlShO-vArx9jaG4U3YaYtxZlpDHBOf7bL/" width="25"/></a></div>
</fieldset>

<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>

</div><div class="clear"/></div>

Sólo tienes que agregar el mensaje donde se indica, y tu nombre de usuario de Twitter y Facebook (si es que tienes, y quieres) donde se señala.

En la primera parte del código he señalado en color verde los estilos más importantes que se pueden personalizar como el color de fondo, tamaño y posición de la caja, etc.

En donde dice left:300px; top:100px; se puede controlar la posición de la caja de avisos, left es la distancia desde la izquierda, y top la distancia desde arriba.

Leer más automático menos en el primer post

2011-10-04T14:00:00.000-07:00

Después de haber visto cómo poner el leer más automático con imágenes en miniatura en el blog muchos son los que me han pedido que el resumen no afecte al primer post de modo que la primera entrada se muestre completa y el resto de ellas se muestren resumidas tal como está en este blog de pruebas.

Lo primero que haremos será aplicar el leer más automático en todas las entradas, así que primero vamos a Diseño | Edición de HTML marcamos la casilla Expandir plantillas de artilugios y buscamos esta etiqueta:

<data:post.body/>

Y la sustituimos por esto:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Ahora antes de </head> pegamos este script:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Con esto ya tenemos el leer más en todas las entradas, ahora haremos que no aplique en la primera entrada, para lograrlo buscamos esta línea:

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

Y la cambiamos por esto:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-body entry-content'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Y listo, con eso ya tenemos el leer automático con miniaturas menos en la primera entrada de la página principal.

Contador de vistas/lecturas de posts para Blogger

2011-10-04T13:36:00.001-07:00

Una pregunta que he visto en varios lugares es cómo mostrar en Bloggerlas veces que un post es visto o leído, tal y como haríamos en WordPress. Buscando un poco en Google, encontré una excelente manera de hacerlo: usando un hit counter que corre con PHP, y que se muestra con condicionales en cada post individual.
Como ya sabemos, en Blogger es imposible usar PHP (o bueno, casi). La única manera de utilizar el contador es usando un hosting externo, pero por el momento no hay problema con eso: su autor ha alojado este contador php en un hosting gratuito y permite el hotlinking, por lo cual añadir el código a la plantilla será sólo cuestión de copiar y pegar.
El código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span id='hit-counter'>
<font color='#999999'><script src='http://wizom.net/counter.php' type='text/javascript'/> lecturas</font>
</span></b:if>

Puedes modificar el color del texto (font-color) para que se integre con tu plantilla, y el texto “lecturas” por el que más te acomode.
Puedes pegar el código bajo el título del post, o bajo el cuerpo de la entrada, de la siguiente manera:

Debajo del título

<div class='post-header-line-1'/>
Código

O al final del post

<div class='post-footer-line post-footer-line-1'>
Código

Considera que:

Para añadir el código debes tener los artilugios de la plantilla expandidos.
El archivo counter.php (todavía en fase experimental) podría dejar de funcionar de aquí a mediano plazo, por lo cual podría ser necesario realojarlo. Sin embargo, hasta ahora su autor se ha preocupado de cambiar el hosting, y de ofrecer el archivo para descarga libre desde su blog, bajo Licencia GPL. Eso sí, es necesario tener conocimientos avanzados en PHP para hacer las modificaciones correspondientes.
El contador será visible sólo en los posts individuales (por eso lleva condicionales). De otro modo, mediría las estadísticas del blog completo, en vez del número de lecturas de cada uno de los posts.

Otra posible alternativa, en caso de cualquier traspie, es añadir un contador de visitas usando un hit counter clásico (de imagen), como muestra Web Upd8.

2011-08-05T08:27:00.000-07:00

Este es un menú vertical con subpestañas hecho sólo con CSS, no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.

Colocarlo es bastante sencillo, sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega los estilos siguientes:

/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top:-31px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:

<div id="menuvertical">
<ul>

<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 1.1</a></li>
<li><a href="URL del enlace">Pestaña 1.2</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
</ul>
</li>

</ul>
</div>

Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pestaña SIN subpestañas entonces añade antes de </ul> una línea como esta:

<li class="nivel1"><a href="URL del enlace" class="nivel1">Pestaña 6</a></li>

Si quieres agregar una pestaña CON subpestañas entonces añade igual antes de </ul> lo siguiente:

<li class="nivel1"><a href="#" class="nivel1">Pestaña 6</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 6.1</a></li>
<li><a href="URL del enlace">Pestaña 6.2</a></li>
<li><a href="URL del enlace">Pestaña 6.3</a></li>
<li><a href="URL del enlace">Pestaña 6.4</a></li>
</ul>
</li>

No es un menú fuera de lo normal pero sí es bastante útil para organizar los enlaces del blog.
Fuente ciudadblogger.com

Hacer que las imágenes se arrastren (2)

2011-07-26T06:44:00.000-07:00

Después de haber visto que podemos hacer que las imágenes se arrastren vamos a darle algo de utilidad, por ejemplo que la imagen tenga un enlace. Para ello vamos a usar la propiedadondblCick de Javascript, es decir, un doble click, ya que el primer click servirá para mover y arrastrar la imagen, y con un doble click abrirá el enlace:

<img id="draglink1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL del enlace')" src="URL de la imagen"/>
<script type="text/javascript">new Draggable('draglink1');</script>

Sólo se cambia la URL de la imagen y la URL del enlace que abrirá. Por supuesto también deberemos cambiar la ID cada vez que lo usemos (color verde).
Lo mismo podríamos hacer con un menú, una imagen flotante, o lo que se les ocurra, será cuestión de echar a volar la imaginación y hacer experimentos.

También podemos usar este mismo efecto para las palabras, por ejemplo, la palabra 'claveles' se puede mover:

No te amo como si fueras rosa de sal, topacio
o flecha de claveles que propagan el fuego:
te amo como se aman ciertas cosas oscuras,
secretamente, entre la sombra y el alma.

No te amo como si fueras rosa de sal, topacio
o flecha de <span id="palabra1" style=" font-weight:bold; cursor:move;">claveles</span> que propagan el fuego:
te amo como se aman ciertas cosas oscuras,
secretamente, entre la sombra y el alma.
<script type="text/javascript">new Draggable('palabra1');</script>

Y de igual modo podemos hacer que la palabra "arrastrable" tenga un enlace haciendo doble click sobre ella:

Te amo como la planta que no florece y lleva
dentro de sí, escondida, la luz de aquellas flores,
y gracias a tu amor vive oscuro en mi cuerpo
el apretado aroma que ascendió de la tierra.

Te amo como la planta que no florece y lleva
dentro de sí, escondida, la luz de aquellas flores,
y gracias a tu <span id="palabra2" style="font-weight:bold; cursor:move;" ondblclick="javascript:window.open('URL del enlace')">amor</span> vive oscuro en mi cuerpo
el apretado aroma que ascendió de la tierra.
<script type="text/javascript">new Draggable('palabra2');</script>

Nuevamente en ambos casos se cambia la ID y en el caso del segundo ejemplo se agrega la URL de la imagen donde se indica.

Como puedes ver es muy sencillo de usar y sólo hemos utilizado Scriptaculous para generar este efecto drag & drop, y con un poco de creatividad podrás crear elementos interactivos en banners, imágenes, textos o cualquier otra cosa; sobretodo los más pequeños lo agradecerán:

Coloca las imágenes en su lugar

2011-07-26T06:39:00.001-07:00

Sexy Drop Down Menu es un menú hecho con JQuery y CSS y si no me equivoco es una creación de Soh Tanaka.

Se trata de un menú horizontal muy elegante que tiene un efecto deslizante en sus pestañas, y que además, para ver los sub menús es necesario presionar una flechita en color verde.

Puedes ver un ejemplo de este menú en este blog de pruebas.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

Para colocar este menú horizontal en tu blog agregamos la parte CSS correspondiente antes de]]></b:skin>

/* Sexy Drop Down Menu
----------------------------------------------- */
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJjczxdRykgcxcR3KjZaS0KACcvlG_6OjC1TkgN7pSr7XUBttEspA7Wr9_4V7RTJOBmCggY0P1Zv1ptSPZOq9TSwldSaO5DybJUS19erO-WiXuYS9Y-uOvmoZd56VIrwc-k1hc73PY8f8/s320/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.topnav li a {
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8b4UDHtWb7grh86E9FNDTGodzrn0n4OWpIe2AaabHLiefBz8UjO_NLHdr09CZqqZghSPmv6pVem42y_lWnEWFdlYVfcXySsXE8svGPRByQprPzWTHMarV-Ycy7JjRrQ6XvoGt5NZFAbU/s320/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTNE3Drjst-2PdZUAb2JPC_0BbRgwcqdo_HSh4SvIypeYh2r2BOlo671Viby06oTqvFSUApcIvdKOU4t80ylCrT4BesGhOQwXJxmE5rqDWpsDw9-4czrYvi97CWlR9TXvnu3jDS7jvcLI/s320/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {
background-position: center bottom;
cursor: pointer;
}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li {
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgzDyy3vUlwLI5pxOBdodC1GdFfzN8rOL6N6Dk4UCPR6oyPDmlBPJhJEPPh4jL9sAICbcueeRd3lBTgAjq4By99pKPLPGJb543IgYiW76AscO6ZrNdpKGI7_OM9BqzbgyfVe5iLhYXes/s320/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgzDyy3vUlwLI5pxOBdodC1GdFfzN8rOL6N6Dk4UCPR6oyPDmlBPJhJEPPh4jL9sAICbcueeRd3lBTgAjq4By99pKPLPGJb543IgYiW76AscO6ZrNdpKGI7_OM9BqzbgyfVe5iLhYXes/s320/dropdown_linkbg.gif) no-repeat 10px center;
}

Luego buscamos la etiqueta </head> y arriba de ella pegamos el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$("ul.topnav li span").click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

});
</script>

Por último coloca en un elemento HTML/Javascript el siguiente código:

<ul class="topnav">
<li><a href="URL del enlace">Pestaña1</a></li>
<li>
<a href="URL del enlace">Pestaña2</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li>
<a href="URL del enlace">Pestaña 3</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="URL del enlace">Pestaña 5</a></li></ul>

Arrastra el menú debajo de la cabecera y cambia las URL de los enlaces donde se indica.
Si quisieras agregar más pestañas sólo agrega antes de </ul> esta línea:

<li><a href="URL del enlace">Otra Pestaña</a></li>

Y si quieras agregar sub pestañas entonces agrega esto:

<li>
<a href="URL del enlace">Otra Pestaña</a>
<ul class="subnav">
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
<li><a href="URL del enlace">Sub Pestaña</a></li>
</ul>
</li>

Crear un intro para el blog

2011-07-24T19:21:00.000-07:00

Cuando es la primera vez piensas en hacer un blog seguro se te viene a la mente algo más del estilo página Web con algún tipo de pantalla de bienvenida, pero luego descubres que una página Web no es lo mismo que un blog, y aunque un blog tiene demasiados puntos positivos a favor de repente hay quien quiere usar estos elementos de las páginas Webs para su propio blog, tal es el caso de las pantallas de presentación o intros.

Aunque hay muchos métodos para ello algunos de estos requieren que se cree un documento html que será el se muestre como presentación, sin embargo esto no es muy recomendable cuando se trata de posicionar el blog. Así que experimentando un poco diseñé un método con el cuál no usaremos páginas adicionales para no afectar el PageRank, y para evitar dañar el posicionamiento o ser sancionados por Google no ocultaremos el contenido del blog, sólo usaremos dos capas, una que es el contenido del blog le pondremos un z-index muy bajo, y otra que será el intro con otro z-index pero más alto, esto hará que los robots de Google puedan leer el contenido del blog sin problemas.

Este intro para el blog aunque es algo sencillo puede tener más elementos si lo desean, ya será a opción de cada quien, yo por lo pronto sólo le puesto una imagen de presentación, un botón para entrar y música de fondo. Y atención, que sólo se verá en la portada del blog para que no sea molesto para los lectores, así que cuando naveguen por las entradas o páginas del blog el intro no será visible. Puedes ver el demo en este blog de pruebas.

Ahora veamos cómo ponerlo, primero entra en Diseño | Edición de HTMl y busca esta etiqueta:

<body>

O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca esta línea:

<body expr:class='"loading" + data:blog.mobileClass'>

Justo debajo de cualquiera de una de ellas agrega lo siguiente:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body {margin:0; padding:0; overflow:hidden;}
.entrar, #navbar-iframe, .navbar {display:none;}
.BlogOculto {z-index:-100;} #Intro {z-index:5000;}
#Intro {text-align:center;
background:#000; /* Color de fondo de la pantalla */
position:absolute;
width:100%;
height:100%;
overflow-x:hidden;
}
p.btnEntrar a {
font-size: 16px; /* Tamaño de la letra del botón */
font-style: italic;
font-weight: bold;
text-decoration: none;
color: #1C1C1C; /* Color de la letra del botón */
background: #ccc; /* Color de fondo del botón */
padding: 6px;
border: 1px solid #2E2E2E; /* Color del borde del botón */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
p.btnEntrar a:hover {position:relative; top:1px; left:1px;}
</style>

<div id='Intro'>
<div style='margin-top:200px;'>


<img src='URL de la imagen'/>
<p class='btnEntrar'><a href="javascript:void(0);" onClick="document.getElementById('BlogContenedor').className = 'quitarIntro', document.getElementById('Intro').className = 'entrar', document.getElementById('ElementosAudio').innerHTML = '', document.body.style.overflow='auto' ">Entrar</a></p>

<div id='ElementosAudio'>
<iframe allowfullscreen='' frameborder='0' height='0' src='http://www.youtube.com/v/XXXXXXX&autoplay=1&loop=1' width='0'/>
</div>


</div>
</div>
</b:if>

<span class='BlogOculto' id='BlogContenedor'>

Y luego busca la etiqueta </body> y arriba de ella agrega esto:

</span>

¿Es todo? Sí, eso es todo, ahora sólo vamos a personalizarlo.

En el primer código que hemos agregado están señalados en color verde algunos aspectos como el color que tendrá el intro, el tamaño de letra del botón, color del botón, etc.

Luego, en donde dice URL de la imagen puedes poner la URL de la imagen del logotipo de tu blog, alguna imagen de bienvenida o cualquier otra imagen. El texto del botón 'Entrar' puede cambiarse por cualquier otro, ahí lo he señalado en negrita, o bien, si lo deseas puedes reemplazar el botón por una imagen, sólo elimina el texto Entrar y en su lugar pon el código de una imagen:

<img src="URL de la imagen" />

Si haces eso entonces deberás eliminar el borde y color de fondo del botón señalado en color verde.
Pero es MUY IMPORTANTE que si cambias ese texto o si pones una imagen en su lugar NOmodifiques el código púrpura que se encuentra alrededor.

Cualquier elemento que quiera agregarse al intro debe ir antes de donde dice Fin del contenido del intro o después de Inicio del contenido del intro. Regularmente los intros no tienen muchos elementos por cuestión de presentación, así que entre menos cosas tenga mejor.

En donde dice margin-top:200px es la distancia que tendrán los elementos del intro respecto a la parte superior de la pantalla, puede modificarse por otro valor.

Yo le he puesto una música de fondo utilizando un video de YouTube sólo que le he puesto en ceros los valores de alto y ancho para que el reproductor sea invisible. Si deseas poner también una música de fondo entonces cambia las XXXXXXX por la ID del video que quieres poner.
Si quisieras poner un archivo en flash SWF quita el código del reproductor (sólo lo gris) y en su lugar pon el código del SWF. Pero ojo, que sólo debe eliminarse lo que está en color gris.
Si no deseas poner audio, ni tampoco un archivo en flash puedes eliminar el código gris o dejarlo como está.

Si tu blog tiene música que se reproduce al entrar al blog te recomiendo que le quites el autoplay, de lo contrario también se escuchará en el intro del blog. De igual forma, si tienes un video o gadget en flash en las entradas o dentro de la plantilla tendrás que seguir los pasos deesta entrada para que el video o gadget no se sobreponga.

Como última aclaración, cuando entres a Diseño | Elementos de la página también verás el intro, pero si das click en Entrar podrás ver todo como si nada.

Y ahora sí, parece que es todo, que lo disfruten :)

Mensaje tipo Post-it para el blog

2011-07-24T07:32:00.000-07:00

Ahora que estuve ausente se habrán dado cuenta que al entrar al blog aparecía un mensaje indicando que me encontraba fuera de la ciudad. Este mensaje tiene la opción de cerrarse para no molestar al visitante y se puede usar para poner cualquier tipo de aviso importante en el blog.

Para colocar un mensaje tipo Post-it en tu blog sólo entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega ahí lo siguiente:

<style>

</style>

<div id="postit" style="left:200px;top:50px">
<div align="right"><b><a href="javascript:closeit()"><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/CloseIcon-small.png"/></a></b></div>


<br/>
Aquí va el mensaje que se mostrará cuando alguien ingrese al blog.
Para más trucos y tutoriales visita <a href="http://ciudadblogger.com">Ciudad Blogger</a>



<script>

//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit

function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie4(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie4.length > 0) {
offset = document.cookie4.indexOf(search)
if (offset != -1) { // if cookie4 exists
offset += search.length
// set index of beginning of value
end = document.cookie4.indexOf(";", offset);
// set index of end of cookie4 value
if (end == -1)
end = document.cookie4.length;
returnvalue=unescape(document.cookie4.substring(offset, end))
}
}
return returnvalue;
}

function showornot(){
if (get_cookie4('postdisplay')==''){
showit()
document.cookie4="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()

</script>

<script language="JavaScript1.2">

//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script></div><div class="clear"/></div>

En la primera parte del código (la que está en color verde) puedes cambiar el color de fondo, el color de la letra, el tamaño del cuadro, etc.
Tu mensaje debes ponerlo cambiando lo que está en color rojo, puedes usar negritas, cursiva, links, etc.
Si quieres que el aviso aparezca sólo una vez por sesión cambia donde dice:

var once_per_browser=0

Y modifica el 0 por 1, de lo contrario el mensaje aparecerá cada vez que recargue la página o se abra otra página dentro del mismo blog.

Así de sencillo puedes avisar a tus lectores de lo que creas importante.
fuente: ciudadblogger.com

Otras paginas

2011-07-21T15:54:00.000-07:00

Todo blogger que se precie cuida de manera especial la apariencia de su blog, siendo la medida más importante la elección de una buena plantilla o “template”.
Blogger es una de las plataformas de blogs más importantes y una muy buena opción para tener tu propio blog de un modosencillo y gratuito, sin perder en funcionalidad.
En Mashable han dedicado un artículo a este tema, publicando una lista con una selección de las mejores páginas de la red donde poder encontrar estas plantillas.
La lista se divide en tres secciones, una de plantillas gratuítas, otra donde lasplantillas son de pago, que suelen ser denominadas como “premium” y finalmente unas webs con generadores de plantillas, código y otro tipo de trucos para Blogger.
Plantillas gratuítas:

Plantillas de pago o premium:

Generadores de plantillas y otros trucos:

Personalmente prefiero la sencillez de la Washed Denim, que es una de las que el propio Blogger ofrece en su configuración, pero siempre es bueno disponer de un amplio abanico de opciones.
Espero que te guste esta recopilacion de las mejores plantillas para tu Blog y sigue visitando Gadgets para Blogger que vas a encontrar siempre los mejoresPlantillas y Fondos para tu Blog!

10 Lugares para poner Adsense en Blogger

2011-06-30T11:57:00.000-07:00

Con el cambio de lenguaje en las plantillas de Blogger, de html a xml, agregar publicidaddirectamente en el código se volvió un poco menos intuitivo, además que cualquier error en la sintaxis puede ocasionar que no puedas guardar los cambios en la plantilla.

Para ayudarte en esta tarea hemos hecho una lista con 10 de los lugares en tu blog más comunes para poner publicidad, así como la forma de implementarlos y los formatos más adecuados en base a los disponibles en adsense. (Clic en leer más)

PUBLICIDAD

Sidebar

Implementación. Este es uno de los lugares más sencillos para colocar adsense. Basta con ir al panel de elementos (plantilla/elementos de página) y agregar un widget html con el código del anuncio o bien directamente un widget de publicidad adsense.

Formatos recomendados: 125×125, 120×600 y 160×600

Entre posts

Implementación. Puedes ver como implementarlo en nuestro artículo sobre esta opción de blogger.

Formatos recomendados: 468×60, 300×250 y 336×280

Bajo el header

Implementación:

Transforma el código del anuncio a su equivalente en caracteres html. Puedes usar algún convertidor en linea.
Busca <div id=’header-wrapper’>
Pega el código convertido justo después.

Formatos recomendados: 728×90 y 728×15
Sobre la columna de entradas

Implementación:

Transforma el código del anuncio a su equivalente en caracteres html.
Busca <div id=’main-wrapper’>
Pega el código convertido justo después.

Formatos recomendados: 460×68, 468×15 y 336×280

Bajo el título de la entrada (visible en todas las páginas)

Implementación:

Transforma el código del anuncio a su equivalente en caracteres html.
Expande plantilla de artilugios y busca <div class=’post-header-line-1′/> (sino lo encuentras búscalo sin /)
Pega el código convertido justo después.

Formatos recomendados: 468×68 y 468×15

Bajo el título de la entrada (solo visibles en páginas de las entradas)

Implementación:

Transforma el código del anuncio a su equivalente en caracteres html.
Expande plantilla de artilugios y busca <div class=’post-header-line-1′/> (sino lo encuentras búscalo sin /)

Pega el código convertido siguiendo este esquema:

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

<!-- Aquí el código del anuncio -->

</b:if>

Formatos recomendados: 468x68 y 468x15

Al pie de la entrada

Implementación:

Transforma el código del anuncio a su equivalente en caracteres html.
Expande plantilla de artilugios y busca <p class='post-footer-line post-footer-line-3'/> (sino lo encuentras búscalo sin /)
Pega el código convertido justo después.

Formatos recomendados: 468x68 y 468x15

En el cuerpo de la entrada (visible en todas las páginas)

Implementación:

Transforma el código del anuncio a su equivalente en caracteres html.
Expande plantilla de artilugios y busca <div class='post-body entry-content'> (sino lo encuentra busca <div class='post-body'> únicamente)

Justo abajo pega el código transformado siguiendo este esquema:

<div style='float:right'>

<!-- Aquí el código del anuncio -->

</div>

Formatos recomendados: 125x125, 180x150, 120x240 y 200x200

En el cuerpo de la entrada (solo visibles en páginas de las entradas)

Transforma el código del anuncio a su equivalente en caracteres html.
Expande plantilla de artilugios y busca <div class='post-body entry-content'> (sino lo encuentra busca <div class='post-body'> únicamente)

Justo abajo pega el código transformado siguiendo este esquema:

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right'>

<!-- Aquí el código del anuncio -->

</div>
</b:if>

Formatos recomendados: 125x125, 180x150, 120x240 y 200x200

Entre post y comentarios (solo visibles en páginas de las entradas)

Implementación:

Transforma el código del anuncio a su equivalente en caracteres html.
Expande plantilla de artilugios y busca:</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>

Justo arriba pega el código transformado siguiendo este esquema:

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

<!-- Aquí el código del anuncio -->

</b:if>

Formatos recomendados: 468x60, 300x250 y 336x280

Al pie del blog

Implementación:

Transforma el código del anuncio a su equivalente en caracteres html. Puedes usar algún convertidor en linea.
Busca <div id='footer-wrapper'>
Pega el código convertido justo después.

Formatos recomendados: 728x90 y 728x15

PREGUNTAS FRECUENTES

Me adelanto a algunas preguntas que posiblemente surgiran:

No encuentro los códigos ¿qué hago?.
Comprueba haz expandido la plantilla de artilugios. Estos código son los genéricos de Blogger y están presentes en todas las plantilla a no ser que hallan sido cambiados por un hack o por el diseñador de la plantilla (en las plantillas de blogandweb no se eliminaron ni cambiaron).

Los anuncios se ven mal, ¿porqué?
Los anuncios se verán afectados por los estilos (css) en los selectores (divs) que los contienen y en algunas plantillas podría verse mal, aquí debes considerar modificar dichos estilos, buscar otro lugar pertinente o en caso extremo, cambiar la plantilla.

¿Debo poner los 10 códigos en mi blog?
No, haz uso solo de los lugares donde quieres poner publicidad, considera los limites que tiene adsense en cuanto al número de anuncios y hacer un balance con tu contenido.

¿Porqué se transforma el código a caracteres html?
Para que Blogger lo lea como texto y no como código y no te cause errores al guardar.

¿Porqué solo se muestran 3 anuncios en la página principal?
Se debe al limite que establece adsense de anuncios de texto en una sola página. Combina el tipo de anuncios (texto, referencias y bloques de vínculos) para que puedas mostrar el número de anuncios que deseas.

Ojala que les sea de utilidad.

Mostrar anuncios adsense entre artículos en Blogger

2011-06-30T11:55:00.000-07:00

Siguen las mejores en Blogger, han agregado una opción para mostrar anuncios adsense entre los artículos de nuestro blog sin tocar el código y con el manejo en el panel de elementos de página. El procedimiento es el siguiente:

Entra a la pestaña “Plantilla” y ahí a la opción “Elementos de página”.
Busca la sección “Entradas del blog” y da clic en la opción “Editar”
Las opciones que muestra son varias y pueden ser muy útiles, como el formato de fecha, editar las leyendas y elementos que aparecen en la información de las entradas, entre otras, ahora nos interesa la que se encuentra al final: “Show Ads Between Posts” (Mostrar anuncios entre artículos). Activa la casilla correspondiente a esta opción.
Ahora veras las opciones del formato que deseamos mostrar, estas son:
- El lugar del anuncio. Aquí hay que indicar después de que cantidad de artículos se mostrara el anuncio, en algunos casos es bueno mostrarlos después de la primer entra o al final, después de la última.
- Formato. Es el tamaño del anuncio a mostrar, como se trata de un lugar con generalmente buen espacio, es recomendable usar un formato grande como los de 336×280, 300×250 o bien 250×250.
- Los colores del anuncio. Además del típico panel para mostrar anuncios, se encuentra la opción “Hacer coincidir plantilla” que automáticamente tomará los colores en tu blog y se los dará al anuncio, bastante práctica esta opción.
- Vista previa. En todo momento vez como va el anuncio.
Ya configurado el anuncio, basta dar clic en “Guardar cambios” para terminar.

Cabe decir que mostrar anuncios entre post no es la mejor opción en todos los blogs, da más resultados en algunos que en otros, prueba, usa criterios de seguimiento y comprueba si te son útiles.

Fuente: Blog oficial de Adsense

Cómo alojar scripts en la plantilla

2011-06-30T11:48:00.001-07:00

El tema del alojamiento de los scripts es un tema recurrente debido a que no todos los servicios gratuitos de hosting admiten este tipo de archivos, o bien, porque pueden tardar mucho en cargar si el ancho de banda del hosting es reducido, lo que trae consigo que el blog tarde en cargar.

Si bien podemos alojarlos en Google Sites o Dropbox también podemos alojar los scripts en la propia plantilla, de este modo el tiempo de carga de la página será menor y dejaremos de estar dependiendo de un servicio externo a Blogger.

Alojar los scripts directo en la plantilla funciona para casi todos los casos, aunque es posible que haya uno u otro script que se resista y ese sí tendremos que alojarlo en un servicio independiente.

Para alojar los scripts en la plantilla hay dos formas, una es entrando a Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:

<script type='text/javascript'>
//<![CDATA[
...contenido del script...
//]]>
</script>

Habremos de agregar donde se indica el contenido del script.
¿Cómo sacar el contenido del script?
Pega la URL del script en la barra de direcciones de tu navegador, si abre una página llena de códigos ese es el contenido del script; si en su lugar descarga un archivo con extensión .js entonces abre el archivo con WordPad y copia y contenido del script.

La otra opción es entrar en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pegar en un sólo elemento el contenido de todos los scripts que quieras. Se haría casi de la misma forma:

<script type='text/javascript'>
...contenido del script...
</script>

Con cualquiera de estas dos formas tendremos los scripts alojados en nuestra propia plantilla con lo que dejaremos de depender de otros servicios y nos ahorraremos algo de tiempo en la carga de la página al no depender del ancho de banda de los demás.

Los 10 trucos más buscados para Blogger

2011-06-30T11:47:00.000-07:00

Esta pretende ser una lista con los 10 trucos más buscados en Blogger, algunos muy sencillos, otros no tanto, pero todos buscando mejorar algún aspecto de la plataforma para blogs de Google.

1. Eliminar la navbar o barra Blogger.

Aunque esta barra puede tener algunos atajos para manejar nuestro blog, su valor es poco o nulo para el lector, ocupa espacio extra y es poco estética. Eliminarla es sumamente sencillo, solo hay dirigirse a Diseño/Edición HTML y buscar el siguiente código:

]]></b:skin>

Y justo antes pegar lo siguiente:

#navbar-iframe { height:0px; display:none; visibility:hidden; }

2. Mostrar los últimos comentarios y los últimos artículos en la sidebar.

Este “truco” se basa en usar la dirección sindicación de comentarios y los artículos que todos los blogs de Blogger tienen. Estas direcciones son:

Para comentarios: http://tublog.blogspot.com/feeds/comments/default
Para artículos: http://tublog.blogspot.com/feeds/posts/default

Donde tublog.blogspot.com es la dirección de tu blog.

Ahora solo hay que ir a Diseño/Elementos de página y dar clic en Añadir un gadget, en la ventana que se abre se selecciona un gadget de Feed y se escribe la dirección de comentarios para mostrar los últimos comentarios, se repite el proceso para crear un nuevo gadget de feed pero esta vez usando la dirección de los artículos.

3. Agregar una barra lateral o sidebar adicional a la plantilla.

Parece que cada vez es más insuficiente una sola barra lateral, la complejidad de agregar una extra a un diseño ya hecho variará de acuerdo al tipo de diseño y de los conocimientos que se tengan de HTML y CSS. El proceso se detalla en nuestro artículo: Como agregar una sidebar en una plantilla Bloggerdonde hay referencias también a otros tutoriales similares.

4. “Leer más” o “Continuar leyendo” en los artículos de Blogger.

Para hacer la navegación más ligera a nuestros lectores muchas veces conviene mostrar solo un resumen de los artículos. Como Blogger no tiene esta característica por defecto, habrá que usar CSS o Javascript para conseguir este propósito.

Blogmundi explica como hacerlo y en Girlyblogger muestra una forma “elegante” para llegar a lo mismo.

5. Mostrar los artículos más populares o más comentados.

Cuando un artículo tiene muchos comentarios, esto habla de su posible valor para los visitantes. Esta tampoco es una característica de Blogger por lo que hay que recurrir a un nuevo script. En BloggerBuster se muestra como crear un gadget para mostrar las entradas más populares y Rosa en su escaparate hace una buena adecuación de este truco al español.

6. Paginación o páginas numeradas en Blogger.

Blogger solo muestra un enlace a la página siguiente y anterior, con la página es posible mostrar un cantidad más grande de páginas para navegar indicadas con números. Nuevamente el funcionamiento se basa en un script que es necesario instalar en el blog para que funcione. Armanda de Blogger Buster fue una de las primeras en mostrarlo y en Vagabundia encontraran una explicación en castellano.

7. Agregar un favicon en Blogger.

Para agregar ese pequeño icono visible en favoritos, pestañas y barra de direcciones, solo hay que crear un icono y vincularlo desde la plantilla. Para esto desde Diseño/Edición HTML se busca el siguiente código:

<title><data:blog.pageTitle/></title>

Y justo antes se coloca lo siguiente:

<link href="http://sitio.com/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="http://sitio.com/favicon.ico" rel="icon" type="image/x-icon"/>

Donde http://sitio.com/favicon.ico es la URL de tu favicon.

Para obtener la URL de tu favicon puedes alojarlo en un servicio gratuito como fileden.

8. Utilizar un dominio propio en Blogger.

Tener un dominio propio es de las primeras cosas que se deben contemplar cuando deseamos tomar nuestro blog más en serio. Las ventajas son muchas y el precio bastante modico. Blogger permite el uso de dominios propios en su plataforma y proceso puede verse en nuestro artículo: Como usar un dominio propio en Blogger o en otros sitio como Spamloco.

9. Formulario de comentarios en la misma entrada.

En este en realidad a dejado de ser un truco, pues ya forma porte de las características comunes de Blogger, aun así hay que activarlo desde Configuración/Comentarios , ahí en la opción de “Ubicación del formulario de comentarios” se selecciona “Entrada incrustada a continuación”.

En algunos casos podría ser necesario implementar esta característica de forma manual.

10. Poner publicidad de Adsense en Blogger.

Existen varias opciones para poner Google Adsense, así que puedes escoger entre estos 10 Lugares para poner Adsense en Blogger.

Como siempre, la recomendación es usar únicamente los trucos que son imprescindibles para nuestro blog para evitar sobrecargar de contenido el sitio y/o hacerlo muy pesado.

ocultar las entradas y mostrar solo los títulos

2011-06-29T10:13:00.000-07:00

Este es uno de esos truquillos de idea feliz, que con poco muy poco trabajo solucionan cosas y dan buen resultado. Consiste en resumir las páginas que no sean entradas en sí mismas. Es decir, mostrar resumidas las páginas de inicio, las de navegación por etiquetas y las de entradas más recientes/antiguas.

No me refiero a los sumarios, ya muy comentados anteriormente, sino en algo más simple pero quizás igual de efectivo. En este caso, sólo mostraremos la fecha, el título y el pie de la entrada, escondiendo el texto del post.

El resultado sería algo así:

Ver blog de ejemplo

Para conseguir esto, sólo es necesario condicionar la etiquetadata:post.body, que es la que muestra precisamente el texto de cada entrada. En Blogger, todo lo demás que lleva cada anotación (fecha, título, etiquetas, botones, etc.) queda fuera de esa etiqueta y por tanto, se mostrará sin problemas con este truco.

Así que buscamos <data:post.body/> y lo sustituimos por esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if> 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p><data:post.body/></p>
</b:if>

Si os fijáis, hay un par de condiciones. Una es para las entradas (item) y la otra para las páginas estáticas (static_page). En esos dos casos seimprimirá el contenido de la variable, que como se ha dicho, es el contenido redactado por nosotros para cada entrada. En todos los demás, no.

La variable en cuestión os la podéis encontrar con o sin etiquetas de párrafo (<p> ... </p>). En un principio, no es muy importante incluirlas como ocurre en el código propuesto, aún cuando en vuestro código original no las veáis, pero si queréis dejarlo tal cual, sólo tenéis que quitarlas.

Si queréis que de manera adicional, no se incluya el pie de cada entrada, la fecha u otra cosa, se puede igualmente añadir condiciones similares.

Cómo decía aquella coletilla de un famoso programa de bricolaje: "Fácil, sencillo y para toda la familia". Yo añadiría "...y rápido".

2011-06-22T09:11:00.002-07:00

Terminó otra etapa en mi vida. Estudiar Diseño Web lo único que hizo fue hacerme caer en la cuenta de que todavía me falta muchísimo por aprender... Y eso que no cuento los errores que cometo a veces, muchos de ellos considerados verdaderos crímenes contra el HTML.

Pero de eso se trata todo esto, aprender y en busca de ello encontré artículo muy interesante (en inglés) que enumera 10 crímenes de HTML, crímenes que muchos cometemos a veces hasta sin darnos cuenta...

A vos, diseñador, la policía te está buscando. Sin darte cuenta o quizá a propósito cometiste 10 de los crímenes a la hora de maquetar tus etiquetas HTML, crímenes que realmente nunca debiste cometer!

Crimen 1: Colocar elementos en bloque dentro de elementos en línea.

Los elementos HTML pueden mostrarse en dos formas, en bloque y en línea. Los elementos en bloque (block elements) siempre comienzan con una nueva línea pudiendo contener elementos de linea y elementos de bloque. Y los elementos en línea (inline elements) solo ocupan el espacio necesario para mostrar su contenido y no puede contener otros elementos en en bloque pero sí otros en línea. (Más información)

Los elementos en bloque incluyen todas esas etiquetas que hacen a la estructura del documento, como los <div>, <blockquote>, <h1>, párrafos entre otros. Los elementos tipo "inline", en cambio, son los que se ponen dentro de los tipo "block", por ejemplo las etiquetas <a> (los links) <span>, <abbr>,<del>, <img>, <strong>, <em>, etcétera. Estos últimos deben ir dentro de los elementos en bloque y nunca de forma inversa.

Crimen 2: No incluir un atributo ALT en las imágenes

El atributo ALT es un elemento requerido en todas las imágenes que se muestran en una página web o blog. Este atributo ayuda a los usuarios a determinar qué es tal o cual imagen, por ejemplo en el caso de que usen un navegador de sólo texto como o que no puedan mostrar imágenes o más comúnmente por estos lados que la conexión sea simplemente lenta o que no se llegue a cargar del todo, monstrando un texto alternativo en su lugar.

Además, esta es una de las muchas formas en que Google encuentra y muestra las imágenes en buscador de imágenes. Son contadas las veces en que buscando alguna imagen los resultados no son los esperados o no tienen nada que ver y me piché al no encontrar lo que buscaba, esto es porque los que diseñan páginas no se toman el tiempo de agregar este atributo tan importante.

El atributo ALT debe describir la imagen que se muestra, por lo que poneralt="imagen" está mal, es una mala práctica. Si la está puramente por propósitos decorativos, simplemente agregá un atributo alt vacío, algo comoalt="".

¿Sabías que cuando insertás una imagen Blogger por lo menos te pone automáticamente un alt="" para que lo rellenes? ;)

Crimen 3: No usar listas cuando sean necesarias.

Las etiquetas <ul> y <ol> (listas desordenadas y ordenadas) tienen montones de usos y son muy versátiles para mostrar todo tipo de elementos en una página, como una lista de información, y otras cosas que se colocan una debajo de otra.

Lo curioso es que la gente sigue usando montones de <br> (line breaks o saltos de línea) para hacer listados siendo que es más intuitivo usar una etiqueta que está diseñada específicamente para eso. (Ver crimen 6)

Crimen 4: Usar <b> e <i> para las negritas (bold) y las cursivas (italic)

Lo que hacen estas etiquetas es que el texo aparezca en negrita o cursiva, pero semánticamente son clasificadas como etiquetas presentacionales (de presentación visual), por lo que el efecto puede reproducirse mejor con los estilos CSS font-weight y font-style.

Si el pasaje de texto sugiere áreas de importancia, deben ser remarcadas con las etiquetas <strong> (fuerte) o <em> (énfasis) que básicamente hacen el mismo trabajo que la etiqueta <b> y la etiqueta <i> respectivamente.

Ambos son la misma cosa (visualmente hablando) pero la finalidad en los dos casos es distinta.

La diferencia radica en que <stong> sirve para reforzar una idea, cuado considerás que algo es importante y debe estar en negrita.

También se dice por ahí que esto ayuda al posicionamiento en los buscadores como Google, digamos que a los robots del buscador como que le dan más inportancia a las palabras enmarcadas como strong. Lo mismo va para la etiqueta <em>.

Aunque para muchos esto es una puerquesa (?) ya que argumentan que no va a ser le fin del mundo si usas <i> o <b> (como cuando agregás el nombre científico en latín de una planta que debe estar en cursiva o cosas así)

Digamos que esto depende más bien del diseñador que otra cosa.

Crimen 5: Usar demasiados saltos de línea (<br />)

Las etiquetas <br /> (line break) sólo deben usarse para insertar saltos de línea únicos en el medio de un párrafo para hacer que una palabra en específico vaya hacia abajo en una nueva línea. No se debe usar para hacer "huecos" entre los elementos, en vez de eso hay que dividir el texo en párrafos separados o ajustar los estilos de margen con CSS.

Crimen 6: Usar las etiquetas de tachado incorrectas

En los tiempos antiguos <s> y <strike> se usaban para permitir editar y enmendar un texto en la web.

Sin embargo, ahora estas etiquetas están clasificadas como obsoletas o en desuso, lo que significa que todavía funcionan bien (en Transitional), pero hay un conjunto de nuevas etiquetas en el bloque la <del> y la <ins>; que las reemplazan.

Estas nuevas etiquetas se usan para mostrar el texto suprimido o eliminado (del inglés delete) o insertado subsecuentemente en un documento.

De cierta manera, de fondo son similares en su concepto (visualmente hablando) al caso mencionado en el número 4.

Crimen 7: Usar estilos en línea (inline styling)

Seguro ya lo escuchaste como mil veces: los estilos en línea (inline) son malos. Toda el punto de la semántica HTML y del CSS es la de separar la estructura y estilo, por lo que simplemente no tiene sentido ir colocando estilos directamente en el documento HTML.

Acordáte de mantener siempre tus estilos en tus hojas de estilo (los archivos .css) donde pertenecen. Incluso en Blogger los estilos CSS deben estar colocados en el lugar donde corresponde.

Crimen 8: Agregar o quitar bordes en HTML

El atributo border (borde) es otro efecto para presentación visual, por lo que semánticamente debe dejarse al CSS si se remueve o quita un borde predeterminado de algún elemento.

A propósito, ¿sabías que Blogger te ensoqueta automáticamente el codigo deborder="0" al momento de insertar imágenes? Me acabo de fijar. Y sí, es demasiado engorroso estar quitando manualmente, pero bueno...

Crimen 9: No usar las etiquetas de encabezado

Las etiquetas se usan para separar el documento en secciones con títulos. Están disponibles del <h1> al <h6>. Aparte de organizar nuestro documento esto también ayuda al SEO.

Crimen 10: El abominable uso de <marquee> y <blink>

Aparte de que ni siguiera fueron parte de la colección oficial estándares HTML aprobada por el Consorcio W3, las etiquetas <blink> y <marquee> son simplemente... horripilantes. Si necesitás llamar la atención seguro que podés pensar en un montón de formas alternativas para hacer que la gente enfoque su mirada en esa parte específica de la página, pero no hagas que titile como señalero roto o hacer que se desplace a través de la página. Eso es algo de muy mal gusto :S

Concluyendo
Hay cosas que poco a poco voy aprendiendo. Algunos crímenes no sabía que eran tales. Pero en fin, voy a tratar de poner en práctica estos puntos. Claro que hay cosas que están prácticamente fuera de mi control. Es que Blogger formatea casi todo automáticamente así que... bueh...

¿Y vos, cometiste alguna vez esos crímenes?

Atajos de teclado para Google Reader

2011-06-22T08:33:00.000-07:00

Atajos de teclado para Google Reader. Combinaciones de teclas para Google Reader. Trucos de accesibilidad. Métodos abreviados. Shortcut keys.

Google Reader es una herramienta web capaz de gestionar las suscripciones a través de RSS (feeds) de un modo muy intuitivo. Tendrás todas las actualizaciones de tus sitios web favoritos al instante y gratis. Con un entorno amigable, Google Reader facilita enormemente la lectura de contenido web.

32 combinaciones de teclas para sacarle el máximo partido a Google Reader:

a: Añadir una nueva URL de suscripción. (a=add/añadir).
j (o Espacio): Selecciona el siguiente elemento de la lista.
k (o SHIFT + Espacio): Selecciona el elemento anterior de la lista.
n: Explorar siguiente elemento de la lista de elementos.
p: Explorar elemento anterior de la lista de elementos.
Tecla (+): Aumenta el tamaño de la fuente del elemento (y suscriptor) seleccionado.
Tecla (-): Disminuye el tamaño de la fuente del elemento (y suscriptor) seleccionado.
o (o Intro): Abrir / Cerrar el elemento seleccionad.
SHIFT + n: Explorar siguiente elemento de la lista de suscriptores.
SHIFT + p: Explorar elemento anterior de la lista de suscriptores.
SHIFT + o: Abrir los elementos de la suscripción seleccionadoa.
s: Poner/Quitar estrella. (s=star).
SHIFT + s: Compartir o no el elemento abierto. (s=share)
m: Marcar o no como leído. (m=mark)
t: Etiquetar un elemento. (t=ticket)
v: Abrir la fuente original. (v=view)
l: Marcar como “Me gusta” (o no) un el elemento seleccionado. (l = like)
SHIFT + a: Marcar todos los elementos como leídos.
1: Vista completa.
2: Vista en forma de lista.
r: Actualizar. (r=refresh/refrescar).
SHIFT + x: Expandir o contraer una carpeta selccionada.
gh: Primer elemento de la lista. (gh=GoogleHeader)
ga: Muestra todos los elementos existentes. (ga=GoogleAll)
gs: Muestra los elementos destacados/marcados con una estrella. (gs=GoogleStar)
g+SHIFT+s: Muestra los elementos compartidos. (gS=GoogleShare)
gt: Despliega la etiqueta que quieras. (gt=GoogleTicket)
gu: Despliega la suscripción que quieras. (gu=GoogleUnfold
gf: Despliega los elementos compartidos de un amigo. (gf=GoogleFriend)
u: Oculta o muestra la lista de suscriptores.
f: Cambia a modo pantalla completa.
/: Buscar.

2011-06-22T06:43:00.000-07:00

Nombre: Plantilla Nick Jonas
Autor: angitawbm
Fecha: Julio 2010
Características:

3 Columnas
inspirada en Nick Jonas
Imagenes Propias
Se puede integrar fácilmente Adsense (como se ve en el demo)
Incluye espacio para Banners 125x125
Colores Blanco, amarillo y celeste

Demo | Descargar Plantilla Nick Jonas para Blogger

FUENTE: plantillasbloggers.com

SOCCERINE Plantilla para tu blogger de 4

2011-06-22T06:40:00.000-07:00

Theme Name : Soccerine

Description : Free premium blogger template with 4 columns, Right sidebar, Adsense Optimized , Magazine Styled , Stylish Menu with SEO Optimization.

20 servicios gratuitos de botones automáticos para compartir contenido en redes sociales

2011-06-22T06:30:00.001-07:00

Después de visitar varias páginas y darle vueltas a todo lo que engloba enlaces a redes sociales me he puesto manos a la obra y dejo un resumen de los servicios más importantes. Nada más lejos que una rápida consulta para escoger el más interesante según el uso y aspecto. Y es que el tema de cómo compartir contenido en redes sociales esta a la orden del día. Creo que puede ser interesante tener o echarle un vistazo a esta lista de 20 Servicios Gratuitos de Botones Automáticos para Compartir en Redes Sociales . El orden no influye en nada.
(clic en la imagen para ir directamente al site)

Sharethis. (Extensión Sharethis para Joomla)
Sharethis ofrece la plataforma más innovadora para compartir en redes sociales a través de más de 50 canales sociales. Barra horizontal o vertical según las necesidades.

Addtoany.
Una de las mejores plataformas para compartir en redes sociales con un aspecto visual atractivo.
Plataformas: Website, WordPress Plugin, Botónes a la carta, Drupal, Tumblr, Joomla, Elgg, Blogger (widget), TypePad (widget), FeedFlare, Widgetbox.

Addthis. (Plugin Addthis para Joomla)
Aumenta el tráfico con la plataforma más popular para compartir en redes sociales. Con más de 50 idiomas. Plataformas: Website, Blogger, Tumblr, TypePad, Joomla!, Myspace, WordPress, Email Newsletter, Flash, Drupal, MovableType.

Sharepost.
Obtén mayor popularidad para tus vínculos. Guarde y comparta contenidos de los sitios web más populares.

FBshare.
Botón contador con el número de veces que se comparte la página actual en Facebook.

Spreadly.
Tres simples pasos para compartir tu contenido en la redes sociales más importantes: Facebook, Twitter, GoogleBuzz, LinkedIn.

Pluzit.
Añade el botón Pluzit a tu página web para hacer más fácil a los visitantes marcar y compartir tu contenido en las redes sociales.

BlogPlay.
Fácil de instalar, sus lectores podrán compartir sus mensajes con el resto del mundo. Ya sea Facebook, Twitter, Digg, Delicious, BlinkList, o cualquier otra red social o sitio para compartir, el plugin Sociable le permitirá a su website o blog estar conectado todos los medios de comunicación social, haciendo que su contenido sea conocido en el mundo. Más de 500.000 descargas demuestran que los bloggers de todo el mundo confían en este plugin.

Wikio – (Plugin Wikio para WordPress).
Botón universal para compartir y votar. La suscripción Universal Wikio permite contar con un sólo botón de suscripción RSS en tu blog. Una vez instalado, es recomendado testear el buen funcionamiento del botón. Para ello, haz clic en los diferentes enlaces del botón como lo harían tus visitantes.
Sexy Bookmarks: (SexyBookmarks para Joomla) – (SexyBookmarks para WordPress).
Esforzándose en sacar lo mejor del uso compartido en la web. Más de 1 millón de personas ya disfrutan de sharehaolic.

Pretty Sociable .
Es una manera diferente de compartir. Simplemente selecciona y copia el titular con la foto. La función se realizará según el contenido del portapapeles.

Socialfollow.
Personaliza a tu gusto el botón para compatir contenido web en redes sociales.

SocialMarker.
Descubre una de las mejores herramientas totalmente automatizada para compartir en más de 100 servicios web de redes sociales.

SocialPoster.
Servicio de marcadores para redes sociales y para difundir contenido web.

ShareSidebar.
La barra lateral vertical incrementará la difusión del contenido web en un 20-30% porque es única y siempre permanece en la misma posición.

TurnSocial.
La barra de TurnSocial es una barra de herramientas social y gratuita creada para los sitios web de empresas pequeñas y medianas, y de uso fácil para agregara a los medios sociales más populares. Facebook, Twitter, YouTube, ..

Tellafriend.
Te permite estar en conexión con tus clientes y sus contactos en las redes sociales.

Addinto.
Permite hacer más fácil a los visitantes de tu sitio web enlazar el contenido (título y noticia) en varios de los sitios más populares de las redes sociales. En lugar de tener un enlace a cada uno de ellos, tiene un solo enlace o botón para todos!

Web.Informer.
Este servicio permite a tus visitantes añadir las páginas de tus sitios webs todos los marcadores de las páginas de sitios sociales, tales como Digg, por ejemplo. Todo lo que necesitas es instalar el botón web.informer en tu sitio web, y tus visitantes tendrán acceso a los artículos o entradas de blog de Digg, Twitt, Delicious, etc. Web.Informer es simple, poderoso y fácil de usar.

Iconcy (Barra vertical lateral).
Aumenta la capacidad de tu sitio web con iconcy. Destacamos 4 características: 24 diseños diferentes, totalmente gratis, no necesita código y se añade en 1 minuto.

iconcy

CREE SU BLOG, HERRAMIENTAS PARA BLOGS

2011-06-20T12:58:00.000-07:00

MIÉRCOLES 26 DE DICIEMBRE DE 2007

GENERAR TRAFICO EN TU BLOG

BUSCANDO EN INTERNET, LLEGUE A ESTE ARTICULO DE LA PAGINAPROWEBLOGS, MUY INTERESABTE COMENTANDO SOBRE QUE ES LO QUE HAY QUE HACER PARA TENER MAS TRAFICO EN TU BLOG.

COMO GENERAR TRAFICO EN TU BLOG

NO IMPORTA CUÁN BUENO SEA TU PRODUCTO O TU BLOG, SI NO GENERAS TRÁFICO ESTARÁS FIRMANDO EL CERTIFICADO DE DEFUNCIÓN DE TU SITIO POR ADELANTADO.TENIENDO ESTO EN CUENTA, CUÁLES SON LOS MEJORES MÉTODOS PARA GENERAR TRÁFICO?
REPASEMOS LA SIGUIENTE LISTA DE SUGERENCIAS:
POSICIONAMIENTO EN BUSCADORES
EL POSICIONAMIENTO EN LOS BUSCADORES REPRESENTA UNA DE LAS PRINCIPALES FUENTES GENERADORAS DE TRÁFICO, SOBRE TODO EL POSICIONAMIENTO EN EL MAYOR DE LOS BUSCADORES HOY POR HOY:GOOGLE.SI BIEN GOOGLE NUNCA LO HA CONFIRMADO, SE SOSPECHA QUE LOS SITIOS NUEVOS ENTRAN EN UN PERÍODO DE TIEMPO EN EL CUAL NO FIGURAN EN LOS SERPS (RESULTADOS). EL EFECTO ES CONOCIDO COMO “SANDBOX” Y PUEDE DURAR DESDE UN PAR DE MESES HASTA UN AÑO. DE TODOS MODOS SE PUEDEN INTENTAR ESTRATÉGICAS PARA POSICIONAR UN BLOG DE MANERA MÁS O MENOS RÁPIDA.
POSTEAR, POSTEAR, POSTEAR
- EL PUBLICAR POSTS DE MANERA REGULAR, PREFERENTEMENTE DIARIA ES ALGO QUE LOS BUSCADORES APRECIAN. DE HECHO, VISITARÁN TU BLOG MÁS A MENUDO BUSCANDO CONTENIDOS FRESCOS LO QUE HARÁ QUE TU CONTENIDO APAREZCA MÁS RÁPIDAMENTE. POR EJEMPLO, PROWEBLOGS NO LLEGA A UN MES DE VIDA, Y SIN EMBARGO ALGUNOS DE SUS CONTENIDOS YA FIGURAN ENGOOGLE. ESTO GENERALMENTE ES ATÍPICO PARA UN SITIO NUEVO, PERO LA FRECUENCIA DE LOS POSTS HACE QUE EL EFECTO SANDBOX SE MINIMICE.
CONSIGUE LINKS DE OTROS BLOGS
- CONSIGUE LINKS DE OTROS BLOGGERS, PEDILES QUE TE LINKEEN, AVISALES DE POSTS QUE HAYAS PUBLICADO Y QUE CONSIDERES QUE PUEDEN GENERAR UN INTERÉS GENUINO, SÉ RESPETUOSO Y NO INSISTAS SI NO RECIBES RESPUESTA. SÉ GENEROSO CON TUS LINKS, LINKEAR A OTROS SITIOS TAMBIÉN AUMENTARÁ TU POSICIONAMIENTO.
PARTICIPA DE OTROS BLOGS Y FOROS
COMENTA EN OTROS BLOGS QUE LEAS A MENUDO, PERO HAZLO SIEMPRE CON UN PROPÓSITO Y SOBRE EL TEMA TRATADO, NO HAGAS SPAM! DE LO CONTRARIO, AUMENTARÁS TUS CHANCES DE GANARTE EL ODIO DE TUS COMPAÑEROS BLOGGERS. PARTICIPAR DE FOROS PUEDE AYUDAR A PROMOCIONAR TU BLOG, MUCHOS DE LOS FOROS DEJAN QUE TU FIRMA CONTENGA UN LINK HACIA TU BLOG.
OPTIMIZA TU BLOG PARA LOS BUSCADORES - TRABAJA SOBRE LA OPTIMIZACIÓN DE TU BLOG: REVISA LAS PALABRAS CLAVE QUE UTILIZAS, LA DENSIDAD Y POSICIÓN DE ELLAS.
LISTA TU BLOG A LOS DIRECTORIOS - ENVIA TU BLOG A TODOS LOS DIRECTORIOS QUE PUEDAS. ESTE POST ES UN BUEN LUGAR PARA EMPEZAR, MUCHOS DIRECTORIOS SON PAGOS, PERO MUCHOS SON GRATIS.
PUBLICITA TU BLOG
- SI TIENES LOS FONDOS PARA HACERLO, PROMOCIONAR TU BLOG USANDO ADWORDS U OTRO MÉTODO PUBLICITARIO Y UN PEQUEÑO PRESUPUESTO PUEDE DARLE UN EMPUJÓN A TU TRÁFICO.

MARTES 27 DE NOVIEMBRE DE 2007

HERRAMIENTAS MUY UTILES

ESTABA RE AL PEDO Y ME PUSE A BUSCAR HERRAMIENTAS PARA PERZONALIZAR MI BLOG, ENTONCES RECOPILE DE VARIAS PAGINAS Y ELABORE UAN LISTA CON TODO LO QUE PUDE ENTONTRAR. SE LAS DEJO PARA QUE LA REVISEN, REALMENTE ES MUY UTIL.

ADSENSE - PROGRAMA PARA ANUNCIOS PUBLICITARIOS DE GOOGLE.
ADBRITE - ANUNCIOS DE VENTAS.
AMAZON ASSOCIATES - AFILIACIÓN DE PROGRAMAS POPULARES.
ADGENTA - ANUNCIO TEXTUAL DE QUMANA (VÉASE ‘Q’).
ADROTATOR - ROTADOR DE ANUNCIOS EN FORMA DE PLUGIN PARA WORDPRESS.
AKISMET - HERRAMIENTA PARA EVITAR SPAM.
ADHEARUS - PAGOS POR CLICK EN ANUNCIOS.
ADWORDS - EL ANUNCIANTE AL LADO DE ADSENSE PARA PROMOVER SUS BLOGS.
AZOOGLEADS - PAGOS POR CLICK EN ANUNCIOS.
AUDIO BLOGGER – AÑADE AUDIO A TU BLOG.
BIDVERTISER - OFERTA BASADA ANUNCIOS PUBLICITARIOS
BLOGGER FOR WORD - INTEGRADO EN MS WORD PARA EDITAR Y POSTEAR SU BLOG A BLOGGER.
BLOG ADS - RED DE BLOGS PARA ANUNCIOS PUBLICITARIOS.
BLOGARITHM - ACTUALIZACIONES DE LOS BLOGS ENVIADOS POR EMAIL.
BLOG JET - HERRAMIENTA PARA EDITAR BLOGS.
BLOG DESK - HERRAMIENTA PARA EDITAR BLOGS.
BLOGLINES - LECTOR DE RSS.
BLOGSOME - PLATAFORMA PARA BLOGS.
BLOGPULSE - HERRAMIENTA DE BÚSQUEDA DE BLOGS.
BLOGPOLLS - HERRAMIENTA PARA PONER ENCUESTAS EN TU BLOG.
BLOGPOLL - HERRAMIENTA DE ENCUESTA PARA EL BLOG.
BACKPACKIT - HERRAMIENTA PARA ORGANIZACIÓN MUY ÚTIL.
BLOGGER.COM - PLATAFORMA PARA BLOGS DE GOOGLE.
BLOGGERS FOR HIRE - BLOGGERS QUE BUSCAN TRABAJO Y EMPRESARIOS POTENCIALES QUE BUSCAN LOS BLOGGERS.
BLOGSITTER.NET - SERVICIO PARA HALLAR BLOGGERS MIENTRAS USTED TOMA VACACIONES.
BLOGBURST - SINDICATO DE CONTENIDO DE LOS BLOGGERS PARA MEDIOS CONVENCIOANLES.
BLOGFLUX - SERVICIO PORTAL PARA BLOGS.
BLOGROLLING - HERRAMIENTA PARA ADMINISTRAR BLOGROLL.
BLOGBEAT - HERRAMIENTA DE ANÁLISIS/ESTADISTICA DEL BLOG.
BLOGGER JOBS - UN BLOG DESPUÉS DE LA PUBLICIDAD DE TRABAJOS DEL BLOG.
CHITIKA EMINIMALLS - PROGRAMA PARA ANUNCIOS PUBLICITARIOS.
CRISPADS - RED DE ANUNCIOS PUBLICITARIOS PARA BLOGS.
CREATIVE COMMONS- LICENCIAS DE COPYRIGHT.
COPYSCAPE - HERRAMIENTA PARA COMPROBAR SI HAY CONTENIDO RABADO O PLAGIO.
CLICKSOR - PROGRAMA PARA ANUNCIOS PUBLICITARIOS.
CLICKBANK - BIBLIOTECA DE PRODUCTOS AFILIADOS.
COMMISSION JUNCTION - COLECCIÓN DE PROGRAMAS AFILIADOS.
CASALE MEDIA - SOLUCIÓN PARA ANUNCIOS PUBLICITARIOS.
DEL.ICIO.US - MARCADOR SOCIAL.
DIGG - MARCADOR SOCIAL.
DRUPAL - PLATAFORMA DE BLOGS.
DOMAINSBOT - HERRAMIENTA PARA ENCONTRAR NOMBRE DE DOMINIOS.
DIGITAL POINT - FORO ÚTIL PARA LOS WEBMASTERS
ECTO - HERRAMIENTA PARA EDITAR BLOGS.
EXPRESSION ENGINE - PLATAFORMA DE BLOGS.
ENDO - AGREGADOR DE NOTICIAS PARA USUARIOS DE MAC.
ETHER - DEJE A LOS LECTORES UNA CONSULTA HECHA POR USTED DESDE SU SIDEBAR.
FEEDBURNER - HERRAMIENTA PARA ADMINISTRAR RSS. TAMBIÉN PROPORCIONA FEED DE PUBLICIDAD.
FEEDSTER - HERRAMIENTA PARA BUSCAR RSS.
FEEDDEMON - LECTOR DE RSS DESDE NEWSGATOR.
FEEDBLITZ - ACTUALIZACIONES DE LOS BLOGS ENVIADOS POR EMAIL Y SERVICIO DE SUBSCRIPCION A RSS.
FLICKR - COMPARTIR Y ALOJAR FOTOS.
FLOCK - BROWSER CON DESARROLLO BLOGGING.
FURL - MARCADOR SOCIAL.
FREE BLOG POLLS - ENCUESTAS PARA BLOGS.
FILMLOOP - RED LIBRE DE FOTOCASTING.
FEEDPASS - ADMINISTRADOR DE RSS, INTEGRADO CON ADSENSE.
FAVICON MAKER - PASA TUS IMAGENES A .ICO PARA USARLAS COMO FAVICON.
GOOGLE ANALYTICS - HERRAMIENTA DE ANÁLISIS Y ESTADÍSTICAS.
GABBLY - AGREGUE CHAT A SU BLOG.
GOOGLE READER - LECTOR DE RSS.
GOOGLE NEWS - OBTENNCIÓN DE NOTICIAS.
GOOGLE BLOG SEARCH - BÚSQUEDA DE BLOG MEDIANTE GOOGLE.
GOOGLE SITEMAPS - INDEX DE GOOGLE, APARECER.
HALOSCAN - SISTEMA DE LIBRE COMENTARIO PARA LOS BLOGS.
INTELLITXT - ANUNCIOS PUBLICITARIOS EN TEXTO.
ICE ROCKET - MOTOR DE BÚSQUEDA DE BLOGS.
KANOODLE - PROGRAMA PARA ANUNCIOS PUBLICITARIOS.
KONTERA - ANUNCIOS PUBLICITARIOS TEXTUAL.
KEYWORD AND BACKLINK TRACKER - MOTOR DE BÚSQUEDA.
LIVEJOURNAL - PLATAFORMA PARA BLOGS.
LINKSHARE - PROGRAMA PARA AFILIARSE.
MARS EDIT - HERRAMIENTA PARA EDITAR BLOGS.
MEMEORANDUM - SEGUIMIENTO Y AGREGADOR DE NOTICIAS PARA LOS BLOGS.
MYBLOGLOG - HERRAMIENTA DE ANÁLISIS Y ESTADÍSTICA.
MINT - HERRAMIENTA DE ANÁLISIS Y ESTADÍSTICA.
MOVABLETYPE - PLATAFORMA PARA BLOGS.
MECOMMERCE – VENTAS ELECTRÓNICAS
MSN ADCENTER - ANUNCIOS PUBLICITARIOS CONTEXTUALES.
MSN SPACES - PLATAFORMA PARA BLOGS.
NEWSGATOR - LECTORES DE NOTICIAS DE RSS.
NICHEBOT - BUSCADOR DE KEYWORD.
NAMEBOY - GENERADOR DE NOMBRES DE DOMINIO.
NUCLEUS CMS - PLATAFORMA DE BLOG DE CODIGO ABIERTO.
NETVIBES - AGREGADOR DE NOTICIAS RSS.
NETSCAPE BETA - MARCADOR SOCIAL.
NIREBLOG – PLATAFORMA MULTILENGUAJE PARA BLOGS.
ONLY WIRE - MARCADOR SOCIAL.
OVERTURE KEYWORD TOOL - HERRAMIENTA DE INVESTIGACIÓN DE PALABRAS CLAVES
PERFORMANCING - EDITOR DE BLOG Y HERRAMIENTAS DE ANÁLISIS UTILIZADO CON FIREFOX.
PHEEDO - ANUNCIOS PUBLICITARIOS EN RSS.
POST2BLOG - EDITOR DE BLOG USANDO EN MS WORD, IE O FIREFOX.
PINGOAT - HERRAMIENTA DE PINGING.
PINGOMATIC - HERRAMIENTA DE PINGING.
PMACHINE - PLATAFORMA DE BLOGS.
PAYPAL - HERRAMIENTA DE PAGO - USADA POR PROGRAMAS AFILIADOS Y SISTEMAS DE ANUNCIO PARA PAGAR A EDITORES.
PPCALC - CALCULADORA LIBRE PARA PAGOS.
PUBSUB - SERVICIO QUE NOTIFICA NUEVOS CONTENIDOS.
PHOTOBUCKET - ALOJAMIENTO DE IMAGENES Y VIDEO.
QUMANA - HERRAMIENTA PARA EDITAR BLOGS.
ROJO - LECTOR DE RSS.
ROCKETPOST - HERRAMIENTA PARA POSTEAR EN LOS BLOGS.
RIGHT MEDIA - PUBLICIDAD.
RMAIL - SUBCRIPCIÓN A CUALQUIER RSS Y ENVIADOS AL EMAIL.
SITEMETER - HERRAMIENTA LIBRE DE ESTADÍSTICA.
SIX FIGURE BLOGGING - APRENDA A HACER DINERO BLOGEANDO.
SCOOPT WORDS - SERVICIO PARA VENDER EL CONTENIDO DE LOS BLOGGERS A EDITORES.
SITENING - MOTOR DE BÚSQUEDA.
SPARKLINES - SIDERBAR PARA WIDGETS Y GRÁFICOS.
SKYPE - HERRAMIENTA DE VOIP, PODCAST, ENTREVISTAS, ETC.
SPAM KARMA - PLUGIN ANTISPAM PARA WORDPRESS.
SITEPOINT - FOROS PARA WEBMASTERS.
SLIDE - ALOJAMIENTO DE FOTOS, SLIDESHOWS ETC.
SQUIDOO - HAGA DINERO Y PROMUEVA SU BLOG.
TEXT LINK ADS - SISTEMA DE PUBLICIDAD POR LINKS.
TECHNORATI - BÚSQUEDA DE BLOGS.
TOPIX - HALLAR HISTORIETAS.
TAGCLOUD - MARCADOR DE ETIQUETAS -TAGS-.
TINYURL - HACER A LOS URLS MAS PEQUEÑOS.
TYPEPAD - ALOJAMIENTO Y PLATAFORMA PARA BLOGS.
TRIBAL FUSION - EJEMPLAR BASADO EN ANUNCIOS PUBLICITARIOS.
3BUBBLES - CHAT EN VIVO EN TU BLOG.
UNOBTRUSIVE SIDENOTES - FORMA DE PONER SUS SIDENOTES EN SUS POSTS.
VALUECLICK - PROGRAMA BASADO EN ANUNCIOS PUBLICITARIOS.
VIZU - ENCUESTAS PARA EL BLOG.
VOX - MARCADOR SOCIAL DE SIX APART
WORDPRESS - PLATAFORMA PARA BLOGS.
W.BLOGGAR - HERRAMIENTA PARA EDITAR BLOGS.
WEBPAD - EDITOR DE TEXTOS BASADO EN WEB.
WEBLOGS.COM - BLOGS ACTUALIZADOS RECIENTEMENTES Y CON AGREGADOR.
WEBMASTERWORLD - FOROS PARA LOS WEBMASTERS.
XANGA - COMUNIDAD DE WEBLOGS.
YAHOO 360 - PLATAFORMA PARA BLOGS.
YPN - SERVICIO DE PUBLICIDAD CONTEXTUAL.
YOUTUBE - ALOJAMIENTO Y COMPARTICIÓN DE VIDEOS.
YUTTER - SERVICIO DE SUSCRIPCIÓN DE RSS Y BLOGS.
YAHOO NEWS - OBTENER LAS NOTICIAS ALREDEDOR DE LA WEB.
ZOOKODA - HERRAMIENTA DE RSS PARA EMAILS Y NOTICIAS.
Z OUDRY - EDITOR DE BLOGS.

HERRAMIENTAS PARA CREAR TU BLOG

PARA CREAR TU BLOG, LO PRIMERO QUE DEBES HACER ES ENTRAR PREFERENTEMENTE EN WWW.BLOGGER.COM, ESTA PÁGINA ES PERETENECIENTE A GOOGLE, QUE ES EL MOTOR DE BUSQUEDA MAS UTILIZADO EN EL MUNDO. ALLI DEBERAS CREAR UNA CUENTA INGRESANDO TU DIRECCIÓN DE MAIL, Y CREANDO UNA CONTRASEÑA (LA DIRECCION DE MAIL NO DEBE SER OBLIGATORIAMENTE DE GMAIL). LUEGO DE ESO, LA CREACIÓN DEL BLOG ES MUY FÁCIL, DEBES SEGUIR LOS PASOS, PONIENDO EL NOMBRE Y LA DIRECCION DEL BLOG QUE VAS A CREAR. ES RECOMENDABLE QUE ELIGAS UN TEMA QUE AGRADE A LA GENTE, ASI TENDRAS MAS VISITANTES EN TU BLOG.

SUSCRIBIRSE A: ENTRADAS (ATOM)

LÍNEA DE TIEMPO SIMPLE - PLANTILLA de 4 columnas para tu blogger PARA EL BLOG DE TECNOLOGÍA

2011-06-18T11:07:00.000-07:00

Actualización: Si deslizante no puede trabajar, se puede descargar la versión fija con enlace de descarga proporcionados en este post, o se puede ver aquí la solución si no quiere volver a instalar esta plantilla.

En este post, quiero mostrar mi última plantilla llamada: Línea de tiempo simple. Creo que esta plantilla es mejor para el blog de tecnología, pero se puede usar en otros nichos (por supuesto ^ ^).

Demo en vivo | Descargar

¿Te gusta? Si la respuesta es "sí" y desea instalarlo, aquí es una instrucción simple para usted:
1, archivo de plantilla de descarga de Rapidshare.

2, plantilla abierta en cualquier editor de palabra que tiene, lo mejor es Notepad + + (MS Word no es recomendable debido a que auto generar etiquetas en el archivo de la plantilla después de la edición)

3, Para cambiar el logotipo, busque el siguiente código:

# Head-contenido {
de fondo: transparente;
background-image: url (http://img266.imageshack.us/img266/9598/simplextimeline.png);
background-position: 0px 0px;
background-repeat: no-repeat;
}

y cambiar el enlace en negrita a su URL de logotipo.

4, Este es el código del formulario de suscripción:
<Form onsubmit = "window.open ('http://feedburner.google.com/fb/a/mailverify?uri=simplex','popupwindow', 'las barras de desplazamiento = yes, width = 550, height = 520'); return true "target =" popupwindow "method =" post "action =" http://feedburner.google.com/fb/a/mailverify ">
<input type="hidden" name="uri" value="simplex" />
<input type="hidden" value="en_US" name="loc"/>
<p class="email-form">
<input type="text" name="email" class="sub"/>
<input type="image" alt="submit" class="subbutton" src="http://img517.imageshack.us/img517/3158/blankdb.gif"/>
</ P>
<div style="text-align: both;"> <small> privacidad garantizada. Nunca vamos a compartir su información. </ Small> </ div>
</ Form>
cambiar el texto en negrita a su cuenta de FeedBurner.

5, Este es el código de red social:
<div class="sub-icons">
<a href="/feeds/posts/default" title="Subscribe a través de RSS Feed"> <img align = "top" alt = "Subscribe via RSS Feed" src = "http://img535.imageshack.us/img535 / 950/rss2t.png "class =" rss-sub "/></ a>
dinhquanghuy <a href="http://www.twitter.com/ "me title="Follow en Twitter" rel="external" target="_blank"> <img align =" top "alt =" Sígueme en Twitter "src =" http://img340.imageshack.us/img340/8055/twitter2e.png "class =" twitter-sub "/></ a>
href="http://www.facebook.com/ <a contact.dinhquanghuy "rel="external" title="Connect conmigo en Facebook" target="_blank"> <img align =" top "alt =" Conectar conmigo en Facebook "src =" http://img96.imageshack.us/img96/3849/facebook2q.png "class =" facebook-sub "/></ a>
href="http://www.linkedin.com/in/ <a dinhquanghuy "rel="external" title="Connect conmigo en LinkedIn" target="_blank"> <img align =" top "alt =" Conectar conmigo en LinkedIn "src =" http://img340.imageshack.us/img340/2030/linkedin2.png "class =" linkedin-sub "/></ a>
</ Div>
de nuevo, cambie el texto en negrita a sus cuentas ^ ^

6, Este es el código para Flickr galería:
<script type="text/javascript">
$ (Document). Ready (function () {
$ ('# Flickrphoto'). Jflickrfeed ({
límite: 9,
qstrings: {
id: "37304598 @ N02"
},
ItemTemplate: "<a href="{{image_b}}"> <img src="{{image_s}}" alt="{{title}}" /> </ un ">
});
});
</ Script>
cambiar el valor 37304598 @ N02 a tu Flickr ID

7, Ok, guarda la plantilla y subir a Blogger.

8, vaya al panel, siga elemento Page

9, Para agregar anuncio en la parte superior, haga clic en el botón de edición en topads widget y pegar el código de anuncios en el contenido flash (código de Adsense, por ejemplo). Haga lo mismo paramidads, anuncios, ads3 y widgets ads4.

10, para añadir el artículo a menú, haga clic en el botón editar y añadir enlace a cada categoría en su blog. Enlace a cada categoría tiene una estructura: http:// {url} blog / search / label / {categoría}.Haga lo mismo para la categoría y el blogroll.

11, para añadir vídeo, haga clic en el widget de vídeo y pegue el código de inserción del vídeo, el tamaño de vídeo es 286x210

12, puede añadir lo que quieras en el widget de texto.

Ok, guardar los cambios y ya está.
si desea mostrar un mensaje en el control deslizante, sólo tiene que añadir "característica" de una etiqueta a su cargo. Hay un máximo de 4 puestos de control deslizante de contenido.
Eso es todo para la instalación de esta plantilla. Espero que este modelo de utilidad.

3 puntos para hacer de un blog algo más profesional

2011-06-17T15:24:00.000-07:00

Así como existen miles de recetas de comida, también existen algunas recetas para hacer de un blog algo más profesional. Con "hacer de un blog algo más profesional" me refiero a hacer que tu blog tenga una apariencia más rica y que sea como todos los demás sitios y grandes blogs. Por ahora voy a ir yendo con puntos básicos, pero seguramente en un futuro especifiquemos más.

Diseños 2.0: Hoy en día los blogs más populares y sitios de noticias llevan con ellos diseños 2.0, los cuales consisten en muchos degradados, reflejos, brillos y determinados colores vivos. Incluso antes era malo para el SEO, ya que se tenían que utilizar muchas imágenes, pero con los navegadores de hoy en día y la creación del CSS 3 y HTML 5, ya es posible realizar muchos efectos sin necesidad de imágenes.

Marcas: Es algo importante hacer que tu blog sea más que un blog, y para ello podemos incorporarle una marca, algo que lo haga único entre todos los demás sitios, que sea reconocido por algo, y ese algo es la marca. Podemos imponerla en logotipos, textos, frases, etc.

Contenidos profesionales: Es también importante crear buenos contenidos, prolijos, sin errores, hablando seriamente, desde un punto de vista externo a todo, sin dar nuestra opinión más que para casos concretos. Para lo demás existen los blogs personales o de crítica, pero en estos casos es importante estar siempre en el medio de todo.