El Footer representa la vista completa de un blog, ya que tiene información importante que es extremadamente util para el propietario de una pagina web. Como todos sabemos, el pie de página se encuentra en el extremo de los sitios web , las probabilidades son extremadamente finas que los visitantes nunca van a ver de forma adecuada. Por lo tanto, es extremadamente importante que un dueño del web debe integre un "Una barra flotante al blog o página web para que pueda maximizar la atención del visitante.
Tener un bar Sticky en la parte inferior de la página web tiene muchas ventajas también podemos enumerar Articulos destacados en él para obtener la máxima atención de los visitantes. En este artículo, vamos a aprender a crear un barra pegajosa inferior flotante en Blogger.
¿Cuándo y dónde El Pie flotante aparecerá:
Basta con mirar en la siguiente captura de pantalla, en la que se puede presenciar una barra de pie de página pegajoso que está equipado con los iconos sociales, un botón para volver a la parte superior y un vínculo artículo destacado. Se adjunta a la parte inferior de su sitio web, mientras que se desplazará a lo largo de la pantalla.
- Entra en tu cuenta de Blogger >> Plantilla >> Editar HTML .
- Ahora dentro plantilla busca ]]></b:skin> y arriba de este pega el siguiente codigo de Css.
<style>Luego busque la siguiente etiqueta </head> y arriba de este pegue el siguiente codigo de JavaScript.
/* MBL Floating Sticky Footer Bar para Blogger (www.ciudadblogger.info) */
#MBL-footer-bar {
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
height: 38px;
clear: both;
margin: 0;
padding-bottom: 4px;
background-color: #333;
overflow: hidden;
}
#MBL-footer-bar a {
float: right;
margin: 0;
padding: 0;
background-color: #333;
}
#MBL-footer-bar a.first {
float: left;
margin-top: -1px;
}
.MBL-footer-wrapper {
max-width: 92%;
width: 960px;
margin: 0 auto;
}
.MBL-footer-wrapper {
width: 100%;
padding: 10 10%;
}
@media only screen and (max-width : 649px),
only screen and (min-device-width : 320px) and (max-device-width : 685px) {
#MBL-footer-bar {
position: static;
}
.MBL-footer-wrapper {
width: 90%;
padding: 0 5%;
}}
#tips, #tips li{margin:0; padding:8px; list-style:none; }
#tips{width: 100%; font-size:22px; line-height:120%; font-family: Arial, Helvetica, sans-serif; vertical-align:middle; margin: -2px 0 0; opacity: 0.95; font-weight: bold; }
#tips li{padding: 0px 0; display:none; float:left; }
#tips li a{color: #fff; }
#tips li a:hover{text-decoration: none; }
</style>
<script>Ahora finalmente, busca la etiqueta <body> y debajo de esta pega el siguiente codigo de HTML .
<script>$('#MBL-footer-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#MBL-footer-bar').slideDown(200)}else{$('#MBL-footer-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script>
<script>var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-20868082-3']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript'ga.async=true;ga.src=('https:'==document.location.protocol?'https:var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s)})();</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2' type='text/javascript'/>
<script src='https://mybloggerlab.googlecode.com/files/main.js' type='text/javascript'/>
</script>
Personalización de este widget:
- <header class='cf' id='page-header'/>
- <div id='MBL-footer-bar'>
- <div class='MBL-footer-wrapper'>
- <a class='go-top first' href='#page-header'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1M7tAPvTgvk-KmWmbhH2lLVLK3MSnrEnxVEwcszdXO1oCDjsrQpQcLlE3uB12YtuhqecQhcEHC7hyNl6tT95az_cutIMkq-NMzpbj6PxEhC_X6kDH-0woM8FtjCZL6FUoDBW0B4Ne15I/s1600/UP.png'/></a>
- <a href='https://plus.google.com/u/0/106374439082237287658' target='_blank' title='Follow On Google+'><img alt='google+ page' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM22Gx6tSHBV7I2Q-GiI1Sy5ZP53ZycFhZ7zlSizkJ4hh6EQupjgXnjB47ehky5vE7rm7vKW4W-EymbdECpws9P3nNoymUTDgFb_VggEM4HLTQEZZP-8j4en38Ipf_PWReooLn7WnQmv4G/s1600/GooglePlus.png'/></a>
- <a href='http://www.facebook.com/trucosblogger' target='_blank' title='Follow On Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HtEcJy0dJzbUfb8w3IlyGrw-E51iNO4vWNFoLNfN81DA7fDOKHYXqJVwAZkWrx81mfMCePaHM39N3Lj65X0aFnQpFqX74EnbtwxHk5jpzNIe_noPRtNz5cjdYx0c00rTwbPoNTUZnww2/s1600/FB.png'/></a>
- <a href='http://twitter.com/andante772' target='_blank' title='Follow Us'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilm9obzmaPHMlSinHik8AIQBJQgX77FGYw5vAwTbqzQteFucFFAQ8PXHulLwACMnoEBnXNVe7WMvq8jquVEZN-ZZD2B4SvkfyhNyhRyr2Q7U0SOaqznmcKejXiHEl_2ukbXuNZjRnFS6Ox/s1600/Twitter.pngg'/></a>
- <a href='http://feeds.feedburner.com/ciudadblogger' title='Get Updates'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYuFxFfBigxQSZx6cbB_KmoT53Pj4ynlsqFE0ie-xgKqPEzAikeHVAe8ybsfwjovS_gVJ7jEJX2p1ZgCykY-9q7MO8frCIxLtAnGRlaHYagjyxQMyzxRa_EPwzuC40I6kFy-ehhCD5xIkX/s1600/RSS.png'/></a>
- <div class='boxfloat'>
- <ul id='tips'>
- <li><a href='http://www.ciudadblogger.info'>Ciudadblogger is the First Item</a></li>
- <li><a href='http://www.blogger.com'>Blogger.com is the Second Item</a></li>
- <li><a href='http://www.ciudadblogger.info'>This Is Third Item</a></li>
- <li><a href='http://www.ciudadblogger.info'>This Is Forth Item</a></li>
- </ul>
- </div>
- </div>
- </div>
Puede incluir múltiples enlaces Articulo destacado en el mismo. Sin embargo, sólo un elemento se mostrará a sus visitantes, que rotará cada vez que alguien va a recargar la página.
No te olvides de sustituir los enlaces de color arriba con tus cuentas sociales, es decir, Google Plus, Facebook, Twitter y RSS feeds.
Para cambiar el color de fondo de la barra sencilla Pie de reemplazar los dos # 333 con el color que desee en la CSS por encima de Codificación.
Todo hecho: Ahora, una vez que haya personalizado el pie de página de acuerdo a sus necesidades deseo seguir adelante y guardar la plantilla.Listo a Disfrutar.
0 comentarios:
Publicar un comentario