MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Caja multifuncional tipo slide vertical

Su instalación es de lo más fácil posible, solo hay que copiar el código y pegarlo en un gadget HTML de vuestro blog

gadget seguidores sociales

Ver Demo



<style>
#slide-vertical{text-align:left; width:98%;}
.slideHolder { width:100%; margin:0;padding:2px;font-family:georgia, serif; float:left;}
.slideOuter { width:100%; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none; width:100%; overflow:hidden;}
.slideOuter .slide li {display:block; float:left; height:78px;border-bottom:2px solid #fff; width:100%; overflow:hidden;transition: 0.75s;}
.slideOuter .slide.current li {height:38px;}
.slideOuter .slide li.p1{background:#3173d1;}
.slideOuter .slide li.p2{background:#C10808;}
.slideOuter .slide li.p3{background:#D7EAFB;}
.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3
{height:38px;}
.slideOuter .slide:hover li.p1:hover {height:315px;}
.slideOuter .slide:hover li.p4:hover {height:330px;}
.slideOuter .slide:hover li.p2:hover {height:330px}
.slideOuter .slide:hover li.p3:hover {height:330px}
.slideOuter .slide li span {padding:0 15px; margin:0; font-size:18px;font-weight:700;line-height:48px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);cursor:pointer}
.slideOuter .slide li {color:#fff;}
.slideOuter .slide li.p2 span,
.slideOuter .slide li.p3 span {color:#fff;}
.slideOuter .slide li.p2 .content {padding:0 15px;margin:0;width:100%;}
</style>
<div id="slide-vertical">
<div class="slideHolder">
<div class="slideOuter">
<ul class="slide current">
<li class="p1">
<div>
<span> TITULO DE LA PESTAÑA 1</span>
<div class="content">
COLOCA AQUI  LO QUE DESEES COMPARTIR (imágenes, texto, enlaces, widgets, etc.</div>
</div></li>
<li class="p2 current">
<div>
<span>TITULO DE LA PESTAÑA 2 </span>
<div class="content">
COLOCA AQUI LO QUE DESEES COMPARTIR
</div>
</li>
<li class="p3">
<div>
<span>TITULO DE LA PESTAÑA 3</span>
<div class="content">
COLOCA AQUI LO QUE DESEES COMPARTIR
</div></li>
</ul>
</div>
</div>
</div>



MODIFICACIONES:
CAMBIA LOS TITULOS DE LAS PESTAÑAS

COLOCA LOS GADGETS, WIDGETS, IMAGENES, ENLACES  O TEXTO QUE DESEES EN CADA PESTAÑA.

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者