En el siguiente ejemplo tendremos la posibilidad de:
Ordenar alfabéticamente por Categorías.
Ordenar alfabéticamente por Título.
Ordenar por Fecha de publicación.
Mostrar la fecha de publicación.
Definir el texto o marca que aparece en los últimos artículos.
Ejm: New!!
Determinar el número de artículos a los que poner la marca.
Lo primero que hacemos es acceder al panel de control de Blogger y nos situamos sobre la opción Páginas del menú de la parte izquierda
A continuación hacemos clic sobre el botón Página nueva
En el campo con el texto Título de la página escribimos Indice y en el área de escritura de mayor tamaño introducimos el siguiente código:
<div id="all-post" class="all-post"></div>
<script>
var conf = {
sortBy: 'orderlabel', // forma en que se muestran las artículos publicados
lastPost: 10, // últimos post (10) a los que les pongo una marca
date: 1, // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
newPost: 'Nuevo!!', // texto o marca que aparece en los últimos artículos
newtab: 1 // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js"></script>
<script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script>
var conf = {
sortBy: 'orderlabel', // forma en que se muestran las artículos publicados
lastPost: 10, // últimos post (10) a los que les pongo una marca
date: 1, // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
newPost: 'Nuevo!!', // texto o marca que aparece en los últimos artículos
newtab: 1 // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js"></script>
<script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Vamos a analizar los parámetros de configuración:
sortBy puede tomar los siguientes valores:
orderlabel: ordena alfabéticamente por Categorías
titleasc: ordena alfabéticamente por Título del Post (de A a Z)
titledesc: ordena alfabéticamente por Título del Post (de Z a A)
dateoldest: ordena el Título del Post por fecha de publicación (del más antiguo al más reciente)
datenewest: ordena el Título del Post por fecha de publicación (del más reciente al más antiguo).
lastPost: número de artículos que aparecerán como nuevos, ordenados por última fecha de publicación.
date: 0 si no queremos mostrar la fecha de publicación del artículo o 1 para mostrarla.
newPost: texto o etiqueta que aparecerán en los artículos nuevos.
newtab: 0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
Como indicación final, sustituimos el texto [URL DE TU BLOG] por la dirección de nuestro blog (en mi caso: https://trucosparabloggerkiradober.blogspot.com).
Si además, queremos añadir estilos al Índice para que resulte más atractivo, podemos incluir clases de la siguiente forma:VA PUESTO DELANTE DEL PRIMER SCRIPT,
<style type="text/css">
.all-post ol{
list-style-type: circle
}
.all-post li a{
text-decoration:none;
padding:0 2px;
color:#445;
font-size:1.2rem
}
.all-post a:visited{
color:#445;
text-decoration:none
}
.all-post a:hover{
outline:0;
text-decoration:none;
color:#eee
}
.all-post li{
background:#eee;
padding:.5rem 1rem;
border-bottom:1px solid #c5c5c5
}
.all-post li span{
color:#888;
font-family:Impact,Charcoal,sans-serif;
font-size:.7rem
}
.all-post li:nth-child(){
background-color:#f5f5f5;
border-bottom:1px solid #b5b5b5
}
.all-post li:hover{
background:#1680c6
}
.all-post {
margin:3px auto;
font-size:1rem;
font-weight:400;
letter-spacing:1px
}
.all-post ol li strong em{
font-style:italic;
color:#d24f18
}
.all-post p a{
margin:0 0 10px 0;
padding:10px;
color: #fff;
font-size:1rem;
line-height:16px;
font-family:'Oswald',sans-serif;
font-weight:normal;
text-decoration:none;
outline:1px dashed #98abb9;
outline-offset:-2px;
background-color:#1680c6;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #000;
box-shadow:2px 2px 2px #000
}
</style>
.all-post ol{
list-style-type: circle
}
.all-post li a{
text-decoration:none;
padding:0 2px;
color:#445;
font-size:1.2rem
}
.all-post a:visited{
color:#445;
text-decoration:none
}
.all-post a:hover{
outline:0;
text-decoration:none;
color:#eee
}
.all-post li{
background:#eee;
padding:.5rem 1rem;
border-bottom:1px solid #c5c5c5
}
.all-post li span{
color:#888;
font-family:Impact,Charcoal,sans-serif;
font-size:.7rem
}
.all-post li:nth-child(){
background-color:#f5f5f5;
border-bottom:1px solid #b5b5b5
}
.all-post li:hover{
background:#1680c6
}
.all-post {
margin:3px auto;
font-size:1rem;
font-weight:400;
letter-spacing:1px
}
.all-post ol li strong em{
font-style:italic;
color:#d24f18
}
.all-post p a{
margin:0 0 10px 0;
padding:10px;
color: #fff;
font-size:1rem;
line-height:16px;
font-family:'Oswald',sans-serif;
font-weight:normal;
text-decoration:none;
outline:1px dashed #98abb9;
outline-offset:-2px;
background-color:#1680c6;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #000;
box-shadow:2px 2px 2px #000
}
</style>
Fuente; jmacuna.tecnoblog
Publicado por;
0 comentarios