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

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

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: Trucos http://www.ciudadblogger.com/2011/05/dividir-el-crosscoll-del-blog.html

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: De tres columnas

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

Cómo añadir widgets extra en el header de Blogger

Este tutorial sencillo nos brinda una forma rápida y sencilla para añadir widgets extras a la sección del header en Blogger, lo cual nos ayudará maximizar el espacio.

El procedimiento es el siguiente:

Ingresar a Blogger.com
Ir a Dasboard (Panel de control)
Hacer click en Template y luego en Proceed.
Localizar <b:section class=’header’
Cambiar maxwidgets=’1′ al máximo número de widgets que deseamos incluir en el header.
Modificar showaddelement=’no’> a showaddelement=’yes’>.
Salvar la plantilla.
Ir a Blogger Layout.
Ir a Header, seguidamente a Add a Gadget. Ahora podemos añadir widgets extra al área del header para aumentar su funcionalidad.

Como podemos ver, el truco es realmente sencillo.

https://internetrcc.com/2012/11/anadir-widgets-extra-header-blogger/

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

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

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

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

Páginas

Herramientas para un Blogger

Links

Selección Blogger

BlogandWeb

▼▲ Trucos

Enlaces

Software libre

Útiles Google

Otros

TRUEQUES VIRTUALES

Tipografías

Afiliaciones

Fuentes y Créditos

BLOGROLL

Autores

Herramientas para conocer keywords

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

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

Widget entradas recientes estilo Material design | por Luis Chavez

Dividir el crosscol del blog

Cómo añadir widgets extra en el header de Blogger

Caja muy simple para escribir algo importante o para recomendar algo

Menu vertical giratorio con CSS

Dividir la cabecera del blog 2

Escribe palabra o frase a buscar

Archivo del blog

Herramientas para un Blogger

Etiquetas J - Z

Etiquetas A - I

Entradas populares

Web amigas

Herramientas para medir el tiempo de carga y conocer que problemas debes solucionar