I
idumaya
Eta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola BETAS como van??? Espero muy bien
El dia de hoy vengo con un pequeño tutorial para blogger
el cual puede ser usado para poner en sitio de peliculas, series
o cualquiera tipo de video del que puedan obtener el iframe para compartirlo en su blog ''BLOGGER''
Estos son algunos ejemplos de sitios que usan este tipo de cuadros,
''los sitios mostrados a continuacion no necesariamente usan blogger como plataforma''
(gnula.nu)(pelis24)o al menos son parecidos,,
Pero bueno dejemonos de rodeos y empecemos
Lo primero que necesitaremos es obvio un blog, de la plataforma BLOGGER
1. Ecogemos o creamos el blog con el que vamos a trabajar
2. Vamos a la secccion ''Plantilla''
Como nos indica la flecha en la siguiente imagen
3. Hacemos clic o entraqmos en ''Editar HTML''
Como nos indica la flecha en la siguiente imagen
4. Una vez se abre esta ventana hacemos un clic dentro del codigo solo un clic, luego presionamos al mismo tiempo las teclas ''CTRL + F'' una sola vez, apenas aparesca el buscador como es ve en la imagen escribimos lo siguiente dentro del buscador:
Quedara como lo indica la Flecha naranja, Despues le das a buscar o presionas la tecla ENTER y aparecera algo como lo señala la Flecha azul
5. Ahora debes copiar el siguinte codigo y debes pegarlo encima de la palabra o codigo buscado anteriormente, como lo muestra la siguiente imagen.
6. Ahora en ese mismo cuador de busqueda escribimos o pegamos el siguiente codigo
le damos a buscar y cuando aparesca la primera opcion de arriba hacia abajo del codigo OJO debe ser la primera
Copiamos el siguiente codigo y lo pegamos antes de </head> como se vio en anterior punto
Luego de esto le damos a ''Guardar Plantilla''
7. Ahora veremos la parte donde debemos editar la entrada para poner los TABS DE VIDEO o CUADRO DE OPCIONES...
Para eso vamos a buscar la entrada donde vamos a colocarlo, alli vamos a pegar el siguiente codigo
Ahora presta atencion donde dice >Opción 1<, aqui escribiremos el nombre del video o lo que quieran
este debe concordar con esta linea <div id="tab1" class="contenido_tab"> que es la que indica que esa opcion 1 va ir ubicada dentro de este
Donde pone
<div id="tab1" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
Donde dice ''Agrega aqui el contenido & embed de Video'' aqui pondremos el codigo embed del video,
Vale destacar que tambien podemos ubicar textos e imagenes dentro de esta seccion...
Otra cosa si no saben como extraer o donde conseguir esos codigos de peliculas les dejo este otro tutorial que hice anteriormente para el foro http://forobeta.com/tutoriales/489077-obtener-codigo-embed-de-peliculas-otras-paginas.html
Amigos eso es todo no olviden si tienen alguna duda comentar en el post anteponiendo lo siguiente
para poder responder mas rapido sus dudas..
Y si les gusto pues no esta de mas que le des un me gusta
Hasta la proxima
El dia de hoy vengo con un pequeño tutorial para blogger
el cual puede ser usado para poner en sitio de peliculas, series
o cualquiera tipo de video del que puedan obtener el iframe para compartirlo en su blog ''BLOGGER''
Estos son algunos ejemplos de sitios que usan este tipo de cuadros,
''los sitios mostrados a continuacion no necesariamente usan blogger como plataforma''
(gnula.nu)(pelis24)o al menos son parecidos,,
Pero bueno dejemonos de rodeos y empecemos
Lo primero que necesitaremos es obvio un blog, de la plataforma BLOGGER
1. Ecogemos o creamos el blog con el que vamos a trabajar
2. Vamos a la secccion ''Plantilla''
Como nos indica la flecha en la siguiente imagen
3. Hacemos clic o entraqmos en ''Editar HTML''
Como nos indica la flecha en la siguiente imagen
4. Una vez se abre esta ventana hacemos un clic dentro del codigo solo un clic, luego presionamos al mismo tiempo las teclas ''CTRL + F'' una sola vez, apenas aparesca el buscador como es ve en la imagen escribimos lo siguiente dentro del buscador:
Insertar CODE, HTML o PHP:
[CENTER]]]></b:skin>[/CENTER]5. Ahora debes copiar el siguinte codigo y debes pegarlo encima de la palabra o codigo buscado anteriormente, como lo muestra la siguiente imagen.
Insertar CODE, HTML o PHP:
/* CSS Tabs jQuery */
.tabs{
margin: 0;
padding: 0;
}
.contenedor_tab{
color: #999;
float: left;
clear: both;
display: block;
width: 100%;
background-color: #F8F8F8;
margin-top: -1px;
border: 1px solid #E8E8E8;
}
ul.tabs li{
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
overflow: hidden;
position: relative;
text-transform: uppercase;
background-color: #E0E0E0;
border: 1px solid #F8F8F8;
outline: 1px solid #E8E8E8;
}
ul.tabs li a{
font-family: Arial;
text-decoration: none;
color: black;
display: block;
font-size: 13px;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover{background:#f8f8f8;
}
ul.tabs li.activa{
color: #999;
background-color: #F8F8F8;
outline: 0;
border-top: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
}
.contenido_tab{
padding: 10px;
font-size: 1.2em;
border-radius: 5px;
}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}6. Ahora en ese mismo cuador de busqueda escribimos o pegamos el siguiente codigo
Insertar CODE, HTML o PHP:
</head>Copiamos el siguiente codigo y lo pegamos antes de </head> como se vio en anterior punto
Insertar CODE, HTML o PHP:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>Luego de esto le damos a ''Guardar Plantilla''
7. Ahora veremos la parte donde debemos editar la entrada para poner los TABS DE VIDEO o CUADRO DE OPCIONES...
Para eso vamos a buscar la entrada donde vamos a colocarlo, alli vamos a pegar el siguiente codigo
Insertar CODE, HTML o PHP:
<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li>
<li><a href="#tab2">Opción 2</a></li>
<li><a href="#tab3">Opción 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
<div id="tab2" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
<div id="tab3" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
</div>
<div style="clear:both;">
</div>Ahora presta atencion donde dice >Opción 1<, aqui escribiremos el nombre del video o lo que quieran
este debe concordar con esta linea <div id="tab1" class="contenido_tab"> que es la que indica que esa opcion 1 va ir ubicada dentro de este
Donde pone
<div id="tab1" class="contenido_tab">
Agrega aqui el contenido & embed de Video
</div>
Donde dice ''Agrega aqui el contenido & embed de Video'' aqui pondremos el codigo embed del video,
Vale destacar que tambien podemos ubicar textos e imagenes dentro de esta seccion...
Otra cosa si no saben como extraer o donde conseguir esos codigos de peliculas les dejo este otro tutorial que hice anteriormente para el foro http://forobeta.com/tutoriales/489077-obtener-codigo-embed-de-peliculas-otras-paginas.html
Amigos eso es todo no olviden si tienen alguna duda comentar en el post anteponiendo lo siguiente
Insertar CODE, HTML o PHP:
@idumayaY si les gusto pues no esta de mas que le des un me gusta
Hasta la proxima
