Blogger

30+ sitios adonde enviar tus plantillas Blogger

Publicado por Claudia en enero 24, 2012

Además de comprar (o intercambiar) enlaces de texto o espacios publicitarios, comprar enlaces en temas de WordPress, Joomla u Blogger que se distribuyen gratuitamente es una buena inversión para conseguir enlaces entrantes para nuestro blog y rankear mejor. A la hora del linkbuilding, todo es válido; pero a veces no es necesario gastar dinero si aprovechas tus habilidades y creatividad.

Si buscas mejorar tu pagerank y obtener más visitas para tu blog y eres bueno diseñando plantillas exclusivas para Blogger (o haciendo adaptaciones CSS de temas diseñados para otras plataformas) o tienes alguna que quieras compartir con todo el mundo, te dejo un listado de más de 30 directorios para enviar tus templates.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

http://www.allblogtools.com/
http://www.bestbloggertemplates.net/
http://besttheme.net/
http://www.bietemplates.com/
http://www.bloggertemplatesblog.com/
http://bloggertemplateshub.com/
http://www.bloggertipz.com/
http://www.bloggertricksandtoolz.com/
http://www.blogspottemplate.net/
http://blogtemplate4u.com/
http://www.blog-zone.info
http://borneotemplates.com/
http://btemplates.com
http://www.btemplates4u.com/
http://www.btheme.info/
http://csstemplates.net/
http://www.coolbthemes.com/
http://www.denidi.net/
http://www.dhetemplate.com
http://javatemplates.com
http://www.mybloggerthemes.com/
http://www.mytemplatez.com/
http://www.newbthemes.com
http://www.premiumbloggertemplates.com/
http://www.premiumbtemplates.com/
http://www.probloggertemplate.com
http://www.raytemplates.com/
http://www.templatebloggers.com
http://www.templategator.net/
http://www.templates-blogger.com/
http://freethemes4all.com/
http://thetemplatebank.com/
http://www.zoomtemplate.com/

Algunas recomendaciones prácticas:

  • Procura que tu template se vea limpio, y tenga una mínima calidad para que sea aceptado en los distintos directorios. Plantillas más bonitas, que sirven para múltiples nichos y con más características suelen tener más descargas.
  • Incluye instrucciones precisas.
  • Busca algún servicio de hosting seguro para subir tus plantillas, si no dispones de hosting propio. Por ejemplo, Box.net.
  • Incluye los scripts en la misma plantilla (si usa), y hospeda las imágenes en Blogger o álbumes web de Picasa (no photobucket ni imageshack, porque el ancho de banda es limitado).
  • No olvides incluir un enlace a tu sitio en el footer, indicando la licencia de la plantilla.
Tags:
Blogger

Blogger habilita los comentarios anidados

Publicado por Claudia en enero 12, 2012


Los usuarios de Blogger tienen cada vez menos que envidiarle a WordPress, al menos en su versión gratuita. Hace algunas horas, en Blogger Buzz se dio a conocer la nueva característica incorporada a la popular plataforma de blogs: los comentarios anidados.

Esta nueva mejora el sistema de comentarios de Blogger funciona automáticamente en nuevas plantillas y sin necesidad de entrar en Blogger in Draft, siempre y cuando el usuario, en su Panel de Control, haya elegido las siguientes opciones:

  • En Configuración/Otros/Permitir feed del blog: Completo
  • En Configuración/Entradas y comentarios/Ubicación de los comentarios: Debajo de la entrada

Lo positivo de los comentarios anidados, es que al incluir el botón “Responder”, facilitan la interacción entre los visitantes, permitiendo identificar claramente cuándo hacen comentarios generales o cuándo están respondiendo a alguien en particular. No obstante, los comentarios anidados funcionarán sólo en las nuevas plantillas Blogger lanzadas en año pasado y en instalaciones recientes de las plantillas de diseño de 2006.

Quienes hayan instalado plantillas diseñadas por terceras partes o hecho modificaciones en el código, deberán “Restablecer plantillas de artilugios a los valores predeterminados“, en la Edición de HTML del blog y previo respaldo de la plantilla por si algo no llegara a funcionar bien.

Vía | Way2Blogging, Google Operating System

Tags: ,
Blogger

El nuevo lightbox de Blogger

Publicado por Claudia en septiembre 19, 2011

Hace un par de días Google System hizo oficial la incorporación de una nueva característica que seguro ya muchos habían notado en sus blogs de Blogger: un plugin efecto lightbox.

A simple vista se ve bonito, y le otorga un toque muy moderno a tu blog. No obstante, no tiene por qué gustarte, y no puedes quitarlo desde el menú de configuración ni mucho menos removiendo código en tu plantilla.

Lo peor ocurre si tienes Lytebox o un plugin similar instalado, porque se abrirán dos ventanas modales en vez de una. Además, puede ocasionar conflictos con los links que has añadido a las imágenes, o resultar demasiado pesado o molesto.

Si definitivamente no te gustó y ya no lo quieres ver más, Mark de Code from English Coffe Drinker (vía Vagabundia) recomienda añadir la siguiente función llamada “kill lightbox” antes de </head> para deshabilitar el lightbox de Blogger:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
//<![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName('img');
 for (var i = 0 ; i < images.length ; ++i) {
  images[i].onmousemove=function() {  
   var html = this.parentNode.innerHTML;   
   this.parentNode.innerHTML = html;
  };
 }
}
 
if (window.addEventListener) {
 window.addEventListener('load',killLightbox,false);
} else {
 window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Santo remedio.

Tags: ,
Blogger, jQuery

Incorporar jQuery TipTip en Blogger

Publicado por Claudia en septiembre 15, 2011

jquery titptip wordpress

En Blogger puedes añadir tooltips con jQuery TipTip de manera similar a la incorporación en WordPress:

1. Asegúrate de tener cargado jQuery en tu blog

Si ya lo tienes, no lo cargues de nuevo. Si no, puedes incluirlo pegando el siguiente código en tu plantilla desde Diseño/Edición de HTML, antes de </head>:

1

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

De esta manera, se estará cargando la última versión (minificada) de jQuery desde Google.

2. Agrega TipTip directamente en tu plantilla

Antes de </head>, pega los siguientes códigos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script type='text/javascript'>
//<![CDATA[
 
 /*
 * TipTip
 * Copyright 2010 Drew Wilson
 * www.drewwilson.com
 * code.drewwilson.com/entry/tiptip-jquery-plugin
 *
 * Version 1.3   -   Updated: Mar. 23, 2010
 *
 * This Plug-In will create a custom tooltip to replace the default
 * browser tooltip. It is extremely lightweight and very smart in
 * that it detects the edges of the browser window and will make sure
 * the tooltip stays within the current window size. As a result the
 * tooltip will adjust itself to be displayed above, below, to the left 
 * or to the right depending on what is necessary to stay within the
 * browser window. It is completely customizable as well via CSS.
 *
 * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
(function($){$.fn.tipTip=function(options){var defaults={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:3,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},exit:function(){}};var opts=$.extend(defaults,options);if($("#tiptip_holder").length<=0){var tiptip_holder=$('<div id="tiptip_holder" style="max-width:'+opts.maxWidth+';"></div>');var tiptip_content=$('<div id="tiptip_content"></div>');var tiptip_arrow=$('<div id="tiptip_arrow"></div>');$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))}else{var tiptip_holder=$("#tiptip_holder");var tiptip_content=$("#tiptip_content");var tiptip_arrow=$("#tiptip_arrow")}return this.each(function(){var org_elem=$(this);if(opts.content){var org_title=opts.content}else{var org_title=org_elem.attr(opts.attribute)}if(org_title!=""){if(!opts.content){org_elem.removeAttr(opts.attribute)}var timeout=false;if(opts.activation=="hover"){org_elem.hover(function(){active_tiptip()},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}else if(opts.activation=="focus"){org_elem.focus(function(){active_tiptip()}).blur(function(){deactive_tiptip()})}else if(opts.activation=="click"){org_elem.click(function(){active_tiptip();return false}).hover(function(){},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}function active_tiptip(){opts.enter.call(this);tiptip_content.html(org_title);tiptip_holder.hide().removeAttr("class").css("margin","0");tiptip_arrow.removeAttr("style");var top=parseInt(org_elem.offset()['top']);var left=parseInt(org_elem.offset()['left']);var org_width=parseInt(org_elem.outerWidth());var org_height=parseInt(org_elem.outerHeight());var tip_w=tiptip_holder.outerWidth();var tip_h=tiptip_holder.outerHeight();var w_compare=Math.round((org_width-tip_w)/2);var h_compare=Math.round((org_height-tip_h)/2);var marg_left=Math.round(left+w_compare);var marg_top=Math.round(top+org_height+opts.edgeOffset);var t_class="";var arrow_top="";var arrow_left=Math.round(tip_w-12)/2;if(opts.defaultPosition=="bottom"){t_class="_bottom"}else if(opts.defaultPosition=="top"){t_class="_top"}else if(opts.defaultPosition=="left"){t_class="_left"}else if(opts.defaultPosition=="right"){t_class="_right"}var right_compare=(w_compare+left)<parseInt($(window).scrollLeft());var left_compare=(tip_w+left)>parseInt($(window).width());if((right_compare&&w_compare<0)||(t_class=="_right"&&!left_compare)||(t_class=="_left"&&left<(tip_w+opts.edgeOffset+5))){t_class="_right";arrow_top=Math.round(tip_h-13)/2;arrow_left=-12;marg_left=Math.round(left+org_width+opts.edgeOffset);marg_top=Math.round(top+h_compare)}else if((left_compare&&w_compare<0)||(t_class=="_left"&&!right_compare)){t_class="_left";arrow_top=Math.round(tip_h-13)/2;arrow_left=Math.round(tip_w);marg_left=Math.round(left-(tip_w+opts.edgeOffset+5));marg_top=Math.round(top+h_compare)}var top_compare=(top+org_height+opts.edgeOffset+tip_h+8)>parseInt($(window).height()+$(window).scrollTop());var bottom_compare=((top+org_height)-(opts.edgeOffset+tip_h+8))<0;if(top_compare||(t_class=="_bottom"&&top_compare)||(t_class=="_top"&&!bottom_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_top"}else{t_class=t_class+"_top"}arrow_top=tip_h;marg_top=Math.round(top-(tip_h+5+opts.edgeOffset))}else if(bottom_compare|(t_class=="_top"&&bottom_compare)||(t_class=="_bottom"&&!top_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_bottom"}else{t_class=t_class+"_bottom"}arrow_top=-12;marg_top=Math.round(top+org_height+opts.edgeOffset)}if(t_class=="_right_top"||t_class=="_left_top"){marg_top=marg_top+5}else if(t_class=="_right_bottom"||t_class=="_left_bottom"){marg_top=marg_top-5}if(t_class=="_left_top"||t_class=="_left_bottom"){marg_left=marg_left+5}tiptip_arrow.css({"margin-left":arrow_left+"px","margin-top":arrow_top+"px"});tiptip_holder.css({"margin-left":marg_left+"px","margin-top":marg_top+"px"}).attr("class","tip"+t_class);if(timeout){clearTimeout(timeout)}timeout=setTimeout(function(){tiptip_holder.stop(true,true).fadeIn(opts.fadeIn)},opts.delay)}function deactive_tiptip(){opts.exit.call(this);if(timeout){clearTimeout(timeout)}tiptip_holder.fadeOut(opts.fadeOut)}}})}})(jQuery);
 
//]]>
</script>
 
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".tooltip").tipTip();
});
//]]>
</script>

Ahora, antes de ]]></b:skin>, copia el siguiente código CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

/* TipTip CSS - Version 1.2 */
 
#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}
 
#tiptip_holder.tip_top {
padding-bottom: 5px;
}
 
#tiptip_holder.tip_bottom {
padding-top: 5px;
}
 
#tiptip_holder.tip_right {
padding-left: 5px;
}
 
#tiptip_holder.tip_left {
padding-right: 5px;
}
 
#tiptip_content {
font-family: Arial, sans-serif;
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
*background-color: #000;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
 
#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}
 
#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}
 
/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}

3. Haz que funcione

Tanto en tus entradas como en tu plantilla puedes incluir TipTip de forma manual usando el atributo “title” y la clase (class=”tooltip”) en tus enlaces, de la siguiente manera:

1

<a href="http://chicablogger.com" title="Recursos para Blogger y WordPress" class="tooltip">Chica Blogger</a>
Tags: , , , ,
Blogger

Añadir enlaces externos al menú de páginas de Blogger

Publicado por Claudia en agosto 16, 2011

Muchas personas que usan Blogger me han preguntado cómo hago para poner enlaces a mis cuentas de Twitter y Facebook en el menú. Solía responder que uso WordPress, o que pueden reemplazar un widget de tipo “PageList” (páginas) por un “LinkList” (lista de enlaces). Ello aún suena un poco complicado si se trata de retocar el código, especialmente para quienes comienzan con un blog.

La creación de páginas estáticas de Blogger siempre fue una de las funciones más esperadas. Sin embargo, el widget típico de Páginas sólo permitía mostrar las páginas del blog. Ello, por un lado, facilitaba enormemente el trabajo de los usuarios, al no tener que hacer nada para mostrar enlaces a sus páginas automáticamente, pero hacía extrañar las listas típicas de menú en HTML, que permiten enlazar lo que queramos.

Para quienes quieren tener un solo menú principal en su blog de Blogger que muestre páginas y enlaces externos, les tengo una buena noticia: Luis Gray anuncia que ya es posible añadir enlaces externos en un widget de páginas de Blogger.

Cómo hacerlo, paso por paso:

1. En Diseño/Elementos de la página, añadir un widget de Páginas en tu plantilla Blogger. Si ya lo tienes añadido, sáltate este paso.

2. Ve a Blogger in Draft, que te permite probar las nuevas funciones de Blogger antes de ser lanzadas públicamente. Una vez allí, accede al blog donde quieras añadir algún enlace externo, y ve a Páginas /Página nueva / Dirección Web.

Ahora, sólo agrega tu enlace, como se muestra a continuación:

Después de ello, el enlace será añadido automáticamente a tu menú de Páginas, y podrás moverlo a la ubicación que desees.

Tags: , , ,
Página 1 de 712345»...Última »