miércoles, 31 de julio de 2013

añade a tu Blog una Barra lateral con estilo ModernUI de windows 8 con CSS

Damian 7/31/2013

Para aquellos webmaster que esten creando un sitio con estilo ModernUI de windows 8 ,hoy les traigo un código simple en CSS pero ver un ejemplo aquí mismo.

  • Instalaciónen Blogger
Primero vamos añadir el CSS a la plantilla que deseemos nos dirigimos ala opción plantilla--Editar Html--luego hacemos click dentro del editor y realizamos la combinación de teclas CTRL+F para abrir el buscador y buscamos la etiqueta/b:skin ,una vez encontrada justo arriba de ella pegue el siguiente código CSS.

.barra_modernUI { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHkAI2Oj7AOGw64HPu0BANe7cFws5x1f2qP5kmj_0ndoxWFZfF97_1pXukaLxBIB4r4_7N0UpqCoaqE-eC31bxZDPYJ3bCVaF8AFGme_JXfTTvkTEuKZL-qflab40z4YTFdc5XKfiIfs9/s1600/noise.png), linear-gradient(to right, #000000, #000000); bottom: 0; list-style: none outside none !important; margin: 0 !important; padding: 20px 0 0 !important; position: fixed; top: 0; transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; width: 76px; opacity:0; } .barra_modernUI.left {left: -60px;} .barra_modernUI.left:hover {left: 0;} .barra_modernUI.right {right: -60px;} .barra_modernUI.right:hover {right: 0;} .barra_modernUI:hover { right:0; opacity:1; } .barra_modernUI li { background-position: 50% 10px; background-repeat: no-repeat; cursor: pointer; height: 84px; position: relative; text-align: center; } .barra_modernUI li a { color: #FFFFFF; display: block; font-family: "Segoe UI",arial,helvetica; font-size: 11px; line-height: 1.2 !important; padding: 61px 0 10px; text-decoration: none; } .nomb_admin{ position:relative; width:90%; float:left; top:75%; color: #ffffff; padding:4px 4px 4px 4px; font-family: "Segoe UI",arial,helvetica; font-size: 11px; background-color:#e214ea; } .barra_modernUI li.admin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgpI85s1bz79LkdxpGsyxJrAiDAzlYER3sZ4ifSPKNtzWlwab6NMivPquUtiJ1_DvXWwWMOH6UybIhzjBWwwmlkR3WMrQmHrrF2LV2Pq1g1MWP-fJULakZQT7hfYxtJgg1mgQiM1y_Aw/s176-no/30754_421559121243112_310972398_n.jpg"); background-position:0px top; background-size:100% 100%; } .barra_modernUI li.refrescar { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizc2S_fhLW2iYUz0ozoB69JGZtRS32KjnYT2smxQDUTE__xlOgT2fKs9auqDRdrTwqY7ryfwMBjVWNec8pWGcO6X_SXwVxn26C_ZifeDKwYkVwJJpgLb6Rx3NqLGNut2QxP29Yoe_29ulc/s1600/refrescar.png"); } .barra_modernUI li.atras { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCAxYyZFn_doucIs9CxmtTZficTLw5cpXj96EYPUBmMW7hGy_k3uERyQzd8QkDOiskwTp5-jOQlvNZPl2uYDYGWwx-8cMpAlzQVcnUhxh32Snb6QVRFrrFxdAcQ4KdSPIzZKfFYI-_LpsQ/s1600/atras.png"); } .barra_modernUI li.siguiente { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-UAX-0pU5e3vcXo0bTNJv5-25xVRB8_tK7Wusomb-3YyZdakow8AZW_Hegmp0du8nGb2Fim05zCaL34aiFSbl9nLnflR2wKAbta2XcmUmFZO83DeH-1RPayuPDTQ6A5dSCpbfQQvOIKNZ/s1600/siguiente.png"); } .barra_modernUI li:hover { background-color: #232323; }


luego de haber pegado el CSS ,procedemos a añadir el codigo HTML donde usted desee puede ser dentro de la plantilla dentro delbody o dentro de un gadget .

ul class="barra_modernUI right" li class="admin"span class='nomb_admin'Admin/span/li li class="refrescar"a href="#"refrescar/a/li li class="atras"a href="#"Atras/a/li li class="siguiente"a href="#"Siguiente/a/li /ul

si usted quisiera cambiar la posicion de la barra puede cambiar el nombre de la clase enclass="barra_modernUI right"porclass="barra_modernUI right", tambien dejo el codigo fuente completo para su descarga.



DESCARGAR







No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)