En blogger ¿cual es el script ajax, css y html para poner unas pestañas o tabs tipo ajax para poner categorias con las etiquetas usando el json/feed?
Para crear una sección de pestañas o tabs en Blogger que muestre categorías y etiquetas usando JSON/Feed, puedes seguir los siguientes pasos:
1. Agrega el siguiente código en la sección `<head>` de tu plantilla para agregar los estilos CSS necesarios:
```html
<head>
<style>
.tab {
overflow: hidden;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.tab button {
background-color: #f2f2f2;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
font-size: 14px;
}
</style>
</head>
```
2. Agrega el siguiente código HTML en la sección donde quieres mostrar las pestañas:
```html
<div class="tab">
<button class="tablinks active" onclick="openCategory(event, 'category')">Categorías</button>
<button class="tablinks" onclick="openCategory(event, 'tags')">Etiquetas</button>
</div>
<div id="category" class="tabcontent"></div>
<div id="tags" class="tabcontent"></div>
```
3. Agrega el siguiente código JavaScript en la sección `<head>` de tu plantilla o en la sección `<body>` antes de cerrar:
```html
<script type="text/javascript">
function openCategory(evt, categoryName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent
.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(categoryName).style.display = "block";
evt.currentTarget.className += " active";
}
// the feed URL to use
var feedUrl = "/feeds/posts/summary?alt=json-in-script&callback=myfunction";
// the number of posts to show
var numPosts = 10;
function myfunction(jsonData) {
var categories = {};
var tags = {};
var totalPosts = jsonData.feed.openSearch$totalResults.$t;
var posts = jsonData.feed.entry;
for (var i = 0; i < posts.length; i++) {
var post = posts;
var categoriesArr = post.category || [];
var tagsArr = post.tags || [];
for (var j = 0; j < categoriesArr.length; j++) {
var category = categoriesArr[j].term;
if (!categories[category]) {
categories[category] = [];
}
if (categories[category].indexOf(post) == -1) {
categories[category].push(post);
}
}
for (var j = 0; j < tagsArr.length; j++) {
var tag = tagsArr[j].term;
if (!tags[tag]) {
tags[tag] = [];
}
if (tags[tag].indexOf(post) == -1) {
tags[tag].push(post);
}
}
}
var categoryDiv = document.getElementById('category');
var categoryContent = '';
var tagDiv = document.getElementById('tags');
var tagContent = '';
for (var category in categories) {
categoryContent += '<h3>' + category + '</h3>';
var posts = categories[category].slice(0, numPosts);
categoryContent += '<ul>';
for (var i = 0; i < posts.length; i++) {
var post = posts;
categoryContent += '<li><a href="' + post.link[0].href + '">' + post.title.$t + '</a></li>';
}
categoryContent += '</ul>';
}
for (var tag in tags) {
tagContent += '<h3>' + tag + '</h3>';
var posts = tags[tag].slice(0, numPosts);
tagContent += '<ul>';
for (var i = 0; i < posts.length; i++) {
var post = posts;
tagContent += '<li><a href="' + post.link[0].href + '">' + post.title.$t + '</a></li>';
}
tagContent += '</ul>';
}
categoryDiv.innerHTML = categoryContent;
tagDiv.innerHTML = tagContent;
}
// load the JSON data
var script = document.createElement('script');
script.setAttribute('src', feedUrl);
document.getElementsByTagName('head')[0].appendChild(script);
</script>
```
Este código cargará la información de las categorías y etiquetas usando la API JSON de Blogger, y la mostrará en el HTML correspondiente a cada pestaña. Puedes personalizar lo siguiente:
- `feedUrl` la URL del feed que deseas utilizar.
- `numPosts` el número de entradas de blog a mostrar para cada categoría o etiqueta.
- El HTML y los estilos de la sección de pestañas y la sección del contenido.