Crear una tabla de contenidos (Etiquetas) en Blogger con unos simples pasos | por Luis Chavez

 Aprender como crear una tabla de contenidos en Blogger con unos simples paso

Blogger sigue realizando algunos cambios importantes en su plataforma web, como diseñador web veo las cosas aun más fáciles y divertidas al momento de crear Plantillas, gadgets entre un sin fin de trucos para Blogger.

   

En este post aprenderán a crear una tabla de contenido con unos simples pasos, solo debe seguir las instrucciones de este tutorial. La tabla de contenido o mapa del sitio puede ubicarlo en una entrada o en una pagina de Blogger.

Luis Chavez autor de este post

A continuación puede ver su demostración en el siguiente blog de demos

DemoClic aquí

Aprende ¿Cómo crear una tabla de contenido o SITEMAP en Blogger?

Instrucciones

1.- Abrir Blogger.com

2.- Un clic en Páginas

3.- Un clic en Nueva Página

4.- Active la casilla en Modo HTML

5.- Inserte el siguiente código

<div class="tabla-contenidos">

  <div class="text-tabla">

  Bienvenidos al mapa del sitio web, gracias por visitarnos..   

  </div>

<div id="tabla-cont"><span class="loading">Cargando...</span></div></div>

<script type="text/javascript">

var tabbedTOC = {

    blogUrl: "https://tema-g.blogspot.com/", // Dirección de su Blog URL

    containerId: "tabla-cont",

    activeTab: 1, 

    showDates: false, 

    showSummaries: false,

    numChars: 200, 

    showThumbnails: false, 

    thumbSize: 40, 

    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", 

    monthNames: [ 

        "Enero",

        "Febrero",

        "Marzo",

        "Abril",

        "Mayo",

        "Junio",

        "Julio",

        "Agosto",

        "Septiembre",

        "Octubre",

        "Noviembre",

        "Diciembre"

    ],

    newTabLink: true, 

    maxResults: 99999, 

    preload: 0, 

    sortAlphabetically: true, 

    showNew: 7, 

    newText: " - <em style='color:blue;'>Nuevo!</em>" 

};

</script>

<script type="text/javascript" src="https://cdn.statically.io/gh/Ayudadeblogger/tabla-contenido/main/tabla-cont.js"></script>

<style>

  .tabla-contenidos {

    background-color: #f9bb2d;;

    max-width: 100%;

    border-radius: 12px;

    padding: 16px 24px;

    position: relative;

}

  .text-tabla {

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    letter-spacing: -.5px;

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    font-family: Google Sans,arial,sans-serif;

    letter-spacing: .1px;

    -webkit-text-size-adjust: 100%;

    -moz-text-size-adjust: 100%;

    -ms-text-size-adjust: 100%;

    text-size-adjust: 100%;

    -webkit-overflow-scrolling: touch;

    margin-bottom: 20px;

    text-align: center;

}

  #tabla-cont {

  margin:0 auto;

  background-color:#fff;

  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);

  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);

  box-shadow:0 1px 3px rgba(0,0,0,.4);

  overflow:hidden;

  position:relative;

  color:#333;

    padding: 14px;

    border-radius: 8px;

}

#tabla-cont .loading {

  display:block;

  padding:5px 10px;

  font:normal bold 10px Arial,Sans-Serif;

  color:white;

}

#tabla-cont ul,

#tabla-cont ol,

#tabla-cont li {

  margin:0 0;

  padding:0 0;

  list-style:none;

}

#tabla-cont .toc-tabs {

  width:30%;

  float:left;

}

#tabla-cont .toc-tabs li a {

  display:block;

  font:normal bold 12px/28px Arial,Sans-Serif;

  overflow:hidden;

  text-overflow:ellipsis;

  color:#222;

  text-transform:uppercase;

  text-decoration:none;

  padding:0 12px;

  cursor:pointer;

}

#tabla-cont .toc-tabs li a:hover {

  background-color:#3f51b5;

  color:white;

}

#tabla-cont .toc-tabs li a.active-tab {

  background-color:#3f51b5;

  color:white;

  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);

  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);

  box-shadow:-2px 2px 2px rgba(0,0,0,.5);

  position:relative;

  z-index:5;

  margin:0 -1px 0 0;

  border-bottom: 4px solid #000;

}

#tabla-cont .toc-content,

#tabla-cont .divider-layer {

  width:70%;

  float:right;

  background-color:white;

  border-left:5px solid #3f51b5;

  -webkit-box-sizing:border-box;

  -moz-box-sizing:border-box;

  box-sizing:border-box;

}

#tabla-cont .divider-layer {

  float:none;

  display:block;

  position:absolute;

  top:0;

  right:0;

  bottom:0;

  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);

  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);

  box-shadow:0 0 7px rgba(0,0,0,.7);

}

#tabla-cont .panel {

  position:relative;

  z-index:5;

  font:normal normal 10px Arial,Sans-Serif;

}

#tabla-cont .panel li a {

    display: block;

    position: relative;

    font-weight: bold;

    font-size: 12px;

    text-decoration: none;

    outline: none;

    overflow: hidden;

    padding: 17px;

    color: #222;

}

#tabla-cont .panel li time {

  display:block;

  font-style:italic;

  font-weight:normal;

  font-size:10px;

  color:#666;

  float:right;

}

#tabla-cont .panel li .summary {

  display:block;

  padding:10px 12px 10px;

  font-style:italic;

  border-bottom:4px solid #3f51b5;

  overflow:hidden;

}

#tabla-cont .panel li .summary img.thumbnail {

  float:left;

  display:block;

  margin:0 8px 0 0;

  padding:4px 4px;

  width:72px;

  height:72px;

  border:1px solid #dcdcdc;

  background-color:#fafafa;

}

#tabla-cont .panel li:nth-child(even) {

}

#tabla-cont .panel li a:hover,

#tabla-cont .panel li a:focus,

#tabla-cont .panel li a:hover time,

#tabla-cont .panel li.bold a {

box-shadow: 5px 5px 25px 0px rgb(46 61 73 / 20%);

    border-radius: 0.375rem;

    transition: all 0.3s ease;

  outline:none;

}

#tabla-cont .panel li.bold a:hover,

#tabla-cont .panel li.bold a:hover time {

  background-color:#222;

}

@media (max-width:700px) {

  #tabla-cont .toc-tabs,

  #tabla-cont .toc-content {

    float:left;

    width:100%;

    display:block;

  }

  #tabla-cont .toc-tabs li {

    display:inline;

    float:left;

  }

  #tabla-cont .toc-content {

    border:none;

  }

  #tabla-cont .divider-layer,

  #tabla-cont .panel li time {

    display:none;

  }

}

  </style>

6.- Realice los siguiente cambios:

Elimine la dirección URL que esta marcado de color naranja, remplace por la dirección URL de su blog de Blogger

https://tema-g.blogspot.com/

7.- Eso es todo, un clic en Publicar

Es momento de visitar su nueva pagina de tabla de contenidos de su blog de Blogger

¿Necesitas ayuda? La encontrarás en el blog de Luis Chavez autor de este post

Read more...

Widget entradas recientes estilo Material design | por Luis Chavez

En este nuevo tutorial de Ayudadeblogger aprenderán a insertar un widget el cual mostrara las entradas recientes de su blog de Blogger con un estilo único como lo es Material design de Google, la inserción del código es muy simple de realizarlo.

Luis Chavez autor de este post

¿Qué cambios tendré que realizar?

Lo que vamos hacer es ingresar un código en un widget HTML/javascript, luego tendrá que cambiar la dirección URL por la dirección URL de su blog de Blogger.

Además podrá aumentar o disminuir el número de entradas recientes que quiera mostrara, este widget de entradas recientes tiene tres botones, los cuales sirve para ir hacia atrás, hacia adelante y un botón de inicio para regresar a sus primeras publicaciones.

A continuación pueden ver su demostración en el siguiente blog, el widget de entradas recientes estilo Material design, está ubicado en el sidebar

DemoClic aquí

Video tutorial

Empezamos

1 Ir a Blogger.com

2 Un clic en Diseño

3 Un clic en Añadir un gadget

4 Busca el widget que dice HTML/Javscript, ábrelo

5 Ingrese las siguientes líneas de código

<style type='text/css'>
 #grupodelecluse-code{border:1px solid #585858;width:100%;margin:0 auto;}
 #ayudadeblogger{margin:0px; padding: 3px 2px 3px 2px !important;}
 .adb-card{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
 .adb-card img{background:#3f51b5;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border-radius: 100%;}
 .adb-card h6,.adb-card h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
 .adb-card:hover{background-color:#c3c3c3}
 .adb-card p{font:14px;text-align:justify;color:#000000;line-height:14px;margin:5px 0}
 #adb-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#e91e63 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQZkz2RKOWslGxMZQrQBu2XYy3xF0ldJtadU5Xy3fG5wmLHLTzhVnQzajv4BtYjDFofGW4163Pgd7IJ4Lu4AmiJ60eRQo2fiA_0Qk3kdyqKXIw2iqvxVo-Z32VV2MHpRL_qodgncEZLQ/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
 #cajanavegacion{border:0px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);}
 #cajanavegacion:hover{box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);}
 #cajanavegacion a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:12px 10px}
 #cajanavegacion span{padding:12px 10px}
 #cajanavegacion .next{float:right; border-radius: 0px;
 background: #dc033d; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);}
 #cajanavegacion .previous{float:left;border-radius: 0px;
 background: #dc033d; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);}
 #cajanavegacion .home{text-align:center; background: teal; font-size: 24px !important; box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);}
 #cajanavegacion a:hover,#cajanavegacion span.noactived{color:transparant!important}
 .adb-card img, .adb-card {
 box-shadow: 0 3px 10px rgba(0,0,0,.23), 0 3px 10px rgba(0,0,0,.16);
 }
 .adb-card img:hover, .adb-card:hover {
 box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
 }
 .previous:hover, .next:hover{
 box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
 }
 .card {
 position: relative;
 margin: 0.5rem 0 1rem 0;
 background-color: #fff;
 transition: box-shadow .25s;
 border-radius: 2px;
 background:#EEEEEE;
 padding: 5px 7px 5px 6px !important;
 }
 .card {
 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
 }
 .card:hover{box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);}
 </style>
 <script type='text/javascript'>
 //<![CDATA[
 var numfeed = 9;
 var startfeed = 0;
 var urlblog = "http://www.ecuador-turistico.com/";
 var charac = 60;
 var urlprevious, urlnext;
 function ayudadebloggerfeed(adbwidget,adbgroup){
 var showfeed = adbwidget.split("<");
 for(var i=0;i<showfeed.length;i++){
 if(showfeed[i].indexOf(">")!=-1){
 showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
 }
 }
 showfeed = showfeed.join("");
 showfeed = showfeed.substring(0,adbgroup-1);
 return showfeed;
 }
 function adbayudadeblogger(json) {
 var entry, posttitle, posturl, postimg, postcontent;
 var showblogfeed = "";
 urlprevious = "";
 urlnext = "";
 for (var k = 0; k < json.feed.link.length; k++) {
 if (json.feed.link[k].rel == 'previous') {
 urlprevious = json.feed.link[k].href;
 }
 if (json.feed.link[k].rel == 'next') {
 urlnext = json.feed.link[k].href;
 }
 }
 for (var i = 0; i < numfeed; i++) {
 if (i == json.feed.entry.length) { break; }
 entry = json.feed.entry[i];
 posttitle = entry.title.$t;
 for (var k = 0; k < entry.link.length; k++) {
 if (entry.link[k].rel == 'alternate') {
 posturl = entry.link[k].href;
 break;
 }
 }
 if ("content" in entry) {
 postcontent = entry.content.$t;
 } else if ("summary" in entry) {
 postcontent = entry.summary.$t;
 } else {
 postcontent = "";
 }
 if ("media$thumbnail" in entry) {
 postimg = entry.media$thumbnail.url;
 } else {
 postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhExlEspeJktjrGjhP6zTodfcj2DaZ5lItAoAQdqLbUxs_qRY7pHUzdFWJ-7-OIXu_lf6azUvQNfgfZHXaY3tyMg9uD8vnTuQpjQaI9Inhb7OGPQ8Id0Mht1eQvMRkjClRCDozkvXLpm0/s1600/no+image.jpg";
 }
 showblogfeed += "<div class='adb-card'>";
 showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
 showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
 showblogfeed += "<p>" + ayudadebloggerfeed(postcontent,charac) + "...</p>";
 showblogfeed += "</div>";
 }
 document.getElementById("ayudadeblogger").innerHTML = showblogfeed;
 showblogfeed = "";
 if(urlprevious) {
 showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668;</a>";
 } else {
 showblogfeed += "<span class='noactived previous'>&#9668; </span>";
 }
 if(urlnext) {
 showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>&#9658;</a>";
 } else {
 showblogfeed += "<span class='noactived next'>&#9658;</span>";
 }
 showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>&#x1f3e0;</a>";
 document.getElementById("cajanavegacion").innerHTML = showblogfeed;
 }
 function navigasifeed(url){
 var p, parameter;
 if(url==-1) {
 p = urlprevious.indexOf("?");
 parameter = urlprevious.substring(p);
 } else if (url==1) {
 p = urlnext.indexOf("?");
 parameter = urlnext.substring(p);
 } else {
 parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
 }
 parameter += "&callback=adbayudadeblogger";
 incluirscript(parameter);
 }
 function incluirscript(parameter) {
 if(startfeed==1) {removerscript();}
 document.getElementById("ayudadeblogger").innerHTML = "<div id='adb-loading'></div>";
 document.getElementById("cajanavegacion").innerHTML = "";
 var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
 var ayudadeblogger = document.createElement('script');
 ayudadeblogger.setAttribute('type', 'text/javascript');
 ayudadeblogger.setAttribute('src', archievefeed);
 ayudadeblogger.setAttribute('id', 'MASLABEL');
 document.getElementsByTagName('head')[0].appendChild(ayudadeblogger);
 startfeed = 1;
 }
 function removerscript() {
 var elemen = document.getElementById("MASLABEL");
 var parent = elemen.parentNode;
 parent.removeChild(elemen);
 }
 onload=function() { navigasifeed(0); }
 //]]>
 </script>
 <div class="card">
 <div class="container-fluid" style="background-color:#F44336;color:#fff;height:40px; box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);"></div>
 <div id="ayudadeblogger"></div>
 <div id="cajanavegacion"></div></div>
 <!--End ayudadeblogger.com--> 

Realiza este cambio:

Elimina la dirección URL que está marcada de color azul, remplázalo por la dirección URL de su blog de Blogger

Aumentar o disminuir las entradas recientes:

Encuentre la siguiente línea de código

var numfeed = 9;

Cambie el número 9 por otro número

6 Un clic en Guardar

Eso es todo, ahora ubique su widget de entradas recientes estilo Material design en el sidebar de su blog

¡Fácil verdad!

¿Necesitas ayuda? La encontrarás en el blog de Luis Chavez autor de este post

https://www.ayudadeblogger.com/2017/02/widget-entradas-recientes-estilo-material-design.html

Read more...

Gadget de Etiquetas en un Scroll Box

Este truco es perfecto para cuando tienes un gran número de etiquetas pero no quieres que se oculten como se hace con el truco del menú desplegable que deja oculta todas las etiquetas hasta que el lector desglose el gadget; en cambio aquí dejarás siempre visible las etiquetas y te ahorrarás buen espacio.

Para agregar este truco a tu blog primero debes tener añadido el gadget de etiquetas.

Luego ir a Tema, Editar HTML y justo arriba de:
]]></b:skin>

pega lo siguiente:
#Label1 .widget-content{height:200px; width:auto;overflow:auto;}

Guarda los cambios y listo.

Cobi 4/08/2021

https://milyunacosasutiles.blogspot.com/2020/11/gadget-de-etiquetas-en-un-scroll-box.html

Read more...

Gadget de etiquetas con dos columnas

Siguiendo con el tema para principiantes de las etiquetas, hoy vamos a ver un sencillo script que he visto ya por varios blogs para poner el gadget de etiquetas en dos columnas. Este truco le será muy útil a aquellos que tengan muchas etiquetas y se les convierta el Gadget en una lista lateral demasiado larga.

Aquí tenemos el script que deberemos insertar antes de ]]></b:skin> en la edición de HTML:

#Label1 ul li{
float: left;
width: 45%;
}

Hacemos click en "vista previa" para asegurarnos de que todo ha ido bien y guardamos. Voilá! Ya lo tenemos todo hecho!

A mi gusto, me parecía que el tamaño de letra era demasiado pequeño así que hice una pequeña modificación para aumentarla un poco:

#Label1 ul li{
font-size:20px;
float: left;
width: 45%;
}

Solo deberemos cambiar el número en azul por el tamaño de fuente deseada.

http://medioblogger.blogspot.com/2012/05/gadget-de-etiquetas-con-dos-columnas.html

Read more...

Dividir el crosscol del blog

2 títulos "Lo mismo de dos formas diferentes"

• 1.- Dividir el crosscol del blog
• 2.- Añadir Gadgets entre el header y las entradas (crosscol) (al final)

Título 1
Dividir el crosscol del blog

El crosscol es esa área debajo de la cabecera en la que la mayoría de las veces añadimos un menú horizontal, aunque muchas otras veces queremos que nos rinda más ese espacio para añadir más gadgets y la mejor forma de hacerlo es dividir el crosscol del blog para que pueden entrar más gadgets en una fila, es decir, que si originalmente se ve así:

Con las respectivas divisiones pueda verse así:

Empecemos, lo primero es entrar en Diseño | Elementos de la página y cerciorarse que no haya ningún gadget en esa área, si tienes alguno lo mejor es moverlo a la sidebar u otro lugar momentáneamente, ya después podrás ponerlo de nuevo ahí, sólo tienes que arrastrarlo y soltarlo en el lugar donde lo quieras mover.

Ya que está libre esa área entonces vamos a Diseño | Edición de HTML y SIN expandir los artilugios busca este código:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca este código:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes' />
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

Cualquiera de esos códigos que tengas elimínalo y en su lugar pon este:

<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>

<div id='crosscol0' style='text-align: center; padding: 5px;'>
<b:section class='tabs' id='crosscol-superior' preferred='yes'/>
</div>

<div id='crosscol1' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol2' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol3' style='width: 33%; float: right; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>

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

Guarda los cambios y listo, puedes ingresar a Elementos de la Página y ya podrás ver tu crosscol dividido en tres partes.
Si quisieras que sólo estuviera dividido en dos y no en tres partes entonces elimina el código en color gris, y cambia los 33% que están a los lados por 49%
Fácil y rápido ¿no?

9 de mayo de 2011 Publicado por El Potro

Título 2

Añadir Gadgets entre el header y las entradas (crosscol)

Existe una seccion de Blogger, que no es utilizada por el mismo blogger, y por ende por CASI nadie. La sección se llama crosscol, lo mejor es que esta, esta ubicada por debajo del header y de las entradas.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1]Lo que hay que hacer para poder utilizarla es entrar en Diseño>Edicion HTML>Expandir las plantillas de artilugios. y despues buscamos este codigo:

<div id='crosscol-wrapper' style='text-align:center'>
  <b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

[2]Cambias la palabra en rojo(no) por yes, despues guardas los cambios y listo.

[3]Pero también puedes dividirla en tres columnas, pero para esto necesitas sustituir el código anterior:

<div id='crosscol-wrapper' style='text-align:center'>
  <b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

por este otro:

<div id='crosscol-wrapper'>
  <div style='clear:both;'/>
  <div id='crosscol-contenedor'>
    <div id='crosscol-left'>
      <b:section class='crosscol' id='crosscol1' preferred='yes' style='float:left;'/>
    </div>
    <div id='crosscol-center'>
      <b:section class='crosscol' id='crosscol2' preferred='yes' style='float:left;'/>
    </div>
    <div id='crosscol-right'>
      <b:section class='crosscol' id='crosscol3' preferred='yes' style='float:right;'/>
    </div>
  <div style='clear:both;'/>
  </div>
</div>

[4]Despues tienes que añadir antes de ]]></b:skin> el siguiente código CSS:

#crosscol-wrapper {
text-align:center
}
#crosscol-left {
width: 30%;
float: left;
margin:0;
text-align: center;
}
#crosscol-center {
width: 40%;
float: left;
margin:0;
text-align: center;
}
#crosscol-right {
width: 30%;
float: right;
margin:0;
text-align: center;
}
#crosscol-contenedor {
clear:both;
}
.crosscol {
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
.crosscol-columna {
padding: 10px;
}

[5]Y guardas los cambios:

http://santyweb.blogspot.com/2009/02/anadir-gadgets-entre-el-header-y-las.html

Read more...

Caja muy simple para escribir algo importante o para recomendar algo

Una caja muy simple en la que se puede poner el código en una entrada, para escribir algo importante o para recomendar algo en una entrada.

Escribir el siguiente código en el HTML de la entrada

<form>
<textarea rows="5" cols="50" >
AQUI VA TU TEXTO
</textarea>
</form>

rows="5" la altura de la caja.
cols="50" ancho de la caja.

=====================================
EJEMPLO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec ligula a augue dictum facilisis. Proin eget tellus sed ipsum aliquam lobortis quis vitae quam. Sed lacinia metus erat, sit amet pellentesque tellus tempor sit amet. Donec vulputate eleifend orci, et dapibus sem. Proin orci velit, luctus a vehicula et, tincidunt ac mauris. Donec molestie pharetra nibh a pellentesque. Vivamus vitae varius nisi. Suspendisse id ligula consectetur, cursus lacus non, commodo purus. Curabitur semper sagittis tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus

http://bloggersinescalones.blogspot.com/2015/02/caja-de-texto-o-textarea_1.html

Read more...

Menu vertical giratorio con CSS

Para poner este menú vertical en tu blog solo tienes que copiar el código y pegarlo en un Gadget HTML/JavaScript

<style>
#bsemenu{
padding: 0;
list-style-type: none;
margin: 0 0px 0px 0;
text-transform: uppercase;
}
#bsemenu li {
display: inline;
}
#bsemenu li a {
display:block;
color:#000;
font-size:12px;
line-height:20px;
text-align:center;
text-decoration:none;
width:80px;
height:20px;
background: #ccc;
padding: 13px;
margin:0;
border: 2px solid #000;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}
#bsemenu li a:hover {
background: #eee;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;
}</style>
<ul id="bsemenu">
<li><a href="URL">Inicio</a></li>
<li><a href="URL">Acerca de</a></li>
<li><a href="URL">Indice</a></li>
<li><a href="URL">Contacto</a></li>
</ul>

http://bloggersinescalones.blogspot.com/2015/02/menu-vertical-giratorio-con-css_5.html

Read more...

Dividir la cabecera del blog 2

Dividir la cabecera del blog sirve para poder poner al lado del título del blog algún gadget como un anuncio, algún banner, un buscador, etc.

Para las plantillas hechas con el Diseñador de plantillas de Blogger:



Primero entra en Diseño | Edición de HTML y SIN expandir los artilugios busca esta parte:

/* Header

Debajo de ella pega lo siguiente:

.header {
width:48%;
float: left;
margin:0 auto 1%;
}
.header2 {
width:47%;
float: right;
margin:0 auto 1%;
}

Ahora busca el siguiente código y agrega lo que está en color rojo:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/></div>

Guarda los cambios y listo.

Ahora puedes ir a Diseño ► Elementos de la página y podrás ver la cabecera dividida en dos partes.

NOTA:

No puedo dividir mi cabecera
PUEDE OCURRIR QUE: ahora bien, supongo que a lo que se refiere es que después de esto:

<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>

usted tiene esto: <b:includable> y no esto: </b:section>

Pues bien, en realidad no es así, si nota la diferencia le he agregado con color rojo dos líneas arriba, hay una linea diagonal de cierre en el ejemplo que muestra y en su plantilla no... para encontrar el </b:section> le muestro esquemáticamente como podría verse su plantilla:

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

<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'>

<b:includable id='main'> Mucho mucho codigo aqui </b:includable>

<b:includable id='description'> Mucho mucho codigo aqui </b:includable>

 <b:includable id='title'> Mucho mucho codigo aqui </b:includable>

 </b:widget>

</b:section>    <<<============= aquí se encuentra el </b:section>

http://bloggersinescalones.blogspot.com/2015/01/dividir-la-cabecera-del-blog-2.html

Read more...

Expandir y contraer gadgets con jQuery

Hace ya algún tiempo vimos cómo expandir y contraer gadgets usando Scriptaculous y Prototype, es un método que funciona bien, pero hay quienes usan jQuery y no quieren cargar más librerías en su blog, así que en esta entrada veremos cómo conseguir el mismo resultado pero usando jQuery.

Expandir y contraer gadgets puede servir a quienes tienen muchos gadgets y quieren que la sidebar se vea más despejada mostrando sólo los títulos de los gadgets, y mostrando el contenido sólo cuando el usuario quiera verlo. Puedes ver un ejemplo en este blog de pruebas, al dar click sobre el título del gadget éste se expandirá.

Para poner estos gadgets expandibles sólo necesitas jQuery, si aún no lo tienes entra en Plantilla | Edición de HTML, y después de <head> agrega esta línea:

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

Y ahora, para aplicar el efecto expandible -y deslizante- a algún gadget, localiza en la Edición de HTML el gadget al que se lo quieres aplicar. Por ejemplo, un gadget del tipo HTML/Javascript sería así:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
&#9660;&#9650;
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>

<data:content/>

</div>
<script>$(document).ready(function(){$(&#39;#expandirGadget1&#39;).click(function(){$(&#39;.expandir1&#39;).slideToggle(&quot;slow&quot;)})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Agrega lo que está en color rojo, y listo.

Para guiarte dónde poner los códigos:

El primer código en rojo va alrededor de la etiqueta <data:title/>
La otra parte en rojo va después de <div class='widget-content'>
Y la última va antes de

</div>

<b:include name='quickedit'/>

Nota que en color azul verás un ID y una clase, ambos aparecen dos veces. Si pusieras otro gadget expandible deberás cambiar tanto los IDs como las clases, por ejemplo expandirGadget2 y expandir2

En el primer fragmento que añadimos verás que aparecen estos caracteres: &#9660;&#9650;
Esas son las flechas de arriba y abajo ▼▲ puedes cambiarlo por otro caracter, otro texto, o incluso por una imagen:

<img src='URL de la imagen' border='0' width='14px'/>

El código de ejemplo es para los gadgets HTML/Javascript, pero se puede aplicar a cualquier otro, sólo basta con identificar la etiqueta <data:title/> del gadget (que es donde va el primer código), y el contenido del gadget (que es donde va el segundo código).

Quizá deba aclarar que esto no hace que el blog cargue más rápido ya que el contenido se sigue cargando aun cuando esté oculto para el usuario. Es únicamente para mostrar menos espacio en la sidebar ya que algunas veces tenemos gadgets que ocupan demasiado espacio y esta es una buena manera de mostrar el blog más prolijo.

http://www.ciudadblogger.com/2014/05/expandir-y-contraer-gadgets-con-jquery.html

Read more...