CARATULAS DISCOGRAFÍCAS KIRADOBER : widget

Widget de redes sociales con efectos

Tener un buen widget de redes sociales en nuestro blog de blogger, es algo necesario para nuestro blog.

Para atraer a los usuarios que visitan nuestros blogs con buenos efectos y así animarlos a que se suscriban en nuestros perfiles de redes sociales, es darse a conocer mucho más en el ámbito del internet.

La intención es que nuestros visitantes puedan suscribirse en las diferentes redes sociales y así compartir con ellos nuestras nuevas actualizaciones.

No vamos a insertar ningún Javascript ni tampoco un Jquery, todo el código esta implementado para hacer fácil su instalación.

El código es basado en líneas CSS el cual le dará un efecto a su widget de redes sociales.

Ahora vamos a ver como instalamos el Widget de redes sociales en nuestro blog, seguir los pasos que os indico a continuación que son muy sencillos.

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAbpzFwTMzd5cHmXPgIec_gWvhRHh33vP6R3_yKw1zS-Lo4CRWJ-HMZGg6kyP-3nCRvaS8FTAGyzj0FIw-hlHujYr-OgLNiuEFDBLjRQ3voZnHJPTWAc0LmPYh1XlwpAV3RMTQBLM419Y/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>

<ul id="tbisose">
<li data-alt="Sigueme en Facebook"><a class="icon facebook" href="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017">Sigueme en Facebook</a></li>
<li data-alt="Sigueme en Twitter"><a class="icon twitter" href="https://www.twitter.com/ayudadeblogger">Sigueme en Twitter</a></li>
<li data-alt="Sigueme en Google+"><a class="icon googleplus" href="https://plus.google.com/114283163993086871162">Sigueme en Google+</a></li>
<li data-alt="Sigueme en Pinterest"><a class="icon pinterest" href="#">Sigueme en Pinterest</a></li>
<li data-alt="Suscribete a RSS"><a class="icon rss" href="http://feeds.feedburner.com/ForoAyudaDeBlogger">Suscribete a RSS</a></li>
</ul>

5-Da un clic en “Guardar”

Los 5 links que están marcados de color azul incluyendo al numeral #, deberás cambiarlos por los links correspondientes de tus redes sociales.

Eso es todo ahora dale un clic en “Guardar”, y ubica tu nuevo widget donde tu quieras.

Fecha:04/05/2018

Fuente: ayudadeblogger

Publicado por:

5/04/2018

Menú vertical uno

Cada vez se pueden hacer mas maravillas con el CSS3, es cuestión de experimentar e ir probando, sobre todo al que les guste el diseño web como a mi. En esta ocasión, he diseñado este menú vertical en el que solo se ve una pestaña, pero que al posar el cursor sobre ella, se despliega como si fuera de papel. Esta confeccionado integramente con CSS3, quitando de los pequeños iconos que son imágenes en formato png transparente. El resultado es un menú original y visualmente atractivo, como podéis ver.

Para ponerlo en vuestro blog o web, tan solo tenéis que copiar el siguiente código y ponerlo en un Gadget HTML. Modificáis lo siguiente para adaptarlo a lo que queráis enlazar a vuestro gusto: Lo que esta en color rojo son las direcciones Urls, lo que esta en color verde es el texto de los enlaces y lo que esta en color violeta son las Urls de las imágenes de los iconos.

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<div class="menudesplegable"><a class="main">Menu</a><div class="sub first"><img src="http://png-4.findicons.com/files/icons/1254/flurry_system/32/home.png"><a href="https://blogimagenzero.blogspot.com.es/"><p><span>Inicio</span></a></p><div class="sub even"><img src="http://png-5.findicons.com/files/icons/2352/frankfurt/32/contact.png"><a href="https://blogimagenzero.blogspot.com.es//p/contacto_1.html"><p><span>Contacto</span></a></p><div class="sub odd">
<img alt="" src="http://png-4.findicons.com/files/icons/653/the_spherical/32/web.png"><a href="https://blogimagenzero.blogspot.com.es//p/webs-amigas.html"><p><span>Webs Amigas</span></a></p><div class="sub even">
<img alt="" src="http://png-4.findicons.com/files/icons/1588/farm_fresh_web/32/layout_content.png"><a href="https://blogimagenzero.blogspot.com.es//p/contenido.html"><p><span>Contenido</span></a></p><div class="sub odd last">
<img alt="" src="http://png-5.findicons.com/files/icons/753/gnome_desktop/32/gnome_emblem_photos.png"><a href="https://blogimagenzero.blogspot.com.es//p/banners_5.html"><p><span>Banners</span></a></p></div></div></div></div></div></div>

<style type="text/css">

.menudesplegable {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 10px 10px 0;}
.menudesplegable .sub p {font: normal 15px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 22px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 12px/15px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 30px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#F2F2F2 !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:2px solid #000000;
background-image: linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.16, rgb(0,102,153)),
color-stop(0.58, rgb(0,0,0))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style>

5-Da un clic en “Guardar”

Fecha:04/05/2018

Fuente:redeando

Publicado por:

featured imagen menú widget

5/04/2018

Carrusel de Imágenes con titulo y Redirección

Aquí traigo un carrusel para colocar imágenes en movimiento tanto para arriba ,hacia abajo, derecha y hacia la izquierda además las podéis redirigir y colocar un titulo a cada imagen.

El código que os dejo van incluidas cinco imágenes pero podéis colocar las que queráis en el ejemplo tenéis diez imágenes las tenéis que colocar antes del cierre: </a></marquee></center>.

Además podéis configurar color del fondo velocidad etc.Lo podéis colocar en una entrada o en un Widget en la barra lateral es un widget muy fácil de implementar pero como veréis laborioso como todos los carruseles de imagen y texto

donde tienes que colocar URL de la imagen y las de la dirección donde van redirigidas, bueno vamos al lío que hay curro que hacer.

Configuración:

Donde pone: marquee direction="up" podeís cambiar "up" hacia arriba, "down" hacia abajo, "left" de derecha a izquierda, "right" de izquierda a derecha .

Donde pone: scrollamount="2" es la velocidad de las imagenes cundo mas alta sea mas deprisa va

Donde pone: background-color: #642EFE el color del Fondo del Carrusel busca en el codigo de coloes el que mas te guste y lo cambias

Aquí pones el Titulo o el nombre que tu quieras: title="texto">

Donde pone:width:150px;height:150px Aquí colocas las medidas de las imagenes del Carrusel recuerda: width: ancho de tu imagen: height: alto de tu imagen

Si quieres cambiar el color y un borde mas ancho tienes que cambiar el valor de: border:2px solid #cccccc;

Aquí coloca la URL de donde quires que te dedirija cuando den click: href="PRIMER ENLACE"

Aquí La URL de la Imagen: src="URL DE TU PRIMERA IMAGEN"

Aquí elexto que quieres que vean:title="texto"