Tutorial: Crear lista de temas mediante tags // Blogger

zking · 30 Jun 2014

Hola forobetanos les traigo un tutorial de como hacer un listado de temas/capítulos o para el uso que ustedes quieran, reitero que es para la plataforma Blogger pero si te gusto el tutorial no olvides dar +1, Comencemos :encouragement:.

Primero les dejare la base del script para obtener las etiquetas con javascript
Publicar este script antes de </head>

HTML:

<script type='text/javascript'>
//<![CDATA[
var postTitle = new Array();
var postUrl = new Array();
var postMp3 = new Array();
var postDate = new Array();
var postYear = new Array();
var postMonth = new Array();
var postYearMonth = new Array();
var postYearMonth2 = new Array();
var postTanggal = new Array();
var postLabels = new Array();
var postBaru = new Array();
var sortBy = "titleasc";
var tocLoaded = false;
var numChars = 250;
var postFilter = "";
var numberfeed = 0;
var month2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function mostrarlistado(a) {
function b() {
if ("entry" in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var m = a.feed.entry[h];
var e = m.title.$t;
var l = m.published.$t.substring(0, 10);
var p = m.published.$t.substring(5, 7);
var g = m.published.$t.substring(8, 10);
var n = month2[parseInt(p, 10) - 1] + " " + m.published.$t.substring(0, 4);
var c = "/" + m.published.$t.substring(0, 4) + "_" + p + "_01_archive.html";
var j;
for (var f = 0; f < m.link.length; f++) {
if (m.link[f].rel == "alternate") {
j = m.link[f].href;
break
}
}
var o = "";
for (var f = 0; f < m.link.length; f++) {
if (m.link[f].rel == "enclosure") {
o = m.link[f].href;
break
}
}
postTitle.push(e);
postDate.push(l);
postUrl.push(j);
postYearMonth.push(n);
postYearMonth2.push(c);
postTanggal.push(g)
}
}
}
b();
mostrarlistado();
document.write('')
}

function mostrarlistado() {
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postYearMonth[b];
document.write("<!-- <p/> --> ");
firsti = a;
do {
document.write("");
document.write('<li><a href="' + postUrl[a] + '">' + postTitle[a] + "</a> </li>");
document.write("");
a = a + 1
} while (postYearMonth[a] == temp1);
b = a;
document.write("");
if (b > postTitle.length) {
break
}
}
};
//]]>
</script>

Esto realiza la función

HTML:

GADGET
↓
SCRIPT
↓
POST
↓
FUNCIÓN LISTADO
↓
TAG/ETIQUETA

Lamento esta explicación sencilla jaja.

Personalización:
*Opcional si no lo quieres en forma de lista

HTML:

<script type='text/javascript'>
//<![CDATA[
var postTitle = new Array();
var postUrl = new Array();
var postMp3 = new Array();
var postDate = new Array();
var postYear = new Array();
var postMonth = new Array();
var postYearMonth = new Array();
var postYearMonth2 = new Array();
var postTanggal = new Array();
var postLabels = new Array();
var postBaru = new Array();
var sortBy = "titleasc";
var tocLoaded = false;
var numChars = 250;
var postFilter = "";
var numberfeed = 0;
var month2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function listado(a) {
function b() {
if ("entry" in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var m = a.feed.entry[h];
var e = m.title.$t;
var l = m.published.$t.substring(0, 10);
var p = m.published.$t.substring(5, 7);
var g = m.published.$t.substring(8, 10);
var n = month2[parseInt(p, 10) - 1] + " " + m.published.$t.substring(0, 4);
var c = "/" + m.published.$t.substring(0, 4) + "_" + p + "_01_archive.html";
var j;
for (var f = 0; f < m.link.length; f++) {
if (m.link[f].rel == "alternate") {
j = m.link[f].href;
break
}
}
var o = "";
for (var f = 0; f < m.link.length; f++) {
if (m.link[f].rel == "enclosure") {
o = m.link[f].href;
break
}
}
postTitle.push(e);
postDate.push(l);
postUrl.push(j);
postYearMonth.push(n);
postYearMonth2.push(c);
postTanggal.push(g)
}
}
}
b();
mostrarlistado();
document.write('')
}

function mostrarlistado() {
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postYearMonth[b];
document.write("<!-- <p/> --> ");
firsti = a;
do {
document.write("");
document.write('<li><a href="' + postUrl[a] + '">' + postTitle[a] + "</a> </li>");
document.write("");
a = a + 1
} while (postYearMonth[a] == temp1);
b = a;
document.write("");
if (b > postTitle.length) {
break
}
}
};
//]]>
</script>

Donde:

+ postUrl[a] + es La url del post
+ postTitle[a] + es el titulo del post

Ahora lo insertaremos en una entrada

<div class="listado-contenido">
<ul id="listado" >
<script src="../../feeds/posts/default/-/Script?max-results=99999&orderby=published&alt=json-in-script&callback=listado"></script>
</ul>
</div>

Lo que esta en color azul seria el nombre de la etiqueta que queremos que muestre.
Lo que esta en color rojo hacemos llamado a la función "listado" para que obtenga los post.

Ahora les debe quedar algo asi:

Ahora le damos un toque de CSS:

HTML:

#listado li {
width: auto;
color: #585858;
text-shadow: 0 1px 0 white;
border: 1px solid #ddd;
line-height: 20px;
position: relative;
list-style: none;
-webkit-transition: all 300ms ease-in-out;
}
#listado li:hover {
background-color: #DAE7FA;
color: #000;
}
#listado li a {
display: block;
padding: 5px 26px;
padding-right: 85px;
text-decoration: none;
color: inherit;
position: relative;
text-shadow: 0 1px 0 #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

y quedaria algo asi

Bueno con esto me despido, si les funciono pongan me agrada, like o +1 (No es obligatorio pero se agradece)

DEMO: Crear lista de temas mediante tags: Zasudark

---------- Post agregado el 30-jun-2014 hora: 20:43 ----------

Muy pocos han visto el tutorial :ambivalence:

Tutorial: Crear lista de temas mediante tags // Blogger

zking Seguir