Si quieres saber cómo subrayar textos en tu blogspot es tan fácil como poner el texto de esta forma:
<u>texto a subrayar</u>
El resultado será el siguiente:
Ejemplo
Recomendaciones:
Categorías
Crea tu blog paso a paso:
SEO para Blogger
Fideliza a tus lectores
Consigue más visitas
Gana dinero con tu blog
Haz que tu blog no parezca un blog
Dominio propio para Blogger
¿Quieres enlazarme?
Blogroll
Si eres blogger házte seguidor
.
| [+/-] | Como subrayar textos en tu blog |
<u>texto a subrayar</u>
El resultado será el siguiente:
Ejemplo
| [+/-] | Menú vertical para tu blog de blogger |
Para añadir un menú vertical en tu blog de blogger deberemos seguir los siguientes pasos:
1) Vamos a Diseño
2) Edición de HTML
3) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes de ]]></b:skin> pegamos el siguiente código:
/* Menú Vertical BLOGGER
----------------------------------------------- */
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 250px; /* ANCHO DEL MENÚ */
font-size: 11pt;
}
#menuvert ul li {
background-color: #BBB00; /* COLOR DE FONDO */
padding: 0px;
}
#menuvert ul li a {
color: #000; /* COLOR LETRAS */
text-decoration: none;
display: block;
padding: 10px 10px 10px 20px;
}
#menuvert ul li a:hover {
background: #336699; /* COLOR AL PASAR EL RATÓN */
border-left: 10px solid #000066;
color: #FFFFFF;
Podemos cambiar los colores, el ancho, etc. Fijaros en las descripciones del tipo /*
5) Ahora vamos a Diseño -> Elementos de página -> Añadir un gadget -> HTML/Javascript
6) Pegamos el siguiente código:
<div id="menuvert">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
</ul>
</div>
Si quieres añadir más Títulos al menú copia-pega otro <li><a href="URL del enlace">Título 4</a></li> después del <li><a href="URL del enlace">Título 3</a></li>
Y ya hemos terminado.
| [+/-] | Mensaje tipo post-it para informar a los lectores de tu blog |
Si quieres que aparezca un mensaje estilo post-it en tu blog para informar a tus lectores de algo importante, deberemos hacer lo siguiente:
1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript
5) Pegamos el siguiente código:
<style>
<!--
#postit{width:300px; height:200px; padding:5px; position:absolute; background-color:yellow; border:1px solid black; visibility:hidden; z-index:50; cursor:hand; color: #000;}
a:link {color: #000000; text-decoration:none;}
a:visited {color: #000000;}
a:hover {color: #000000;}
a:active {color: #000000;}
-->
</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>
<!--AQUI VA EL MENSAJE-->
<br/>
Aquí va el mensaje que se mostrará
<!--FIN DEL MENSAJE-->
<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>
Si deseas cambiar el tamaño debes modificar width (largo) y height (ancho). También puedes cambiar ese color amarillo chillón por el que tu quieras en background-color. Sólo nos queda poner el mensaje que queramos.
En donde pone var once_per_browser=0 podemos cambiar el 0 por un 1. De esta forma sólo nos aparecerá una vez el mensaje.
De nuevo mil gracias a ciudadblogger.
| [+/-] | Cómo saber cuál es mi pagerank de blog de blogger |
Si quieres saber cuál es el pagerank (importancia de tu blog para los usuarios de la red) de tu blog podemos averiguarlo mediante la barra de google o mediante ciertas páginas como prchecker.
| [+/-] | Cómo crear un menú superior para blog de blogger (II) |
1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript
5) Pegamos el siguiente código:
<style>#MainMenu
{
height:27px;
background: #FFFFFF;
margin:0;
border-style: solid;
border-color:#9AB6D2;
border-top-width:0;
border-right-width:0;
border-bottom-width:3px;
border-left-width:0;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0 1px 0 0 ;
padding:0;
}
#tab a
{
background: url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0;
display:block;
float:left;
}
#tab a span
{
display:block;
background:url("http://img233.imageshack.us/img233/1986/bleft115rc5.gif") no-repeat left top;
padding:0 22px 0 22px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:27px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#016599;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border-style: solid;
border-color:#9AB6D2;
border-top-width:0;
border-right-width:0;
border-bottom-width:3px;
border-left-width:0;
background: #FFFFFF;
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0 1px 0 0 ;
padding:0;
display:block;
border:0 solid ;
color:#FFFFFF;
background:url("http://img233.imageshack.us/img233/1986/bleft115rc5.gif") no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:27px;
background:url("http://img222.imageshack.us/img222/461/bright115ow7.gif") no-repeat right top;
padding:0 22px 0 22px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0 solid ;
background-position:left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#016599;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#016599;
font-weight:bold;
}
</style>
<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="http://www.URLDETUBLOG.com"><span>CONTACTO</span></a></li>
</ul>
</div>
</div>
Si queremos añadir otra pestaña como la de CONTACTO como por ejemplo Quiénes somos, después del código de color verde tendríamos que pegar lo siguiente:
<li class="item_active"><a href="http://www.URLDETUBLOG.com"><span>Quiénes somos</span></a></li>
Y así podemos añadir las pestaña que queramos.
| [+/-] | Menú desplegable con pestañas de varios niveles para tu blog de blogger |
Si quieres un menú para tu blog de blogger que tenga varias pestañas y que cuando pasas el ratón por encima salgan más submenús debemos hacer lo siguiente:
2) Edición de HTML
3) Buscamos el código: ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes de ]]></b:skin> pegamos el siguiente código:
/* Menu desplegable
------------------------------------------------------*/
#menubloque {
background:#8c8c8c;
width: 500px;
height: 35px;
font-size: 13px;
color: #ffffff;
border: 1px solid #424242;
padding: 0px auto 0;
font-weight: bold;
margin: 15px auto 0;
font-family:'Trebuchet MS',Arial,Verdana,Sans-Serif;
}
#menudesplegable li {
margin: 0;
list-style: none;
padding: 0;
}
#menudesplegable {
margin: 0;
padding: 0;
}
#menudesplegable ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menudesplegable li a, #menudesplegable li a:link, #menudesplegable li a:visited {
color: #FFFFFF;
display: block;
font-weight: normal;
padding: 9px 15px 8px;
text-transform: lowercase;
margin: 0;
}
#menudesplegable li a:active, #menudesplegable li a:hover {
color: #000000;
background: #cccccc;
text-decoration: none;
margin: 0;
padding: 9px 15px 8px;
}
#menudesplegable li li a:link, #menudesplegable li li a, #menudesplegable li li a:visited {
color: #FFF;
font-weight: normal;
text-transform: lowercase;
background: #bbbbbb;
width: 150px;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#menudesplegable li li a:hover, #menudesplegable li li a:active {
background: #e3e3e3;
color: #000000;
padding: 7px 10px;
}
#menudesplegable li {
float: left;
padding: 0;
}
#menudesplegable li ul a {
width: 140px;
}
#menudesplegable li ul {
position: absolute;
margin: 0;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
padding: 0;
}
#menudesplegable li:hover, #menudesplegable li.sfhover {
position: static;
}
#menudesplegable li ul ul {
margin: -33px 0px 0px 170px;
}
#menudesplegable li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#menudesplegable li:hover ul, #menudesplegable li li:hover ul, #nav li li.sfhover ul,#menudesplegable li li li:hover ul, #menudesplegable li.sfhover ul, #menudesplegable li li li.sfhover ul {
left: auto;
}
/* Fin menu desplegable ---------------------------*/
5) Ahora buscamos <div id='content-wrapper'>
6) Justo antes de <div id='content-wrapper'> pegamos el siguiente código:
<div id='menubloque'>
<ul id='menudesplegable'>
<li><a href='URL DE LA PAGINA'>Inicio</a></li>
<li><a href='URL DE LA PAGINA'>Contácto</a></li>
<li><a href='URL DE LA PAGINA'>Sobre mí</a></li>
<li>
<a href=''>Categorías</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li>
<a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href=''>Categorías 2</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 5</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
El bloque señalado en verde es el bloque que contiene los enlaces "fijos" es decir, los que no despliegan opciones.
Las palabras marcadas en naranja representan los nombres que despliegan las opciones (o los enlaces).
Sustituye:
TITULO: por el título de la página o el enlace.URL DE LA PAGINA: por la dirección del blog o la página web.
De nuevo, gracias a elbalcóndejaime.
| [+/-] | Calendario para tu blog de blogger-blogspot |
Gracias a El balcón de Jaime os traigo este estupendo calendario para tu blog de blogger.
Si quieres instalarlo en tu blog debes hacer lo siguiente:
1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript
5) Pegamos el siguiente código:
<center><table id="table1" border="0" style="border: 1px dashed #ccc;" cellpadding="1" cellspacing="0" width="103px" height="5px">
<tbody><tr>
<td valign="top" height="8" bgcolor="#ffffff" align="center">
<script language="JavaScript">
<!--//Calendario del Balcón
monthnames = new Array(
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("");
document.write("<table class='fonte' style='padding-left:3px; font-color:#ffffff' size='1' font-family:;" );
document.write(" cellpadding=1 cellspacing=1>");
document.write("<tr><td colspan=7 class='mes_ano'><center><font color='#000000' size='2' face='Verdana'>"
+ monthnames[thismonth] + " " + thisyear
+ "</font></center></td></tr>");
document.write("<tr>");
document.write("<td class='feira'><font color='#447f1a' size='1' face='Arial'>D</font></td>");
document.write("<td class='feira'><font color='#FFC521' size='1' face='Arial'>L</font></td>");
document.write("<td class='feira'><font color='#447f1a' size='1' face='Arial'>M</font></td>");
document.write("<td class='feira'><font color='#FFC521' size='1' face='Arial'>M</font></td>");
document.write("<td class='feira'><font color='#447f1a' size='1' face='Arial'>J</font></td>");
document.write("<td class='feira'><font color='#FFC521' size='1' face='Arial'>V</font></td>");
document.write("<td class='feira'><font color='#447f1a' size='1' face='Arial'>S</font></td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td><font color='#ffffff' size='1' face='Arial'>-</font></td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td><font color='#000000' size='1' face='tahoma'>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href="" + linkdays[c][2] + "">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='#db6d6b' size='1' face='tahoma' class='hoje'>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write("-");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</FONT>");
// Fin Calendario del Balcón -->
</script></td></tr></tbody></table></center>
El resultado será este:
| [+/-] | Cómo poner códigos HTML en tu blog para que puedan ser copiados |
Si coges un código HTML/Javascript y lo pones en una entrada de tu blog para que tus lectores lo puedan copiar-pegar te darás cuenta que no podrá ser copiado por otro usuario si no lo has transformado previamente. Es como si el código se "activase" y no aparezca correctamente para poder ser leído y copiado correctamente.
Para poder transformarlo para que no se "active" en tu entrada debemos visitar blogcrowds.com.
Pulsamos en Parse y aparecemos en esta otra pantalla:
El código que nos aparece es el que tenemos que copiar y pegar en nuestra entrada o comentario para que aparezca correctamente y pueda ser leído y copiado correctamente.
| [+/-] | Cómo poner gadget de los comentaristas que más escriben en el blog |
Si buscamos un gadget que nos permita mostrar quiénes son los que más comentan en nuestro blog deberemos hacer los siguientes pasos:
1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript
5) Pegamos el siguiente código:
<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++) {
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FNOMBRE_DE_TU_BLOG.blogspot.com&num=10&filter=Anonymous,Anonimo,Nombre_autor" type="text/javascript"></script>
Tan sólo debemos cambiar NOMBRE_DE_TU_BLOG por la dirección de tu blog. 10 hace referencia a la cantidad de los usuarios que más comentan. Nombre_autor debemos sustituirlo por tu nick de blogger/google (con esto lograremos excluirnos de la lista como autor del blog).
Y ya está todo listo.
| [+/-] | Nube de entiquetas que se mueve en 3D para blog de blogger |
Si queremos que las etiquetas de nuestro blog estén en una nube de tres dimensiones en movimiento deberemos hacer lo siguiente:
1) Vamos a Diseño
2) Edición HTML
3) Buscamos <b:section class='sidebar' id='sidebar' preferred='yes'> (tecleamos Ctrl + F para buscar más rápido)
4) Una vez localizado pegaremos justo después el siguiente código:
<b:widget id='Label99' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Si queremos modificar el tamaño tan solo debemos cambiar el 250 y 200 por los valores que queramos.
Clicamos en vista previa y si todo está bien guardamos la plantilla.
Fuente: bloggerbuster.
| [+/-] | Guía SEO |
Gracias a Javier de vseo.es os traigo este estupendo esquema para tratar de comprender mejor el complejo y apasionante concepto de SEO y lo que debemos hacer para lograr un buen posicionamiento en los buscadores.
Descarga la guía pulsando aquí.
| [+/-] | Cómo poner un favicon en Blogger |
Si queremos que en nuestro blog o web no aparezca más el icono o favicon de Blogger y que en cambio aparezca nuestro propio favicon, deberemos hacer lo siguiente:
1) Vamos a la web de dynamicdrive y seguimos los siguientes pasos de la fotografía. Deberemos cargar la fotografía que queramos y esta web se encargará de darle el tamaño preciso y convertirla en formato .ico, que es el formato que necesitaremos.
2) Una vez tengamos guardado nuestro logo en formato .ico deberemos subirlo a un servidor que acepte este tipo de archivo. El icono debe llamarse favicon.ico
3) Si no tenemos un hosting propio para almacenar imagenes, visitaremos la web de psmc.free
Si deja de funcionar esa web puedes optar por subirlo a imageboo, que es otro hosting que permite subir archivos .ico
4) Seguimos los pasos de la siguiente foto:
5) Aparecemos en la siguiente pantalla y tan solo deberemos copiar el link que nos aparecerá en:
6) Ahora vamos a nuestro panel de blogger -> Diseño -> Edición HTML
7) Buscamos la parte de código* llamada <head> (tecleamos Ctrl + F para buscar más rápido)
8) Una vez localizado pegaremos después el siguiente código:
<link href='http://URLfavicon/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://URLfavicon/favicon.ico' rel='icon' type='image/x-icon'/>
En http://URLfavicon/favicon.ico deberemos colocar la URL que obtuvimos en el paso 5)
Clicamos en vista previa y si todo está bien guardamos la plantilla.
IMPORTANTE*: En algunas plantillas, si no funcionan los pasos anteriores, hay que pegar el código después de:
<b:include data='blog' name='all-head-content'/>
y en otra plantillas antes de <b:skin><![CDATA[/*
Cada plantilla es un mundo.
| [+/-] | Directorios y comunidades para tu blog (III) |
Aquí va otra excelente lista de directorios a los que podemos optar para dar de alta nuestro blog o web para así conseguir atraer más visitas a nuestro site.
IMPORTANTE: Recuerda no darte de alta en todos el mismo día, debe ser algo escalonado, sino google nos puede penalizar desterrándonos de su buscador.
http://www.dire.es
http://www.atomico.es
http://www.acicuecano.com
http://www.sitioswebz.com
http://www.aquiwebs.com
http://www.directorioshoy.com.ar
http://www.direnlaces.com
http://www.tusenlaces.net
http://www.flesko.es
http://www.diseo.es
http://www.enlaces-directorio.com
http://www.esdirectorio.com
http://www.adirweb.com
http://www.adirlink.com
http://directorio.boonic.com/
http://www.dondebuscar.net
http://www.yaaqui.com
http://www.deltiron.com
http://www.oho.es
http://www.abcdirectorio.com
http://www.indagando.com
http://www.directbati.com
http://www.portal-web.org
http://www.pergaminovirtual.com.ar
http://www.mundoenlaces.com
http://www.todopaginas.com
http://www.dircyt.com
http://www.directorio.compartimos.net/
http://www.cozelino.com?
http://www.todoenlaces.com
http://www.guiaway.com
http://www.clandelocio.com
http://www.directorioenlinea.com.mx
http://www.tuwebenlaweb.com
http://www.sangrefria.com
http://www.deyaboo.com
http://www.redcomser.com.ar
http://www.yatzoom.com
http://www.azunga.info
http://www.linksnativos.com
http://www.infodirectorio.info
http://www.hispasource.com
http://www.tagoror.com
http://www.ezilon.com
http://www.buscadorespanol.com
http://www.budiweb.com
http://www.eldirectoriode.com
http://www.webmastergratis.es
http://www.directorio-enlaces.com
http://www.chuffa.es/
Fuente: FunBuggy de rentabilizar-web.com
| [+/-] | ¿Tu blog es popular? |
Gracias a urlmetrix podemos saber si nuestro blog o web es popular en la red. Para ello analiza si nuestro blog está en los directorios, buscadores y redes más importantes.
| [+/-] | Videotutorial SEO (posicionamiento web) |
Vídeo especialmente práctico para aquellas personas que se acercan por primera al concepto SEO. Simple pero directo.
| [+/-] | Cómo poner artículos más populares (comentados) en blogger (I) |
Para poder poner un gadget con las entradas con más comentarios de nuestros lectores bloggers deberemos hacer lo siguiente:
1) Vamos bloggerbuster
2) Bajamos y nos encontraremos con:
4) Apareceremos en blogger en esta pantalla:
5) Pulsamos en Añadir artilugio y aparecemos en Elementos de página. Colocamos el gadget donde queramos y ya hemos terminado.
CLIC AQUÍ PARA ALTERNATIVA A ESTE GADGET.
| [+/-] | Actualización del editor de blogger: ahora con leer más |
Blogger ha mejorado, y ha mejorado considerablemente. Ahora incluye el famoso y necesitado leer más, la posibilidad de tachar textos, botón deshacer acción, entre otros...
Si queremos contar con estas nuevas posibilidades haremos lo siguiente:
1) En el panel de control de blogger vamos a Configuración
2) Básico
3) Abajo del todo veremos esto:
5) Guardamos la configuración
A parir de ese momento ya contamos con las nuevas mejoras de blogger y cada vez que vayamos a escribir una nueva entrada veremos esto:
| [+/-] | Cómo poner fotos más grandes en blog de blogger (I) |
En las entradas a la hora de adjuntas fotos nos dejan adjuntarlas como pequeñas, medianas o grandes. El problema es que el "grande" no es muy grande. Si quieres poner en tus entradas del blog las imágenes más grandes deberemos hacer lo siguiente:
Visitamos imageshack.us
1) Clicamos en Browse... para seleccionar la imagen que queremos cargar.
2) Una vez seleccionada pulsaremos en start upload!
3) Nos encontraremos con la siguiente pantalla:
4) Copiamos el link que pone "Thumbnail for Websites"
5) Lo pegamos en la entrada.
<a href="http://img406.imageshack.us/i/rata.jpg/" target="_blank"><img src="http://img406.imageshack.us/img406/1073/rata.th.jpg" border="0" alt="Free Image Hosting at www.ImageShack.us" /></a><br /><br /><a href="http://img604.imageshack.us/content.php?page=blogpost&files=img406/1073/rata.jpg" title="QuickPost"><img src="http://imageshack.us/img/butansn.png" alt="QuickPost" border="0"></a> Quickpost this image to Myspace, Digg, Facebook, and others!
El link de color rojo lo sustituiremos siguiendo estos pasos:
6) Pulsamos sobre la imagen como en la siguiente foto:
7) Apareceremos de nuevo en otra pantalla y con la imagen mas grande. Volvemos a pulsar en ella:
Y aparecemos en una ventana en la que ya solo aparece la imagen. Vamos a la barra de direcciones y copiamos el enlace que nos aparece:
Este enlace lo cambiaremos por el anterior que puse en rojo en el paso 5)
<a href="http://img406.imageshack.us/img406/1073/rata.jpg" target="_blank"><img src="http://img406.imageshack.us/img406/1073/rata.th.jpg" border="0" alt="Free Image Hosting at www.ImageShack.us" /></a><br /><br /><a href="http://img604.imageshack.us/content.php?page=blogpost&files=img406/1073/rata.jpg" title="QuickPost"><img src="http://imageshack.us/img/butansn.png" alt="QuickPost" border="0"></a> Quickpost this image to Myspace, Digg, Facebook, and others!
Ya hemos terminado. Mira la diferencia con este ejemplo:
Foto subida en blogger
Foto subida en imageshack siguiendo los pasos anteriores
Nota: Ten en cuenta las dimensiones de las entradas de tu blog. Si la imagen es más grande que el tamaño de la entrada (main-wrapper) quedará cortada tal y como está pasando en este ejemplo.
| [+/-] | Chuleta CSS para tu blog de blogger |
De mano de ateneupopular os traigo esta "chuleta" para aprender sobre CSS.
Clic para descargar la chuleta.
| [+/-] | Sube una imagen y averigua cuáles son los colores más compatibles para combinar |
Si buscas colores (en código) para tu blog, en colorhunter.com encontrarás todos los que quieras y más para poner en tu blog. Sube una imagen y sabrás qué colores son los más compatibles para combinar.
Otra página muy muy útil, ¿no crees?
| [+/-] | ¿Quieres saber quién enlaza tu blog? |
Muchas veces te preguntarás... ¿quién enlaza mi blog?
Gracias a backlinkwatch.com y tan solo insertando la dirección de tu blog o web podrás ver todos los enlaces que van hasta tu site. Además, te dirá el pagerank y el anchor text de los enlaces.
Herramienta tremendamente útil, ¿no crees?
| [+/-] | Como crear un icono o botón para que enlazen tu blog |
Si queremos crear un icono o botón para que puedan enlazar nuestro blog de blogger, deberemos hacer lo siguiente:
3) Aquí crearemos un icono como el de arriba dividio en dos partes. En el bloque de arriba vemos que pone "pixels from the... (0 to 80)" Si ponemos el valor 40, el icono que creemos estará igualado, es decir, left box y right box tendrán el mismo tamaño.
4) Modificar los valores a nuestro gusto y cuando esté listo le damos a create para ver el resultado final. Una vez finalizado le damos a save it! (a la derecha del logo creado). Nos aparecerá una ventana para guardarlo en nuestro PC. Si queremos podremos subirlo a imageshack.us directamente clicando en el enlace host to imageshack. Nos guardamos el link.
5) Ahora sólo queda crear una ventana o gadget para poder añadir un código HTML para que lo copien nuestros lectores y nos enlacen. Para ello hacemos lo siguiente: Vamos a Diseño -> Elementos de página -> Añadir un gadget -> HTML/Javascript.
6) Pegaremos el siguiente código:
<center><div class="widget-content">
<a href="http://www.TUBLOG.com/" target="_blank"><img width="80" alt="TU TEXTO" src="http://LINKDETUICONO.png" height="15"/></a>
<br/>
<textarea><a href="http://www.TUBLOG.com/" target="_blank"><br/><img width="80" alt="TU TEXTO" src="http://LINKDETUICONO.png" height="15"/></a></textarea></div>
</center>
Nota: Si te fijas en este código, al principio y al final poner "center". Es para que quede centrado este gadget. A mitad de código nos encontramos con br, es para crear un espacio. Se puede eliminar si se desea.
Pones tus datos y ya está listo.
| [+/-] | Crear un banner para blog de blogger |
Hace unos días recibí un correo en el formulario de contacto de parte de webcristianoronaldo en el que me pedía cómo crear un banner de publicidad. A parte de destinar este banner a publicidad, también podremos poner en él las fotos que queramos, de nuestras entradas o de página amigas, y que éstas vayan cambiando solas.
Comencemos:
1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> (tecleamos Ctrl + F para buscar más rápido).
4) Antes de </head> pegamos el siguiente código:
<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/xfade2.js' type='text/javascript'/>
5) Buscamos en nuestra plantilla ]]></b:skin>
6) Antes de ]]></b:skin> pegamos el siguiente código:
/* rotator
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
border: 0;
width: 430px;
height: 60px;
}
Para cambiar las dimensiones del banner, deberemos modificar width (largo) y height (ancho) por los valores que queramos.
7) Ahora sólo nos queda ir a Diseño -> Elementos de página y añadir un gadget en la zona de la plantilla que queramos. Añadiremos un gadget HTML/Javascript y en él copiaremos el siguiente código:
<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>
Sólo nos queda cambiar URL del enlace por el enlace al que queramos que se acceda cuando se clica en el banner.
En título podemos añadir el nombre de la web al que se accederá o una breve descripción del sitio.
En URL de la imagen añadiremos el enlace de la imagen que representará la puerta de enlace con la página que se va a acceder.
¡Todo listo!
Muchas gracias a ciudadblogger y a informatica-práctica.
| [+/-] | Cómo crear enlaces de texto y con imagen a otra web |
Para crear un enlace que vaya a una dirección URL (o link) debemos seguir esta estructura:
<a href="enlace a la web donde quieras ir"> titulo de la web</a>
Si quieres que en ese enlace aparezca una imagen debemos seguir esta estructura:
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
Si quieres que estos links hagan que no se abandone tu blog deberas añadir el siguiente codigo despues de la direccion a donde quieras ir:
<a href="enlace a la web donde quieras ir" target="_blank"> titulo de la web</a>
| [+/-] | Añadir lápiz para editar las entradas del blog en blogger |
Los que no usamos una plantilla clásica que nos ofrece de serie blogger, nos quedamos sin esta pequeña pero útil herramienta: editar las entradas sin tener que ir al panel de blogger.
Para volver a contar con el lápiz deberemos hacer lo siguiente:
1) Vamos a Diseño
2) Edición HTML
3) Marcamos la opción "expandir artilugios"
4) Buscamos <span class='quick-edit-icon'> </span> (tecleamos Ctrl + F para buscar más rápido)
5) Lo sustituimos por este otro código:
<img alt='' class='icon-action'
src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
6) Clicamos en vista previa y si no hay problemas guardamos la plantilla.
7) Ahora nos dirigimos a elementos de página.
8) En entradas del blog clicamos en editar y aparecemos en:
Nos aseguramos que esté marcada la opción de la fotografía y ya habremos terminado.
Suscribirse a:
Entradas (Atom)
