"Estimado visitante... He querido compartir contigo en este blog, lo que para mi en alguna ocasión me ha sido muy útil. A todos los bloggers que han contribuido a enriquecer mi experiencia y conocimiento como blogger, "muchas gracias"

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

Aprender como crear una tabla de contenidos en Blogger con unos simples pasos
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


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


Instrucciones

1.- Abrir Blogger.com

2.- Un clic en Páginas

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



3.- Un clic en Nueva Página

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

4.- Active la casilla en Modo HTML

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

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...
, 0 comments
Labels: , , , , ,

Widget entradas recientes estilo Material design | por Luis Chavez

Widget entradas recientes estilo Material design
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

Video tutorial


Empezamos

1 Ir a Blogger.com

2 Un clic en Diseño

Widget entradas recientes estilo Material design

3 Un clic en Añadir un gadget

Widget entradas recientes estilo Material design

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

Widget entradas recientes estilo Material design

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

Widget entradas recientes estilo Material design

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...
, 0 comments
Labels: , , , ,
Suscribirse a: Entradas (Atom)
"Estimado visitante... He querido compartir contigo en este blog, lo que para mi en alguna ocasión me ha sido muy útil. A todos los bloggers que han contribuido a enriquecer mi experiencia y conocimiento como blogger, "muchas gracias"

  © Link Web Blog Links Bloggers by Facebook LWB 2012

Back to TOP- Volver al principio - pulsa para SUBIR