Karasu
Delta
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Hola chicos, aquí un aporte para fb, espero les sirva. 🙂
¿Qué es?
Es un complemento para blogger que nos permite crear un índice ordenado alfabéticamente. Está basado en la api 3.0 de blogger.
Instalar
para instalarlo, nos vamos a Temas » Personalizar » Opciones avanzadas » CSS Personalizado y pegamos el siguiente código:
ahora, volvemos a nuestro panel de administración y nos vamos a la pestaña de páginas, creamos una nueva y agregamos el siguiente código:
reemplazamos los valores blog_id y api_key por sus valores correspondientes (más abajo se explica como obtenerlos si no sabes cómo).
Obtener el id de nuestro blog en blogger
Para conseguir el id de nuestro blog, debemos irnos a nuestro panel de administración y fijarnos en la url del navegador, debería de tener el siguiente aspecto:
Lo qué está marcado de color es el id de nuestro blog.
Obtener la clave de Api
para obtener la api key, les recomiendo leer este artículo de zkreations
Una vez hayamos agregado tanto el id de nuestro blog como la clave de api, guardamos los cambios y listo.
Bueno eso es todo, si quieres ver el artículo original, míralo pinchando aquí. Si encuentras algún error, tienes dudas o lo que sea, no dudes en comentarlo, siempre que esté conectado te responderé. 🙂
PD: disculpen que no haya "demo" como tal, pero si quieren ver como luce, pueden verlo aquí.
¿Qué es?
Es un complemento para blogger que nos permite crear un índice ordenado alfabéticamente. Está basado en la api 3.0 de blogger.
Instalar
para instalarlo, nos vamos a Temas » Personalizar » Opciones avanzadas » CSS Personalizado y pegamos el siguiente código:
CSS:
/*! azList v1.0.0 | github.com/Karasu-themes/krs-azlist-blogger */
.krs-azlist{width:100%;font-family:"Roboto";font-size:16px}.krs-azlist__headline{background:#f5f5f5;color:#263238;padding:0 16px;line-height:56px;font-size:18px;text-align:left;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.krs-azlist__count{display:block;font-size:12px;font-weight:500;opacity:.5}.krs-azlist__loading{background:#f5f5f5;color:#263238;padding:16px;font-size:14px;font-weight:500}.krs-azlist__toggle{width:24px;height:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:.5;cursor:pointer;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out}.krs-azlist__toggle:before{content:"";border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #000}.krs-azlist__toggle.actived{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.krs-azlist__row{margin-bottom:8px}@-webkit-keyframes itemActived{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes itemActived{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.krs-azlist__items{margin:0;padding:16px 0}.krs-azlist__items.isRounded li a img{border-radius:4px}.krs-azlist__items.isEllipses li a img{border-radius:50%}.krs-azlist__items li{list-style:none;border-bottom:1px solid rgba(0, 0, 0, .1)}.krs-azlist__items li:last-child{border-bottom:0}.krs-azlist__items li a{padding:16px;font-size:14px;color:#263238;text-decoration:none;font-weight:500;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.15s;transition:all 0.15s}.krs-azlist__items li a:hover{color:#283593}.krs-azlist__items li a img{width:48px;height:48px;-o-object-fit:cover;object-fit:cover;margin-right:8px;-webkit-box-shadow:0 3px 5px -2px rgba(0, 0, 0, .3);box-shadow:0 3px 5px -2px rgba(0, 0, 0, .3)}ahora, volvemos a nuestro panel de administración y nos vamos a la pestaña de páginas, creamos una nueva y agregamos el siguiente código:
Insertar CODE, HTML o PHP:
<!-- azList v1.0.0 | github.com/Karasu-themes/krs-azlist-blogger -->
<div class="krs-azlist"><div class="krs-azlist__loading">cargando entradas...</div></div>
<script src='//karasu-themes.github.io/cdn/azlist/krs-azlist.min.js'></script>
<script>
var azList = new azList({
blogId: "blog_id", //Id del blog de blogger
apiKey: "api_key" //Api key de blogger (puedes obtenerla en: console.developers.google.com/projectselector/apis/credentials)
});
</script>reemplazamos los valores blog_id y api_key por sus valores correspondientes (más abajo se explica como obtenerlos si no sabes cómo).
Obtener el id de nuestro blog en blogger
Para conseguir el id de nuestro blog, debemos irnos a nuestro panel de administración y fijarnos en la url del navegador, debería de tener el siguiente aspecto:
Rich (BB code):
https://www.blogger.com/blogger.g?blogID=14607093160910XXXXX#allpostsLo qué está marcado de color es el id de nuestro blog.
Obtener la clave de Api
para obtener la api key, les recomiendo leer este artículo de zkreations
Una vez hayamos agregado tanto el id de nuestro blog como la clave de api, guardamos los cambios y listo.
Bueno eso es todo, si quieres ver el artículo original, míralo pinchando aquí. Si encuentras algún error, tienes dudas o lo que sea, no dudes en comentarlo, siempre que esté conectado te responderé. 🙂
PD: disculpen que no haya "demo" como tal, pero si quieren ver como luce, pueden verlo aquí.
