Comparte tus videos de Youtube con tus visitantes.
Que no se quede atras tu canal de Youtube si no conocen tus videos como van a saber que los tienes.
Esta caja de enlaces a tus videos de youtube consta de una estructura en html que colocas dentro del body de tu pagina web y unos estilos css que debes agregar a la hoja de estilos de tu web o bien dentro de el head como es el caso de jimdo cuando no se tiene plantilla propia.
El codigo HTML que debes colocar en el <body> de tu web es el siguiente:(en jimdo añade nuevo modulo - widget]/html pegas y das guardar)
<div id="no-related-yt">
<div style="display:block;height:30px;width:100%;" >
<span class="no-yt-user">Nontoyontoy:</span>
<span class="no-yt-annotation">Videos que te pueden interesar</span>
</div>
<ul>
<li class="no-yt-thumb"><a class="no-video-thumb" href="https://www.youtube.com/watch?v=dFycLdM1liE" target="_blank"><img src="https://i.ytimg.com/vi_webp/dFycLdM1liE/mqdefault.webp"/></a>
<a href="https://www.youtube.com/watch?v=dFycLdM1liE" class="no-yt-title">Lista de reproduccion de videos eh HTML</a>
</li>
<li class="no-yt-thumb"><a class="no-video-thumb" href="https://www.youtube.com/watch?v=a1QgeTPmXfA" target="_blank"><img src="https://i.ytimg.com/vi_webp/a1QgeTPmXfA/mqdefault.webp"/></a>
<a href="https://www.youtube.com/watch?v=a1QgeTPmXfA" class="no-yt-title">Cambia las fuentes de tu web con Google fonts</a>
</li>
<li class="no-yt-thumb"><a class="no-video-thumb" href="https://www.youtube.com/watch?v=y2MH5Fmm5ww" target="_blank"><img src="https://i.ytimg.com/vi_webp/y2MH5Fmm5ww/mqdefault.webp"/></a>
<a href="https://www.youtube.com/watch?v=y2MH5Fmm5ww" class="no-yt-title">Mira como cambiar el color a facebook facil rapido y ..</a>
</li>
</ul>
</div>
Si tienes permiso de escribir dentro de tu hoja de estilos CSS copia todo excepto lo de color naranja, si de lo contrario no puedes escribir dentro de tu hoja de estilos pero si en el <head> entonces copia todo completo y pegalo tal como está.( en jimdo ve a ajustes - editar head pegas y das guardar)
<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500);
#no-related-yt {
width: 100%;
display: block;
border: 1px solid #e2e2e2;
background-color: #FFFFFF;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#no-related-yt .no-yt-user {
font-family: 'Roboto', sans-serif !important;
height: 30px;
display: block;
font-size: 15px !important;
line-height: 30px !important;
color: #333333 !important;
text-indent: 20px;
font-weight: 500 !important;
float: left;
}
#no-related-yt .no-yt-annotation{
display: block;
font-family: 'Roboto', sans-serif !important;
line-height: 30px !important;
font-size: 12px !important;
color: #767676 !important;
font-weight: normal !important;
text-indent: 10px;
}
#no-related-yt ul{
width: 100%;
height: 146px;
padding: 0px;
list-style-type: none;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
overflow: hidden;
}
li.no-yt-thumb {
display: inline-block;
width: 196px;
overflow: hidden;
height: 146px;
margin-right: 3px;
}
li.no-yt-thumb .no-video-thumb{
height: 110px;
width: 196px;
overflow: hidden;
display: block;
}
.no-video-thumb img:hover{opacity:0.4;}
li.no-yt-thumb img{
height: 110px;
width: 196px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
li.no-yt-thumb .no-yt-title{
font-family: 'Roboto', sans-serif !important;
width: 100%;
display: block;
line-height: 18px !important;
font-size: 13px !important;
color: #167ac6 !important;
max-height: 36px !important;
margin: 0px;
padding: 0px;
overflow: hidden;
text-decoration: none !important;
font-weight: 500;
}
li.no-yt-thumb:hover a.no-yt-title{text-decoration:underline !important;}
-->
</style>
Ahora que hayas copiado todo guarda los cambios y el resultado debe ser igual a la imagen de arriba. Para editarlo y cambiar mis datos por los tuyos indentifica en el codigo html las etiquetas li y en ellas podras todos los datos de tu video que quieres compartir, por ejemplo:
<li class="no-yt-thumb"><a class="no-video-thumb" href="https://www.youtube.com/watch?v=dFycLdM1liE" target="_blank"><img src="https://i.ytimg.com/vi_webp/dFycLdM1liE/mqdefault.webp"/></a>
<a href="https://www.youtube.com/watch?v=dFycLdM1liE" class="no-yt-title">Lista de reproduccion de videos en HTML</a>
</li>
Los enlaces marcados en rojo son repetidos del video que quieres compartir, lo que esta marcado en azul es la imagen miniatura del video y en las letras mas oscuras se encuentra el titulo del video, ten cuidado a la hora de cambiar los datos con no borrar los signos de las etiquetas o las comillas ya que puede perderse la estructura del codigo.
Esta etiqueta li puedes repetir o quitar dependiendo como sea necesario, si colocas etiquetas li de mas y el ancho de tu pagina es pequeño solo se mostrarán algunos que serian las del principio.
Para obtener el enlace de la imagen miniatura del video vé a tu canal entra a tus videos e identifica que video vas a compartir luego das click derecho sobre la imagen miniatura que tiene el video y das en copiar URL de imagen este enlace es el que marqué con azul en el codigo, los enlaces en rojo son enlaces a tu video igualmente como le hiciste pero ahora eliges copiar direccion de enlace y listo solo colocas el titulo.
Solo falta una cosa y es cambiar el nombre de mi canal que esta al principio del codigo html en una etiqueta span:
<span class="no-yt-user">Nontoyontoy:</span>
Espero les quede claro cualquier duda responderé en los comentarios.Visiten mi canal de youtube.
Escribir comentario
Los mejores juegos android en 2018 (domingo, 18 febrero 2018 21:17)
https://youtu.be/jnp3wfuedZE