¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
IDTabs para videos Online Blogger
#1
Bueno 
0
[Imagen: IDTabs-jquery-videos-online-reproductores.jpg]

Paso 1 - JavaScript

lo principal para que nuestro tabs funcionen es el jquery, si ya tienen una version instalada en sus webs pueden omitir este paso, los que no lo tienen aun agreguen este codigo arriba de "</head>"

Código PHP:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
y listo, ahora necesitaremos agregaremos el codigo para hacer funcionar el tooltip de cada opcion, al igual que el jquery solo agreguen este codigo arriba de "</head>"
<script type="text/javascript" src="http://encript-s.googlecode.com/svn/trunk/jquery.tipsy.js"></script>
ya para terminar con el codigo JS copiaremos todo el siguiente codigo y lo agregaremos nuevamente arriba de "</head>":
<script type="text/javascript">
  $(function() {
    $("#Zk-gb a[title]").tipsy({gravity: 's'});
  });
</script>
<script>
$(document).ready(function() {
    $("#cuerpo-tabs div.box-vd").hide(); //Ocultamos todos los tabs
    $("#Zk-tabs li:first").attr("id","active"); // Activamos el primer li
    $("#cuerpo-tabs div.box-vd:first").fadeIn(); //Activamos el primer tab
    
    $('#Zk-tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "active"){ //Detectamos el tab ejecutado
         return       
        }
        else{             
        $("#cuerpo-tabs div.box-vd").hide(); //Ocultamos todos los tabs
        $("#Zk-tabs li").attr("id",""); //Borramos los id's
        $(this).parent().attr("id","active"); //Si esta activo agregamos el id
        $('#' + $(this).attr('name')).fadeIn(); //Mostramos solo el tab que este activo
        }
    });
});
</script> 

Paso 2 - CSS

Ahora procederemos a instalar el CSS lo cual acomodara todo en su sitio y le dara un bune aspecto, para hcerlo simplemente copien todo el codigo siguiente y agreguenlo a su sitio web o blog, en el caso de blogger lo agregaremos arriba de "]]></b:skin>"

Código PHP:
#Zk-gb {
    
height454px;
    
margin40px 0 10px 20px;
    
positionrelative;
    
width720px;
}

#Zk-tabs {
    
background#262626;
    
background-imagelinear-gradient(bottom#262626 0%, #505050 100%);
    
background-image: -o-linear-gradient(bottom#262626 0%, #505050 100%);
    
background-image: -moz-linear-gradient(bottom#262626 0%, #505050 100%);
    
background-image: -webkit-linear-gradient(bottom#262626 0%, #505050 100%);
    
background-image: -ms-linear-gradient(bottom#262626 0%, #505050 100%);
    
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0#262626),color-stop(1, #505050));
    
border-color#111;
    
border-radius5px 5px 0 0;
    
border-stylesolid;
    
border-width2px;
    
box-shadow0 1px 0 0 rgba(2552552550.15inset;
    
height30px;
    list-
stylenone outside none;
    
margin0;
    
padding0;
}

#Zk-tabs li {
    
floatleft;
    
border-right1px solid #242424;
}
#Zk-tabs li > a {
    
color#DDDDDD;
    
displayblock;
    
font-familyarial;
    
font-size10px;
    
font-weightbold;
    
height14px !important;
    
line-height14px !important;
    
padding8px 25px;
    
text-decorationnone !important;
    
text-shadow-1px 1px #000000;
    
text-transformuppercase;
}
#Zk-tabs li#active {
    
backgroundrgba(2552552550.1);
    
positionrelative;
}
#Zk-tabs li#active > a {
    
border-bottom2px solid #006CC0;
}
.
box-video {
    
background#000;
    
height400px;
    
overflowhidden;
    
padding10px;
    
positionrelative;
    
width700px;
}

.
tipsy 
    
padding5px;
    
font-size10px;
    
font-family:ArialHelveticasans-serif;
    
opacity0.8;
    
filteralpha(opacity=80);
    
background-repeatno-repeat
    
background-imageurl("https://lh6.googleusercontent.com/-GDf46JEhnMo/UdC3mahwcFI/AAAAAAAAFtg/Gd6E4GOPaOM/s1600/tipsy.gif");
}

.
tipsy-inner 
    
padding5px 8px 4px 8px;
    
background-colorblack;
    
colorwhite;
    
max-width200px;
    
text-aligncenter;
}
.
tipsy-inner {border-radius:3px;}
.
tipsy-north {background-positiontop center;}
.
tipsy-south {background-positionbottom center;}
.
tipsy-east {background-positionright center;}
.
tipsy-west {background-positionleft center;}

.
copy {
    
displayblock;
    
positionabsolute;
    
right10px;
    
top4px;
}

.
copy {
    
backgroundurl("https://lh5.googleusercontent.com/-p7OeB6eyOo8/UdDALnuqPAI/AAAAAAAAFtw/6JJW8xOwjYE/s1600/zk-ico.png"no-repeat scroll 0 0 transparent;
    
displayblock;
    
height25px;
    
width36px;


Paso 3 - HTML

Por ultimo ya solo nos queda formar la estructura html la cual la ubicaremos en donde deseemos usar el idTabs, copiaremos todo el siguiente codigo html y pegaremos en donde queramos usar

Código PHP:
<div id="Zk-gb">
<
ul id="Zk-tabs">
    <
li><a title="Vkontakte" href="#" name="tab1">OPCION 1</a></li>
    <
li><a title="NowVideo" href="#" name="tab2">OPCION 2</a></li>
    <
li><a title="Rutube" href="#" name="tab3">OPCION 3</a></li>
    <
li><a title="Putlocker" href="#" name="tab4">OPCION 4</a></li>
    <
li><a title="Novamov" href="#" name="tab5">OPCION 5</a></li>
    <
li><a title="Videoweed" href="#" name="tab6">OPCION 6</a></li>
    
</
ul>
<
span class="copy"><a title="Z+Kreations" href="http://css.zanime-mf.com/" target="_blank"></a></span>
<
div id="cuerpo-tabs"

<!-- 
Vkontakte -->
    <
div class="box-vd" id="tab1">
    <
div class="box-video">
    <
iframe src="http://vk.com/video_ext.php?ID del video" width="700" height="400" frameborder="0"></iframe>
    </
div>
    </
div>

<!-- 
NowVideo --> 
    <
div class="box-vd" id="tab2">
    <
div class="box-video">
    <
iframe width="700" scrolling="no" height="400" frameborder="0" src="http://embed.nowvideo.eu/embed.php?v=ID del video&width=700&height=400"></iframe>
    </
div>
    </
div>

<!-- 
Rutube --> 
    <
div class="box-vd" id="tab3">
    <
div class="box-video">
    <
embed width="700" height="400" allownetworking="internal" allowfullscreen="true" wmode="transparent" autoplay="false" type="application/x-shockwave-flash" src="http://video.rutube.ru/ID del video"></embed>
    </
div>
    </
div>

<!-- 
Putlocker --> 
    <
div class="box-vd" id="tab4">
    <
div class="box-video">
    <
iframe width="700" scrolling="no" height="400" frameborder="0" src="http://www.putlocker.com/embed/ID del video"></iframe>
    </
div>
    </
div>

<!-- 
Novamov --> 
    <
div class="box-vd" id="tab5">  
    <
div class="box-video">  
    <
iframe style='overflow: hidden; border: 0; width: 700px; height: 400px' src='http://embed.novamov.com/embed.php?width=700&height=400&v=ID del video&px=1' scrolling='no'></iframe>
    </
div>
    </
div>

<!-- 
Videoweed --> 
    <
div class="box-vd" id="tab6">
    <
div class="box-video">
    <
iframe width="700" height="400" frameborder="0" src="http://embed.videoweed.es/embed.php?v=ID del video&width=700&height=400" scrolling="no"></iframe>
    </
div>
    </
div>
     
</
div>
</
div

Creditos a su creador
http://css.zanime-mf.com/2013/06/idtabs-...query.html

#2
0
Excelenteee !
Lo anterior es, probablemente, mi sarcasmo habitual y no refleja en absoluto mi opinión real.
Puedo incluir sutilezas de la rareza, suficiente como para aparecer a los incautos como un galimatías total.


Si te ayude o te gusto mi aporte no te olvides de poner [Imagen: plus_post.png]


[Imagen: b1WJVXP.png]



Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Tutorial Programas útiles y gratuitos para desarrollo web Kevin Alfonso 2 813 30-04-2016, 11:00 PM
Último mensaje: piinbook
  Tutorial 18 Tutoriales Dreamweaver para diseñadores web Kevin Alfonso 0 744 01-03-2016, 11:27 PM
Último mensaje: Kevin Alfonso
  35 Plantillas Dreamweaver gratis para Descargar Kevin Alfonso 0 8,062 01-03-2016, 11:14 PM
Último mensaje: Kevin Alfonso
  Plantillas gratuitas para blogger Ihering 0 895 10-04-2015, 08:23 PM
Último mensaje: Ihering
  Software gratuito para gestion de bibliotecas asanbus 12 3,011 09-04-2015, 01:32 PM
Último mensaje: Ihering



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018