Quiero Polymer en Blogger!
Este fin de semana me propuse un simple desafío de integración. La idea era incorporar #Polymer en las plantillas de #Blogger. De esta forma actualizar el diseño general de esta potente herramienta de comunicación y de paso tener un poco de diversión para #desarrolladores.
La estructura de las plantillas #Blogger tienen un estructura xml, y por este motivo hay que cumplir algunas reglas. De todas formas nada que en minutos no se pueda resolver.
En este ejemplo, el objetivo era no solo incorporar marcado tradicional sino interacción con #js.
1. Incorporar webcomponents.js
<script src='//www.polymer-project.org/components/webcomponentsjs/webcomponents.js'/>
2. Incorporar en este caso el elemento de core-pages [utilizamos como ejemplo este elemento]
<link href='//www.polymer-project.org/components/core-pages/core-pages.html' rel='import'/>
3. Estilos css para esta funcionalidad
<b:skin>
<![CDATA[
<style>
html, body {
4. El elemento en concreto dentro del Body
<core-pages class="fancy" selected="0">
5. La funcionalidad Js para el desarrollo del ejemplo.
<script >
//<![CDATA[
document.querySelector('core-pages.fancy').onclick = function(e) {
Aquí les dejo la implementación completa y en este repositorio GitHub podrán seguir la evolución a una plantilla totalmente funcional. [ejemplo actual]
Quiero Polymer en Blogger! por http://nbortolotti.blogspot.com se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.
La estructura de las plantillas #Blogger tienen un estructura xml, y por este motivo hay que cumplir algunas reglas. De todas formas nada que en minutos no se pueda resolver.
Estás listo para incorporar #Polymer a #Blogger?
Zonas importante de la implementación:En este ejemplo, el objetivo era no solo incorporar marcado tradicional sino interacción con #js.
1. Incorporar webcomponents.js
<script src='//www.polymer-project.org/components/webcomponentsjs/webcomponents.js'/>
2. Incorporar en este caso el elemento de core-pages [utilizamos como ejemplo este elemento]
<link href='//www.polymer-project.org/components/core-pages/core-pages.html' rel='import'/>
3. Estilos css para esta funcionalidad
<b:skin>
<![CDATA[
<style>
html, body {
4. El elemento en concreto dentro del Body
<core-pages class="fancy" selected="0">
5. La funcionalidad Js para el desarrollo del ejemplo.
<script >
//<![CDATA[
document.querySelector('core-pages.fancy').onclick = function(e) {
Aquí les dejo la implementación completa y en este repositorio GitHub podrán seguir la evolución a una plantilla totalmente funcional. [ejemplo actual]
Cargando ....
Quiero Polymer en Blogger! por http://nbortolotti.blogspot.com se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.
Comentarios
Publicar un comentario