» » Cómo hacer un Mapa del sitio con 2 Columna y Páginas de Navegación

Cómo hacer un Mapa del sitio con 2 Columna y Páginas de Navegación



Como ya mencione Un Indice, Tabla de Contenidos o Sitemap (mapa del sitio) es una pagina, que hará el blog se vea más organizado donde podemos mostrar el contenido de nuestro blog.



Para añadir este estilo solo tienen que hacer lo siguiente.

►En primer lugar entrar Blogger.
►Ir a nuestro blog
►Ir a Página.
►Crean una nueva Página.
►Desactivan los comentarios.
►Seleccione el modo HTML
►Pegan el siguiente código

<style scoped="" type="text/css">
#toc-outer {
color:black;
font:normal 11px/14px Arial,Sans-Serif;
height:auto;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:left;
}
#loadingscript {
padding:0px 0px;
height:37px;
text-indent:-9999px;
color:transparent;
background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2Uk40XGqVWOLBPdvytVtY-7d3Z48nhSxAEWshmNhVX79HKfPKS5bCuGaHuSnnER2pxKGXse6RAD_ubn5W7C3xe-PBybmFXJkfKXctWwPX9xPtb0VEQ_EjG1dsulL_VVXudnbLuW2nuc/h120/descarga.gif') no-repeat 50% 50%; }
.itemposts {
 float: left;
height: auto;
overflow: hidden;
width: 47%;
box-shadow: 1px 1px 5px #C3C3C3;
background: none repeat scroll 0% 0% #F9F9F9;
border: 1px solid #FFF;
margin: 3px 5px 8px;
 padding: 0px 3px;
}
.itemposts h6 {
 border-bottom: 1px solid #CCC; c
olor: #333;
font: bold 12px Arial;
height: 15px;
overflow: hidden;
text-transform: none;
margin: 0px 0px 5px;
padding: 2px 6px !important;
}
.itemposts h6 a:hover {
color:#38f;
text-decoration:none;
}
.itemposts img {
background-color:#fff;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
float:left;
height:65px;
 margin:0 7px 5px 0;
padding:3px;
width:65px;
z-indent:99999px;
 }
 .itemposts .iteminside {} .itemposts .itemfoot {
 border-top: 1px solid #CCC;
clear: both;
overflow: hidden;
padding: 4px 5px;
 }
.itemposts .itemfoot a.itemrmore {
 color:#333;
float:right;
font-weight:bold;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
text-decoration:underline}
 #itempager {
clear:both;
padding:10px 0;
 }
#pagination, #totalposts {
color:#000;
display:block;
font:bold 10px Verdana,Arial,Sans-Serif;
margin-bottom:10px;
text-align:center;
padding:0;
 }
#pagination span, #pagination a {
color: #FFF;
display: inline;
margin: 0px 1px;
padding: 2px 5px;
text-indent: 0px;
background-color: #068BC9;
border: 1px solid #3161C2;
text-decoration: none;
border-radius: 1px;
 }
 #pagination a:hover {
background-color:#333}
#pagination span.actual {
background-color:black}
#pagination span.hidden {
display:none}
</style>
<script>
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "JQuery",
loadingText = "Cargando...",
totalPostLabel = "Número de Entradas:",
jumpPageLabel = "Página",
commentsLabel = "Comentarios",
rmoreText = "Leer más &#9658;",
prevText = "Anterior",
nextText = "Siguiente",
siteUrl = "http://Nombre.blogspot.com",
postPerPage = 10,
numChars = 150,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj443eki-oVm5XXF7mMjPHzW9HVUC1drIzCkvwYwvUxDzapfW_eL7nl5weIXa60jcfKq2NyTukU41gcW60RqBvEzGy_CHd45kWH8U1_7g2UKI-dQ0sEFPaTFd6nKVDLFPV5qjho1t1OCqg/s1600/No-imagen.jpg";
</script>
<script src="https://sites.google.com/site/cambiocambieblogger/home/MapaDelSitio2Columnas.js"></script>

Demo



  • Lo que esta en Naranja se puede cambiar por false para que los datos no aparezcan publicados.
  • Las palabras que están resaltadas con Verde pueden ser cambiadas.
  • Donde esta marcado con color Rojo poner la Dirección del Blog. 




Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top