Hoy te voy a ensenar como puedes añadir el boton de Entradas al Azar a Blogger cuando das click sobre el mismo seras redirigido a culquier pagina de tu blog.El widget trabaja en JavaScript miestras que el boton es hecho utilizando CSS.
Este widget usa simple JavaScript y luce elegante.Dando click en el boton este obtiene una entrada de el feed de el blogs y redirige al usuario a esa pagina en particular.
Este widget puede ser de ayuda para aumentar las paginas vistas de tu blog. Por otra parte el boton tiene un efecto 3D, cual podras ver al dar clic en ejemplo de abajo..
Una vez hayas visto el demo puedes anadir este asombroso widget a tu blog existen dos metodos:
1. Instalacion con solo un clic
2. Manualmente Adiendo el Codigo
Instalacion Con Un Solo Clic
Para Añadir esta barra de buqueda a tu blog solo da clic al siguiente boton.
Despues de dar clic al boton seras redirigido a Blogger.com y tu widget sera añadido automaticamente a tu blog seleccionado.
Añadiendo el Codigo Manualmente
Si piensas que debes hacerle cambios al codigo o el boton de arriba no esta funcionando para ti entonces podrias usar este metodo.
Entra en blogger>>Selecciona el blog → Diseño → Añadir un Widget → HTML/JavaScript. Pega el codigo de Abajo.
<style>
#abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#abt-random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#abt-random a{color: #fff;}
</style>
<center><div id="abt-random"></div></center>
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>
Despues de añadir el codigo guarda el widget y finalmente guarda la Plantilla. Listo. Ahora tu y tus visitantes pueden ver y usar este boton de Articulos al Azar para Blogger.
0 comentarios:
Publicar un comentario