Una de las características más útiles de Blogger es su capacidad para generar feeds y con base en ello, desarrollé un plugin que crea un widget del mismo, lo que permite a tus visitantes, con blog propio, mostrar tus últimas publicaciones a modo de agradecimiento.
La fuente de inspiración proviene de la sección Webmasters de Somoskudasai, por otro lado, este código fue posible gracias a otro aporte que aún no he publicado, pero que fue desarrollado por Jose Gregorio
Instalar
La forma mas fácil de hacerlo es creando una nueva pagina estática en Blogger, luego cambia el editor a modo HTML y en el contenido escribe el siguiente código, es la estructura minima aceptable sin estilos:
<!-- Personalizar -->
<div id="dev-customizer">
<label><input type="radio" name="direction" value="column" checked=""/> Columna</label>
<label><input type="radio" name="direction" value="row"/> Fila</label>
<input class="dev-input" type="number" value="5" min="3" max="9" name="max"/>
<input class="dev-input" type="text" value="#ffffff" name="background"/>
<input class="dev-input" type="text" value="#212121" name="title"/>
<input class="dev-input" type="text" value="#212121" name="category"/>
<input class="dev-input" type="text" value="#f1f1f1" name="categorybg"/>
<input class="dev-input" type="text" value="#e6e6e6" name="border"/>
<input class="dev-input" type="text" value="" name="label"/>
</div>
<!-- Vista previa -->
<div class="widget-feeds"></div>
<!-- Resultado -->
<div id="dev-results">
<textarea spellcheck="false"></textarea>
<button>Copiar código</button>
</div>
El código se compone de 3 partes. La primera es un formulario de personalización, que le permite a tus visitantes configurar los estilos del widget. Luego sigue un contenedor vacío que sirve de vista previa, por último un cuadro de texto con el código y un botón para copiar rápidamente
Tras incluir la estructura, para iniciar el código necesitarás agregar el script y usar el método initCustomizer lo que te permite iniciar todo. Para ello agrega al final del código lo siguiente:
<script href="https://cdn.jsdelivr.net/npm/ifeeds@1/dist/js/feeds.min.js"></script>
<script>
Feeds.initCustomizer()
</script>
Y listo, veras todo funcionando sin estilos, puedes ver un ejemplo en codepen.
Estructura personalizada
La estructura y diseño puede ser como tu quieras, para ayudarte un poco te proporciono un ejemplo de un diseño personalizado también en codepen. Solo deberás copiar el código html y css.
Opciones
Con todo lo mencionado ya puedes hacer funcionar el widget sin embargo si necesitas más opciones, puedes consultarlas en el repositorio en github.
Variables
Además de la configuración mediante el formulario y las opciones disponibles en GitHub, también he agregado variables CSS en el código, con el fin que los usuarios pueda adaptar aún más los widgets a sus diseños, las variables disponibles son las siguientes:
| Variable | Descripcion |
|---|---|
--feeds-background |
Color de fondo |
--feeds-margin |
Separación |
--feeds-ratio-y |
Relación de aspecto vertical |
--feeds-ratio-x |
Relación de aspecto horizontal |
--feeds-title-color |
Color de títulos |
--feeds-category-bg |
Color de fondo |
--feeds-category-color |
Color de fondo de categorías |
--feeds-border |
Color de bordes |
--feeds-gap |
Separación entre elementos |
Conclusión
Si tienes visitantes recurrentes, que adoren tu contenido y cuenten con sitio propio, este complemente puede ser de mucha ayuda, aun así recuerda que todo dependerá de tu contenido y el usuario dispuesto a enlazarte.
Este es un aporte a pedido de usuarios, si tienes propuestas interesantes que deseas compartir, únete al grupo en telegram. Espero que te haya sido de utilidad, si fue asi te agradeceré si lo compartes con tus amigos. Muchas gracias por pasar.
