Código para agregar Tabs a web de películas

D

Darwin Fernandez

Hola amigos de ForoBeta alguien de ustedes tiene el código para agregar Tabs , necesito agregar Tabs para videos para una web de películas , alguien que sepa o tenga si podría ser tan amable de decirme por favor :/

Gracias de antemano

Saludos !
 
kanikase

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
Yo se cómo :welcoming:

- - - Actualizado - - -

Bueno, te recomiendo que las iframes desde otro blog, para si alguien te las roba, puedas agregar tu publicidad como yo lo hago.
1.- Creas un nuevo blog, instalas la plantilla que esta más abajo.
2.- En la entrada pegas el siguiente código:
HTML: 
<!-- REPRODUCTORES -->
<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1">Opcion 1 </a></li>
<li><a href="#tab2">Opcion 2 </a></li>
<li><a href="#tab3">Opcion 3 </a></li>
<li><a href="#tab4">Trailer </a></li>
</ul>
<div class="clear"/>
<div class="tab-wrapper">
<div class="tabber" id="tab1">
<div id="vk"><iframe src="http://hqq.tv/player/embed_player.php?vid=8DSX5H4UN39O&autoplay=no" height="340" width="610" style="z-index:2147483647;" webkitAllowFullScreen mozallowfullscreen allowfullscreen frameborder="0" scrolling="no"></iframe></div></div>
<div class="tabber" id="tab2">
<div id="vk"><iframe src='http://api.video.mail.ru/videos/embed/mail/gottsu01/_myvideo/3116.html' width='610' height='340' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>
<div class="tabber" id="tab3">
<div id="vk"><script>vp("36c3ff894c3c4312b06dbf580a4402be");</script></div></div>
<div class="tabber" id="tab4">
<div id="vk">
<script>yt("UVMibecR6cY");</script></div>
</div>
<div class="clear"/>
</div>
</div>

4.- En la web donde aparecerán las películas iframas esta entrada con el codigo:
HTML: 
<iframe src='LINK-DE-LA-ENTRADA' frameborder'0' width='620' height='400'></iframe>

Y nya tendrás las tabs con opciones, solo cambia las peliculas o videos, pero si no lo quieres hacer así, en tu plantilla antes de </head> agrega:
HTML: 
<style>
body{margin:0}
/*TABS REPRODUCTORES*/
ul.tab-view {
float: left;
list-style: none;
height: 30px;
width: 610PX;
margin: 0;
padding: 5px;
font: 14px Arial;
background: rgba(77, 77, 77, 1);
}
ul.tab-view li{float:left;height:31px;line-height:31px;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#fec700;display:block;outline:none;font-weight:700;padding:0 15px}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{color:#000;background:#fec700;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;text-shadow:none;}
.tab-wrapper {
overflow: hidden;
clear: both;
float: left;
margin-bottom: 10px;
background: rgba(77, 77, 77, 1);
}
.tabber{padding:5px}
.tabber .column{float:left;display:inline;width:163px;height: 254px;margin:7px 11px 5px 0;padding:2px 3px 5px;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
.tabber .column_img{border:5px solid #555;width:140px;height:180px;margin:10px 6px 5px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;}
.tabber .column_img:hover{border:5px solid #000;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
.tabber h2{font:bold 11px Arial;line-height:14px;margin:0 5px 5px;text-align:center;text-shadow:1px 1px 1px #000}
.tabber h2 a{color:#ccc}
.tabber h2 a:hover{color:#fec700}
</style>
<script src='https://dl.dropboxusercontent.com/s/16yvbb18zwauzcp/reproductores.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/ri201thxmpvjnh7/tabs.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/j3x15mkglgvthxs/tabs2.js' type='text/javascript'/>
<script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
Y en la entrada es exatamente igual, pero sin iframar la entrada del otro blog. :D

Si no entendiste manda un mp en facebook para ayudarte.

DEMO Pelicula 1 - Peliculas
 

Adjuntos

  • template-7958274335056299903.zip
    7,7 KB · Visitas: 15
Última edición:
J

JesusEC

Préstamo
Iota
Redactor
Desde
6 Abr 2012
Mensajes
2.138
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Puedo instalarlo en blogger?
kanikase dijo:
Yo se cómo :welcoming:

- - - Actualizado - - -

Bueno, te recomiendo que las iframes desde otro blog, para si alguien te las roba, puedas agregar tu publicidad como yo lo hago.
1.- Creas un nuevo blog, instalas la plantilla que esta más abajo.
2.- En la entrada pegas el siguiente código:
HTML: 
<!-- REPRODUCTORES -->
<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1">Opcion 1 </a></li>
<li><a href="#tab2">Opcion 2 </a></li>
<li><a href="#tab3">Opcion 3 </a></li>
<li><a href="#tab4">Trailer </a></li>
</ul>
<div class="clear"/>
<div class="tab-wrapper">
<div class="tabber" id="tab1">
<div id="vk"><iframe src="http://hqq.tv/player/embed_player.php?vid=8DSX5H4UN39O&autoplay=no" height="340" width="610" style="z-index:2147483647;" webkitAllowFullScreen mozallowfullscreen allowfullscreen frameborder="0" scrolling="no"></iframe></div></div>
<div class="tabber" id="tab2">
<div id="vk"><iframe src='http://api.video.mail.ru/videos/embed/mail/gottsu01/_myvideo/3116.html' width='610' height='340' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>
<div class="tabber" id="tab3">
<div id="vk"><script>vp("36c3ff894c3c4312b06dbf580a4402be");</script></div></div>
<div class="tabber" id="tab4">
<div id="vk">
<script>yt("UVMibecR6cY");</script></div>
</div>
<div class="clear"/>
</div>
</div>

4.- En la web donde aparecerán las películas iframas esta entrada con el codigo:
HTML: 
<iframe src='LINK-DE-LA-ENTRADA' frameborder'0' width='620' height='400'></iframe>

Y nya tendrás las tabs con opciones, solo cambia las peliculas o videos, pero si no lo quieres hacer así, en tu plantilla antes de </head> agrega:
HTML: 
<style>
body{margin:0}
/*TABS REPRODUCTORES*/
ul.tab-view {
float: left;
list-style: none;
height: 30px;
width: 610PX;
margin: 0;
padding: 5px;
font: 14px Arial;
background: rgba(77, 77, 77, 1);
}
ul.tab-view li{float:left;height:31px;line-height:31px;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#fec700;display:block;outline:none;font-weight:700;padding:0 15px}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{color:#000;background:#fec700;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;text-shadow:none;}
.tab-wrapper {
overflow: hidden;
clear: both;
float: left;
margin-bottom: 10px;
background: rgba(77, 77, 77, 1);
}
.tabber{padding:5px}
.tabber .column{float:left;display:inline;width:163px;height: 254px;margin:7px 11px 5px 0;padding:2px 3px 5px;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
.tabber .column_img{border:5px solid #555;width:140px;height:180px;margin:10px 6px 5px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;}
.tabber .column_img:hover{border:5px solid #000;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
.tabber h2{font:bold 11px Arial;line-height:14px;margin:0 5px 5px;text-align:center;text-shadow:1px 1px 1px #000}
.tabber h2 a{color:#ccc}
.tabber h2 a:hover{color:#fec700}
</style>
<script src='https://dl.dropboxusercontent.com/s/16yvbb18zwauzcp/reproductores.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/ri201thxmpvjnh7/tabs.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/j3x15mkglgvthxs/tabs2.js' type='text/javascript'/>
<script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
Y en la entrada es exatamente igual, pero sin iframar la entrada del otro blog. :D

Si no entendiste manda un mp en facebook para ayudarte.

DEMO Pelicula 1 - Peliculas
Hacer clic para expandir...
 
kanikase

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
ecualink dijo:
Puedo instalarlo en blogger?
Hacer clic para expandir...

Si, por cierto ahí agregue un javascript, para insertar las peliculas más facil, lo que hace es, que por ejemplo para poner pelicula de vk se pone así:

<script>vk('ID-PELICULA')</script>.

Soporta:
VK = <script>vk('ID-PELICULA')</script>
Putlocker = <script>pl('ID-PELICULA')</script>
Vimple = <script>vp('ID-PELICULA')</script>
YouTube = <script>yt('ID-PELICULA')</script>

:welcoming:
 
J

JesusEC

Préstamo
Iota
Redactor
Desde
6 Abr 2012
Mensajes
2.138
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Gracias por la ayuda.
kanikase dijo:
Si, por cierto ahí agregue un javascript, para insertar las peliculas más facil, lo que hace es, que por ejemplo para poner pelicula de vk se pone así:

<script>vk('ID-PELICULA')</script>.

Soporta:
VK = <script>vk('ID-PELICULA')</script>
Putlocker = <script>pl('ID-PELICULA')</script>
Vimple = <script>vp('ID-PELICULA')</script>
YouTube = <script>yt('ID-PELICULA')</script>

:welcoming:
Hacer clic para expandir...
 
D

Darwin Fernandez

kanikase dijo:
Yo se cómo :welcoming:

- - - Actualizado - - -

Bueno, te recomiendo que las iframes desde otro blog, para si alguien te las roba, puedas agregar tu publicidad como yo lo hago.
1.- Creas un nuevo blog, instalas la plantilla que esta más abajo.
2.- En la entrada pegas el siguiente código:
HTML: 
<!-- REPRODUCTORES -->
<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1">Opcion 1 </a></li>
<li><a href="#tab2">Opcion 2 </a></li>
<li><a href="#tab3">Opcion 3 </a></li>
<li><a href="#tab4">Trailer </a></li>
</ul>
<div class="clear"/>
<div class="tab-wrapper">
<div class="tabber" id="tab1">
<div id="vk"><iframe src="http://hqq.tv/player/embed_player.php?vid=8DSX5H4UN39O&autoplay=no" height="340" width="610" style="z-index:2147483647;" webkitAllowFullScreen mozallowfullscreen allowfullscreen frameborder="0" scrolling="no"></iframe></div></div>
<div class="tabber" id="tab2">
<div id="vk"><iframe src='http://api.video.mail.ru/videos/embed/mail/gottsu01/_myvideo/3116.html' width='610' height='340' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>
<div class="tabber" id="tab3">
<div id="vk"><script>vp("36c3ff894c3c4312b06dbf580a4402be");</script></div></div>
<div class="tabber" id="tab4">
<div id="vk">
<script>yt("UVMibecR6cY");</script></div>
</div>
<div class="clear"/>
</div>
</div>

4.- En la web donde aparecerán las películas iframas esta entrada con el codigo:
HTML: 
<iframe src='LINK-DE-LA-ENTRADA' frameborder'0' width='620' height='400'></iframe>

Y nya tendrás las tabs con opciones, solo cambia las peliculas o videos, pero si no lo quieres hacer así, en tu plantilla antes de </head> agrega:
HTML: 
<style>
body{margin:0}
/*TABS REPRODUCTORES*/
ul.tab-view {
float: left;
list-style: none;
height: 30px;
width: 610PX;
margin: 0;
padding: 5px;
font: 14px Arial;
background: rgba(77, 77, 77, 1);
}
ul.tab-view li{float:left;height:31px;line-height:31px;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#fec700;display:block;outline:none;font-weight:700;padding:0 15px}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{color:#000;background:#fec700;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;text-shadow:none;}
.tab-wrapper {
overflow: hidden;
clear: both;
float: left;
margin-bottom: 10px;
background: rgba(77, 77, 77, 1);
}
.tabber{padding:5px}
.tabber .column{float:left;display:inline;width:163px;height: 254px;margin:7px 11px 5px 0;padding:2px 3px 5px;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
.tabber .column_img{border:5px solid #555;width:140px;height:180px;margin:10px 6px 5px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;}
.tabber .column_img:hover{border:5px solid #000;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
.tabber h2{font:bold 11px Arial;line-height:14px;margin:0 5px 5px;text-align:center;text-shadow:1px 1px 1px #000}
.tabber h2 a{color:#ccc}
.tabber h2 a:hover{color:#fec700}
</style>
<script src='https://dl.dropboxusercontent.com/s/16yvbb18zwauzcp/reproductores.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/ri201thxmpvjnh7/tabs.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/j3x15mkglgvthxs/tabs2.js' type='text/javascript'/>
<script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
Y en la entrada es exatamente igual, pero sin iframar la entrada del otro blog. :D

Si no entendiste manda un mp en facebook para ayudarte.

DEMO Pelicula 1 - Peliculas
Hacer clic para expandir...

Si justo habia visto tu tutorial anterior de como agregarlo Tabs se ve muy bonito pero me pregunto si habra otro modelo o forma mm no se si me explico bien :/
 
Hay que estar conectado o registrado para responder aquí.
Arriba