Galería de Videos con Coda Slider

El procedimiento es similar al otro slider, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='URL del archivo jquery-easing-1.3.pack.js'/>
<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>
<script src='URL del archivo coda-slider.1.1.1.pack.js'/>

<script type='text/javascript'>
//<![CDATA[

$(function() {
$("#main-video-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
//]]>
</script>

Ahí coloca donde se indica las URLs de los archivos que subiste previamente.
Luego antes de ]]></b:skin> coloca los estilos de la galería:

/* Coda Slider (Video)
----------------------------------------------- */
#page-wrap {
width: 490px; /* Ancho del contenedor general */
min-height: 354px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGHP5KFoVligD70JwnyaKSClCv2KyCTgeTH7h7_hzAhy2ZaulgT83N6cgBzDAZYoxfgjnSRBAHywedVBAjXw7Ig31TBQgkSTe8foy7UFaNKn2bRLKV06igH7JQKGjySe5ADhwnTCKWohk/s490/vid-bg.png) top center no-repeat;
}
.slider-wrap {
width: 450px;
position: absolute;
top: 20px;
left: 20px;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 450px; /* Ancho del contenedor de los videos */
height: 274px; /* Alto del contenedor de los videos */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 450px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px;}
#movers-row { margin: -39px 0 0 62px; }
#movers-row div { width: 16.6%; float: left; }
#movers-row div a.cross-link { float: right; }
.cross-link { display: block; width: 58px; margin-top: -10px; position: relative; padding-top: 3px; z-index: 100; }

El tercer paso es entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript (para la interfaz antigua), o Diseño | Añadir gadget | HTML/Javascript (para la interfaz nueva). Ahí pega este código:

<div id="page-wrap">
<div class="slider-wrap">
<div class="csw" id="main-video-slider">
<div class="panelContainer">

<div class="panel" title="Panel 1">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_UNO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 2">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_DOS" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 3">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_TRES" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 4">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CUATRO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 5">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CINCO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 6">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SEIS" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 7">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SIETE" frameborder="0" allowfullscreen></iframe>

</div></div>

</div></div>
<!-- Estas son las MINIATURAS de los videos -->

<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_UNO/1.jpg" width='58px'/></a>

<div id='movers-row'>

<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_DOS/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_TRES/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CUATRO/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CINCO/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SEIS/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#7'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SIETE/1.jpg" width='58px'/></a></div>

</div>
</div></div>

Como puedes ver, la ID del video debes colocarla dos veces, una es para el video, y otra para la imagen en miniatura del video.

También puedes poner videos de otros servicios, sólo debes eliminar un código como este:

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE" frameborder="0" allowfullscreen></iframe>

Y en su lugar deberás poner el código de tu video, que deberá medir 450px de ancho y 274px de alto. También deberás cambiar la URL de la imagen de la miniatura:

<img class='nav-thumb' height='40px' src="URL de la imagen" width='58px'/>

Es una galería de videos sencilla pero que puede verse muy bien arriba de las entradas del blog, y si la usamos sólo para videos de YouTube entonces será menos complicado.