<div class="bbWrapper"><blockquote data-attributes="member: 229615" data-quote="BotBeta" data-source="post: 8438360"
class="bbCodeBlock bbCodeBlock--expandable bbCodeBlock--quote js-expandWatch">
<div class="bbCodeBlock-title">
<a href="/goto/post?id=8438360"
class="bbCodeBlock-sourceJump"
rel="nofollow"
data-xf-click="attribution"
data-content-selector="#post-8438360">BotBeta dijo:</a>
</div>
<div class="bbCodeBlock-content">
<div class="bbCodeBlock-expandContent js-expandContent ">
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:<br />
<br />
1. Agrega el siguiente código en la sección `<head>` de tu plantilla para agregar los estilos CSS necesarios:<br />
<br />
```html<br />
<head><br />
<style><br />
.tab {<br />
overflow: hidden;<br />
border-bottom: 1px solid #ccc;<br />
margin-bottom: 10px;<br />
}<br />
<br />
.tab button {<br />
background-color: #f2f2f2;<br />
float: left;<br />
border: none;<br />
outline: none;<br />
cursor: pointer;<br />
padding: 14px 16px;<br />
transition: 0.3s;<br />
font-size: 17px;<br />
}<br />
<br />
.tab button:hover {<br />
background-color: #ddd;<br />
}<br />
<br />
.tab button.active {<br />
background-color: #ccc;<br />
}<br />
<br />
.tabcontent {<br />
display: none;<br />
padding: 6px 12px;<br />
border-top: none;<br />
font-size: 14px;<br />
}<br />
</style><br />
</head><br />
```<br />
<br />
2. Agrega el siguiente código HTML en la sección donde quieres mostrar las pestañas:<br />
<br />
```html<br />
<div class="tab"><br />
<button class="tablinks active" onclick="openCategory(event, 'category')">Categorías</button><br />
<button class="tablinks" onclick="openCategory(event, 'tags')">Etiquetas</button><br />
</div><br />
<div id="category" class="tabcontent"></div><br />
<div id="tags" class="tabcontent"></div><br />
```<br />
<br />
3. Agrega el siguiente código JavaScript en la sección `<head>` de tu plantilla o en la sección `<body>` antes de cerrar:<br />
<br />
```html<br />
<script type="text/javascript"><br />
function openCategory(evt, categoryName) {<br />
var i, tabcontent, tablinks;<br />
tabcontent = document.getElementsByClassName("tabcontent");<br />
for (i = 0; i < tabcontent.length; i++) {<br />
tabcontent<i>.style.display = "none";<br />
}<br />
tablinks = document.getElementsByClassName("tablinks");<br />
for (i = 0; i < tablinks.length; i++) {<br />
tablinks<i>.className = tablinks<i>.className.replace(" active", "");<br />
}<br />
document.getElementById(categoryName).style.display = "block";<br />
evt.currentTarget.className += " active";<br />
}<br />
<br />
// the feed URL to use<br />
var feedUrl = "/feeds/posts/summary?alt=json-in-script&callback=myfunction";<br />
<br />
// the number of posts to show<br />
var numPosts = 10;<br />
<br />
function myfunction(jsonData) {<br />
var categories = {};<br />
var tags = {};<br />
var totalPosts = jsonData.feed.openSearch$totalResults.$t;<br />
var posts = jsonData.feed.entry;<br />
<br />
for (var i = 0; i < posts.length; i++) {<br />
var post = posts<i>;<br />
var categoriesArr = post.category || [];<br />
var tagsArr = post.tags || [];<br />
<br />
for (var j = 0; j < categoriesArr.length; j++) {<br />
var category = categoriesArr[j].term;<br />
if (!categories[category]) {<br />
categories[category] = [];<br />
}<br />
if (categories[category].indexOf(post) == -1) {<br />
categories[category].push(post);<br />
}<br />
}<br />
<br />
for (var j = 0; j < tagsArr.length; j++) {<br />
var tag = tagsArr[j].term;<br />
if (!tags[tag]) {<br />
tags[tag] = [];<br />
}<br />
if (tags[tag].indexOf(post) == -1) {<br />
tags[tag].push(post);<br />
}<br />
}<br />
}<br />
<br />
var categoryDiv = document.getElementById('category');<br />
var categoryContent = '';<br />
var tagDiv = document.getElementById('tags');<br />
var tagContent = '';<br />
<br />
for (var category in categories) {<br />
categoryContent += '<h3>' + category + '</h3>';<br />
var posts = categories[category].slice(0, numPosts);<br />
categoryContent += '<ul>';<br />
for (var i = 0; i < posts.length; i++) {<br />
var post = posts<i>;<br />
categoryContent += '<li><a href="' + post.link[0].href + '">' + post.title.$t + '</a></li>';<br />
}<br />
categoryContent += '</ul>';<br />
}<br />
<br />
for (var tag in tags) {<br />
tagContent += '<h3>' + tag + '</h3>';<br />
var posts = tags[tag].slice(0, numPosts);<br />
tagContent += '<ul>';<br />
for (var i = 0; i < posts.length; i++) {<br />
var post = posts<i>;<br />
tagContent += '<li><a href="' + post.link[0].href + '">' + post.title.$t + '</a></li>';<br />
}<br />
tagContent += '</ul>';<br />
}<br />
<br />
categoryDiv.innerHTML = categoryContent;<br />
tagDiv.innerHTML = tagContent;<br />
}<br />
<br />
// load the JSON data<br />
var script = document.createElement('script');<br />
script.setAttribute('src', feedUrl);<br />
document.getElementsByTagName('head')[0].appendChild(script);<br />
</script><br />
```<br />
<br />
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:<br />
<br />
- `feedUrl` la URL del feed que deseas utilizar.<br />
- `numPosts` el número de entradas de blog a mostrar para cada categoría o etiqueta.<br />
- El HTML y los estilos de la sección de pestañas y la sección del contenido.</i></i></i></i></i></i>
</div>
<div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">Hacer clic para expandir...</a></div>
</div>
</blockquote>¿Cuánto tienes de memoria ram?</div>
