Dragon ball (Battle Of The Gods)

Sinopsis:

 La película tiene lugar después de la Saga de Majin Buu de Dragon Ball Z, tras la derrota de Kid Buu, pero antes del 28° Torneo Mundial de Artes las Marciales (como El ataque del dragón y ¡Hey! Goku y sus amigos regresan). 

Descripción:
Título Original Doragon Boru Zetto: Shin a Kami
Genero Acción, Animación
Duración 01:25:00
País Japón
 Director Masahiro Hosoda
Actores-
Censura Apta para todos

Gadget Pajaro Twiitter Rapero&Navideño

PAJARO TWITTER

Da un clic en “Diseño”, luego da un clic en “Añadir un gadget” y busca el widget que dice “HTML/javascript”, ábrelo e inserta el siguiente código en su interior.

<script src="http://plantillasgratis.comuv.com/disemucho/pajaro_twitter_navidad/twitter/disemucho.js" type="text/javascript"> </script><script type="text/javascript"> //<![CDATA[ var birdSprite='http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i74d3c1fb8ca6cc62/1341875120/std/image.png'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button', 'select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span'); var twitterAccount = 'Aqui tu Twitter'; var twitterThisText ='Sigueme en Twitter'; tripleflapInit(); //]]> </script>

Pajaro Navideño

<script src="http://plantillasgratis.comuv.com/disemucho/pajaro_twitter_navidad/twitter/disemucho.js" type="text/javascript"> </script> <script type="text/javascript"> //<![CDATA[ var birdSprite='http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i8b711531294e44fd/1323739764/std/image.png'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button', 'select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span'); var twitterAccount = 'Aqui tu Twitter'; var twitterThisText ='Sigueme en Twitter'; tripleflapInit(); //]]> </script>

Solo tienes que cambiar dond dice "Aqui tu Twitter" Por tu Twitter

widget Botones Redes Sociales

Tener un buen widget de redes sociales en nuestro blog de blogger, es algo necesario para nuestro blog. Atraer a los usuarios que visitan nuestros blogs con buenos efectos y así animarlos a que se suscriban en nuestros perfiles de redes sociales, es darse a conocer mucho más en el ámbito del internet. La intención es que nuestros visitantes puedan suscribirse en las diferentes redes sociales y así compartir con ellos nuestras nuevas actualizaciones. No vamos a insertar ningún Javascript ni tampoco un Jquery, todo el código esta implementado para hacer fácil su instalación. El código es basado en líneas CSS el cual le dará un efecto a su widget de redessociales. También podrás ver un widget de redes sociales en este enlace, Widget de redes sociales para blogger.

Ahora vamos a implementar el Widget de redes sociales en nuestro blog de blogger

Da un clic en “Diseño”, luego da un clic en “Añadir un gadget” y busca el widget que dice “HTML/javascript”, ábrelo e inserta el siguiente código en su interior.

<!--Botones sociales Widget By http://ayudabloggerss.blogspot.com-->

<style>

#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}

#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}

#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfPT5C4C2vNyN5pwNcq_Inck_5okwQRLKo2BB9DWGfxCaAIdF8obgP3tolHMXgVAcKOyKcA8ZeBLwBeoBZF0dHV75DDqkkH5bPfyzITOwSNbtlpewDTR1EwtLRbp3e5IJqSnCfhzYcKEw/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}

#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}

#tbisose .icon{overflow:hidden; color:#fafafa;}

#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}

#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}

#tbisose li:hover .icon,

.touch #tbisose li .icon{width:210px;}

.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}

.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}

.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}

.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}

.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}

</style>

<ul id="tbisose">

<li data-alt="Sigueme en Facebook"><a class="icon facebook" href="http://www.facebook.com/pages/">Sigueme en Facebook</a></li>

<li data-alt="Sigueme en Twitter"><a class="icon twitter" href="https://www.twitter.com/r">Sigueme en Twitter</a></li>

<li data-alt="Sigueme en Google+"><a class="icon googleplus" href="https://plus.google.com/114283163993086871162">Sigueme en Google+</a></li>

<li data-alt="Sigueme en Pinterest"><a class="icon pinterest" href="#">Sigueme en Pinterest</a></li>

<li data-alt="Suscribete a RSS"><a class="icon rss" href="http://feeds.feedburner.com/ForoA">Suscribete a RSS</a></li>

</ul>

<!--Botones sociales Widget By http://ayudabloggerss.blogspot.com-->

• Sigueme en Facebook
• Sigueme en Twitter
• Sigueme en Google+
• Sigueme en Pinterest
• Suscribete a RSS

Gadget Traductor con Banderas

 

  Aqui les dejo un manual, tutoria de como subir, colgar o poner un traductor de idiomas con banderas para nuestro blog para todoa aquellos bloggers que desean saber como se hace para tener un traductor como este:

 <style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div align=center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0veAHzDBOR9lJyImaPovk1iTDpQuwVivSY0dVTSJway8i5Yz-gfbyOPLwiFF_K9XdnT8y5wKpb8mPsM9pVR4yFP8XzYWXsUBSUsDCxlDPEuqO80aZ96jYuLZYXjGUSdAxbAXktXGtYd8/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a href="http://curriculumsvitae.blogspot.com" target="_blank" title="curriculums vitae"><img src="http://sites.google.com/site/cvitaemm/imagenes/cv.gif" border="0" alt="cv" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyRSyja3u-Psvd2yLC7O-tm8hZHqrRvlrYtpckJYGNqCAv0hot40qz6b4kHH8N79PZ9T0IfJaYwIPqTRRjyIEUaS3oi4nHvpQd1vV1zqoNrzP9mXBg0Pu7pq8Re0w7u-aPh33vZJ5gl2k/s200/France.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb51Zu5hKKWXXhRhPHJwOOK5GnCZfOWhG4Ogh5Z9u3VduhTs7P4r9PIJR4LBkVfJOzejifi2Q2dKSoApbqqz4FWRZsdxvw5z728gfdVbUUD1EdOyAxhZVXDfKz2MPT6nPVSShZhmxn0-0/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrsXOUBqtKVxVKbze6iuHuGgEW7cLkeP7iY27Juf1u6yt2nyNlYlVdEyRxGNCcttRXsv2ePe71RjI4v_Ih3Wi3kgmzFGCtLbHV9ePA4JLs8kt7DziwdYiPrAxEFgLxNudfi3wT0uCYiQ/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZ18t7hyYjvQyPAYgWDqlegUpeZKnJJF2G0fNk1maBkijbVdqnbVlHIoXx9J7qvr3EDW5e6Hguwj0qeE2BhQ6yun6tuBJL9UrdMeMNMgt4OojYOczV1h8mCOS2d5rCsh9zaud0d7ZlfM/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEuaq0rarJP6po3_dd6UV1iBsAGaMe6h0RcAsCDJcUzlp2X0EVhLVoQlyTMd1ofa1EQdHBBa365P2KDTlMVUxHR-WK7eXqZVyT99RYIUmhPwTVjgJ81pXRTfuGierkRxlQhKDTo_7IBc/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyyDXWz_-0U2vcgGvQgdCGK6-0FoQePGr4uX42c1-N6YmdZpoUZVmpbGA9I4wNyZ2ZI5aSVxJQMyDZZpK13b6ln3Fo0viB3MKxadEOTLUGjseuQussAcKrvlMp9hZM3nYobVSUjrQfsvg/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2rhXeciCPcJ2qVitIRE2FQ-I07_kfaERkG34GoBkH6UEAHb0RESMzMapSm4Xod8mBfNITC-QVafluYKboEoITZIMyR-Np1WgvsN6q79N7VwRJf2V72O6ZTBLUZEmn-kGwe2u7qlU_h0/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgD6Th6w-yAlsjbpyv5HY65TXQxD-uxzOeUahdtXBn_pbtO6NZHxb65YcGKEwCvH6vkFoFO8oxtzXX5DVe1Op4yoHKuogl5S7dxDwBrEaN5pLycxT32FtH239d8FVPYjPjZdAmOaJeasI/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xCPMpDCRu05kjquaSIt4E4iuG-tyZshKJV5L3gShPLhNH322Sws5DPYGP8UtSmZ2m10MFqWnaaHRzwI0tSBSB6OMJcjx3klaO8LpIlPGlHNFqwFAFeiWKI1e3grmRnRRzZi2pWIe274/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrDbN4Nwzi210Pz-1xGFGGc0gw9bK-u8F61wsTmMu3blouxgFFPGBRT_osAHtEP6YnmtGvWcT4pi8jb9M-zgBBvmUAYd9wYz8O2hfuNLhyphenhyphenJhT_PXtVReP4koZx0JMNv8IB3QHI25XfDmM/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-IsTH9999ShImipotZhviuAuU4Dt1efWG66fz91fAyfgCeOkZHa4y6O3gcydQCUFClm6-ulZk6emS3HR55nsHkWOrysTWpCdum0NVGK1TvqfLSo9hvJ-T7JkEhhxh94Eq1VNGBXJVxE/s200/China.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
</div>

COmo Añadir!

 Copia y pega el siguiente código en Diseño>Añadir Gadget>Html/Javascript

Plantilla Cine

Plantilla Blogger Gris

XML + IMAGENES

Plantilla de Cine - Peliculas!

Pasos PAra añadirla:

Aqui un Demo!

Gadget Botones Sociales Flotantes para blogger

Con el desarrollo de las redes sociales, cada vez es más interesante facilitar a los usuarios de tu blog la inclusión de tus artículos en las redes sociales que utilicen.

 De esta forma, además de proporcionar un servicio interesante para tus usuarios como este gadget de marcadores sociales flotantes, conseguirás aumentar la distribución de tus posts gracias a la propia publicidad que tus usuarios realizarán de ellos

.

 Esta barra flotante con marcadores sociales, se ubicara en la parte lateral del blog por lo que no tendras que gastar espacio y como si fuera poco tiene una gran apariencia.

 Para instalar estos botones flotantes en tu blog solo tiene que acceder a Diseño de tu Pagina, Seleccionar Añadir un gadget y en el cuadro que aparece pegamos el codigo

<!--SideBar Floating Share Buttons Code Start--> <style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share This With Your Friends"> <div class='sbutton' id='gb'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <br/><div style="clear: both;font-size: 9px;text-align:center;"> <a href="http://www.bloggingtipsnow.com/2012/02/floating-sharing-button-with-stumble.html" target="blank"><font color="black">[Get This]<font></font></font></a></div> </div> <!--SideBar Floating Share Buttons Code End-->

Tweet

Share

[Get This]

Gadget Top Comentaristas en Nube para el blog

La mayoría de nosotros ya sabemos y conocemos el truco "Top Comentaristas" que es muy popular, es el que muestra una lista con los nombres de los lectores y el número de comentarios que cada uno ha publicado (en ocasiones, hasta un enlace hacia el perfil de Blogger de cada usuario).

 En esta entrada quiero presentarte un Gadget para Blogger muy similar que muestra los "Top Comentaristas" del blog en forma de nube, muy similar al Gadget de etiquetas de blogger, como puedes ver en la imagen a continuación

...

Para agregar este gadget de Top Comentaristas en Nube a tu blog sigue los siguiente pasos:

1. Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir gadget |   HTML/Javascript.
 
2. Si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript.

 Esta esta el codigo del Gadget que tienes que pegar en tu blog :

<div style="text-align:justify;line-height:1.2;"> <script type="text/javascript"> function blnube_centro(feed) { max = 0; min = 10000; for (i=0;i<feed.count;i++) { blnube_elements = feed.value.items[i].commentcount * 1; if (blnube_elements > max) { max = blnube_elements; } if (blnube_elements < min) { min = blnube_elements; } } blnube_elementos = ""; display = ""; for (blnuub=0;blnuub<feed.count;blnuub++) { blnube_parent = feed.value.items[blnuub].commentcount - min; blnube_tam = 80 + (blnube_parent * 100) / (max - min) + "%"; blnube_autrr = "'" + feed.value.items[blnuub].authorurl + "'"; blnube_elementos = "(" + feed.value.items[blnuub].commentcount + ")"; blnubID = feed.value.items[blnuub].title + blnube_elementos; blnubID2 = "<a style='text-decoration:none;font-size:" + blnube_tam + "' href=" + blnube_autrr + " target='_blank'>" + blnubID + " </a>"; display = display + blnubID2; } document.write(display); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? YourBlogUrl=http://ayudabloggerss.blogspot.com/ &Exclusions=Anonymous,Jaime Trujillo Escobedo &_callback=blnube_centro &ShowHowMany=30 &_id=cfa196644e1d6159c9183548c4b5e2f5 &_render=json" type="text/javascript"></script> <center> <span style="line-height: 30px; margin-top:20px; text-decoration: none; border: 1px solid #ccc; padding: 2px; "><a href="http://goo.gl/lDnQ1" target="_blank">Conseguir este Gadget</a></span></center> </div>

Ahora solo debes sustituir (http://ayudabloggerss.blogspot.com/) con la dirección de tu blog.

Puedes controlar el número de comentaristas a mostrar en la nube editando la cifra 30 de la línea &ShowHowMany=30.

¿Como Añadir Un Gadget?

Los Gadgets / Widgets para Blogger son una fantastica manera de adornar tu Blog de Blogger.

 Por ejemplo: Puedes poner un Chat, Reloj, Juego, Musica,Radio.. etc.

 Me dirijo principalmente a los Novatos. Supongo que los mas avanzados en Blogs de Blogger, ya conoceréis donde conseguirlos y como instalarlo !

 Los pasos tambien son muy faciles :

Diseño->Elementos de página->Añadir un gadget->HTML/Javascript

 1. Debes acceder a Diseño de tu Pagina, aqui debes seleccionar Añadir un gadget  :

2. Ahora, te aparece una ventana con Gadgets y Widgets que puedes subir, dale aHTML/Javascript    :

3. Ahi debes pegar el codigo HTML/Javascript  que has generado en la pagina de los Gadgetso Widgets .

4. Una vez que tengas el codigo, pegalo en la ventana que se abrio antes de Blogger. El codigo que debes pegar sera parecido a este :

Aqui les dejo un video que muestra  paso a paso cómo agregar un Gadget de otras fuentes en nuestro Blog.

Creo que este video tutorial les explica todo sobre como agregar un Gadget o un Widget en tuBlog de Blogger.

Gadget entradas Recientes!

Hoy en esta entrada les hablo sobre un Gadget para blogger que nos ayuda a implementar en nuestro blog las "Ultimas Entradas" (Post Recientes) con imagenes en miniatura . Bueno yo no lose si es unico este Gadget para Blogger que hacen esta funcion y se pueden agregar a blogger, pero el que yo les presento en esta entrada muestra las imagenes de los post en miniatura, y los numeros de los comentario entre otras caracteristicas. En esta imagen se puede ver como queda este Gadget para Blogger en tu Blog :

   

 Para añadir este Gadget para Blogger en tu blog, solo tiene que pegar el codigo de abajo en un elemento HTML/Javascript :

  <style type='text/css'> img.recent_thumb {padding:2px;width:70px;height:70px;border:0; float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;} .recent_posts_with_thumbs h4 { text-transform: uppercase; font-size: 14px; } </style> <script type='text/javascript'> //<![CDATA[ function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){ if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error) { s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){ thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg'; } var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">'); if(showpostthumbnails==true) document.write('<img class="recent_thumb" src="'+thumburl+'"/>'); document.write('<b><h4> <a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4> '); if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (showpostsummary == true) { if (postcontent.length < numchars) { document.write('<i>'); document.write(postcontent); document.write('</i>');} else { document.write('<i>'); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0,quoteEnd); document.write(postcontent + '...'); document.write('</i>');} } var towrite='';var flag=0; document.write('<br><strong>'); if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true) { if (flag==1) {towrite=towrite+' | ';} if(commenttext=='0 Comments') commenttext='0 comentarios'; if(commenttext=='1 Comment') commenttext='1 comentario'; commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>'; towrite=towrite+commenttext; flag=1; ; } if(displaymore==true) { if (flag==1) towrite=towrite+' | '; towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>'; flag=1; ; } document.write(towrite); document.write('</strong></li> '); if(displayseparator==true) if (i!=(numposts-1)) document.write(''); }document.write('</ul> '); } //]]> </script> <script style='text/javascript'> var numposts = 5; var showpostthumbnails = true; var displaymore = true; var displayseparator = true; var showcommentnum = true; var showpostdate = true; var showpostsummary = true; var numchars = 80;</script> <script src='http://TUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

 

Para que el  funciona perfectamente en tu blog, en la última línea debes reemplazar “TUBLOG” por el nombre de tu blog.

Si quieres personalizar o configurar este Gadget aqui les dejo algunas opciones :

Normalmente, puede ser que no necesites hacer ningún cambio extra al ya añadido; pero sin embargo puedes hacer algunas pequeñas modificaciones para hacer que éste se adapte a tus preferencias.

En los estilos, por ejemplo, puedes ver que el tamaño por defecto de los thumbnails o miniaturas de imagen, es de 70×70 píxeles (segunda línea), y que éstos tienen un borde. También, en los estilos puedes cambiar los estilos de letras.

Al final del código veremos una serie de variables, donde:

• numposts: indica el número de posts que se muestran (por defecto, “5″).
• numchars: indica el número de caracteres de los resúmenes (por defecto, “80″).

Las siguientes variables pueden ser cambiadas de “true” a “false” (o viceversa) para habilitar o deshabilitar alguna de las funciones:

• showpostthumbnails: muestra miniaturas de imagen.
• displaymore: muestra el enlace “Más”.
• displayseparator: muestra una línea de separación entre cada ítem.
• showpostdate: muestra la fecha de cada post.
• showpostsummary: muestra un resumen de cada post.

Gadget Pajaro Twitter en tu web

Se trata de un pájaro azul, en clara alusión al icono de Twitter, que aparece por la parte superior y sobrevuela tu página según te vas desplazando verticalmente por ella. Esto ya sería lo suficientemente entretenido como para publicarlo y que algunos os divirtais un poquito instalándolo en vuestra página. Pero lo mejor de todo es lo que hace. Resulta que este pajarraco, además de haceros compañía, es también un enlace a vuestra cuenta de twitter y al mismo tiempo, un boton de retweet. Esto le da un poco más de interés ¿no?

 

 Copia y pega el siguiente código en Diseño>Añadir Gadget>Html/Javascript

<script src="http://dl.dropbox.com/u/25944020/miespaciogratis" type="text/javascript"></script> <script type="text/javascript"> var birdSprite='http://dl.dropbox.com/u/25944020/birdsprite.miespaciogratis'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button',' select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span'); var twitterAccount = 'Aqui Tu Twitter'; var twitterThisText =''; tripleflapInit(); </script>

Si tenéis cuenta en Twitter, no olvidéis cambiar el nombre de usuario (Aqui Tu Twitter) por el vuestro.

Widgets entrada Recomendado

En este post les presento un gadget impresionante y nuevo que de momento se puede ver solo en los blogs de Wordpress, pero ya ahora está disponible en Blogger tambien. "Post Recomendado" es un interesante gadget que seguro algunos de ustedes que estas visitando blogs en plataforama Wordpress lo has visto, aparece como un mensaje deslizante abajo en la pagina como "Recomendados" o "Relacionados" .


 

Nosotros hemos visto este tipo de Gadget en muchos sitios web populares como The New York Times, Mashable, Times of India, etc. Lo bueno de este gadget para blogger es que mantiene a los lectores mas tiempo en tu blog para leer más páginas. Para instalar el gadget "Post Recomendado" deslizante en tu blog solo tiene que copiar el codigo que te lo dejamos abajo y añadirlo com un gadget nuevo en tu blog :


Diseño>Añadir Gadget>Html/Javascript
Añade Este Codigo!

<a href="http://www.gadgetsblogger.com" target="_blank" title="Gadgets para blogger"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Gadgets para Blogger" style="position:absolute; top: 0px; right: 0px;" /></a><style type="text/css">#recslide{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:0px solid #000;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-6px -5px 5px #aaa; font-family:Arial, Helvetica, sans-serif;}#recslide p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#000; font-weight: bold;}#recslide_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}#recslide a,#recslide a:hover,#recslide_title{text-decoration:none;color:#0000ff; padding: 5px 5px 5px 2px;}#recslide .close,#recslide .expand,#recslide .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}#recslide .help{right:35px;}#recslide_image{float:left;width:80px;}#recslide_title{width:287px;height:30px;overflow:hidden;}</style><a href="http://bit.ly/SedrcC"><div id="recslide" style="display:none;"> <div class="help"> ?</div> <div class="expand"> +</div> <div class="close"> X</div> <p> Post Recomendado</p> <div id="recslide_image"> </div> <div id="recslide_title"> Loading..</div> <center> <div id="share_box"> loading</div> </center> </div> </a><script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bts_onload_queue=='undefined')var bts_onload_queue=[];if(typeof bts_dom_loaded=='boolean')bts_dom_loaded=false;else var bts_dom_loaded=false;if(typeof bts_async_loader!='function'){function bts_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bts_dom_loaded){newcallback()}else bts_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bts_domLoaded!='function')function bts_domLoaded(callback){bts_dom_loaded=true;var len=bts_onload_queue.length;for(var i=0;i<len;i++){bts_onload_queue[i]()}}bts_domLoaded();bts_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bts_async_loader("http://safir85.ucoz.com/bdlab-blogspot/24work/recommended/recommended-Slide-v1.0.js",function(){},"bts-out-slide")},"jQueryjs")}</script>

Luego que allas Añadido El Html/Javascript 

Vamos a Plantilla>Editar Html>Expandir Artilugios

Presionas Ctrl+ F al Mismo Tiempo y Buscas

<div class='post-footer-line post-footer-line-1'>

Y debajo de Eso Añade Esto:

<b:if cond='data:blog.pageType == "item"'> <div style='display:none' id='bpslidein_place_holder'></div> </b:if>

Gadget Botones Twitter Y Facebook.

hola a todos les traigo unos botones facebook y twitters para que lo enlaces en tu web !

su color es transparente como lo pueden ver !

Este gadget lo pondremos todo dentro de un elemento HTML/Javascript para evitar tocar la plantilla, así que sólo entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el codigo!

<a href="Aca tu Facebook" target="_blank"><img src="Aqui la Imagen" border="0"></a> 

Link de la foto!

http://4.bp.blogspot.com/-F9WkJgI1hTs/VeGaEVQjGI/AAAAAAAAAQ0/CHQnecYqzbE/s320/facebook.png 

<a href="Aca tu Twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIEw6DQEV-NQLQCek0ffXFUWyIJJ0YOdj8hlMPwCeXZdsuUet0M-uL8Plj0gpWPgd96nb4cOs-67xHgxWgcdIQciIZRishUzM2jieTWluHqz1eiRgfD9HcCEl0Pd9q0A-wphS53MpA9WHK/s320/twitter_mf3la.png" border="0"></a> 

Galeria De Videos Para Bloggers[Web

 En esta entrada vamos a ver cómo crear una galería de videos de YouTube usando jQuery. Es una elegante galería a la que le caben 5 videos y que por sus dimesiones la pondremos debajo de la cabecera del blog. En realidad puedes ponerla en cualquier parte, pero se recomienda en esa área por los 765px que mide de ancho la galería.

Para agregar este slider de videos en tu blog entra en Plantilla | Edición de HTML y antes de</ head> agrega los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
/*hoverscroll v.0.2.4*/
(function($) {
$.fn.hoverscroll = function(params) {
if (!params) { params = {}; }
params = $.extend({}, $.fn.hoverscroll.params, params);
this.each(function() {
var $this = $(this);
if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}
if (params.fixedArrows) {
$this.wrap('<div class="fixed-listcontainer"></div>')
}
else {
$this.wrap('<div class="listcontainer"></div>');
}

$this.addClass('list');
var listctnr = $this.parent();
listctnr.wrap('<div class="ui-widget-content hoverscroll' +
(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');
//listctnr.wrap('<div class="hoverscroll"></div>');

var ctnr = listctnr.parent();

var leftArrow, rightArrow, topArrow, bottomArrow;
if (params.arrows) {
if (!params.vertical) {
if (params.fixedArrows) {
leftArrow = '<div class="fixed-arrow left"></div>';
rightArrow = '<div class="fixed-arrow right"></div>';

listctnr.before(leftArrow).after(rightArrow);
}
else {
leftArrow = '<div class="arrow left"></div>';
rightArrow = '<div class="arrow right"></div>';

listctnr.append(leftArrow).append(rightArrow);
}
}
else {
if (params.fixedArrows) {
topArrow = '<div class="fixed-arrow top"></div>';
bottomArrow = '<div class="fixed-arrow bottom"></div>';

listctnr.before(topArrow).after(bottomArrow);
}
else {
topArrow = '<div class="arrow top"></div>';
bottomArrow = '<div class="arrow bottom"></div>';

listctnr.append(topArrow).append(bottomArrow);
}
}
}
ctnr.width(params.width).height(params.height);

if (params.arrows && params.fixedArrows) {
if (params.vertical) {
topArrow = listctnr.prev();
bottomArrow = listctnr.next();

listctnr.width(params.width)
.height(params.height - (topArrow.height() + bottomArrow.height()));
}
else {
leftArrow = listctnr.prev();
rightArrow = listctnr.next();

listctnr.height(params.height)
.width(params.width - (leftArrow.width() + rightArrow.width()));
}
}
else {
listctnr.width(params.width).height(params.height);
}

var size = 0;

if (!params.vertical) {
ctnr.addClass('horizontal');
$this.children().each(function() {
$(this).addClass('item');

if ($(this).outerWidth) {
size += $(this).outerWidth(true);
}
else {
size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))
+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
}
});
$this.width(size);

if (params.debug) {
$.log('[HoverScroll] Computed content width : ' + size + 'px');
}
if (ctnr.outerWidth) {
size = ctnr.outerWidth();
}
else {
size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))
+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container width : ' + size + 'px');
}
}
else {
ctnr.addClass('vertical');
$this.children().each(function() {
$(this).addClass('item')

if ($(this).outerHeight) {
size += $(this).outerHeight(true);
}
else {
size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))
+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));
}
});
$this.height(size);

if (params.debug) {
$.log('[HoverScroll] Computed content height : ' + size + 'px');
}
if (ctnr.outerHeight) {
size = ctnr.outerHeight();
}
else {
size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))
+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));
}

if (params.debug) {
$.log('[HoverScroll] Computed container height : ' + size + 'px');
}
}
var zone = {
1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},
2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},
3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},
4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},
5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},
6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},
7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},
8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},
9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
function checkMouse(x, y) {
x = x - ctnr.offset().left;
y = y - ctnr.offset().top;

var pos;
if (!params.vertical) {pos = x;}
else {pos = y;}

for (i in zone) {
if (pos >= zone[i].from && pos < zone[i].to) {
if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}
else {stopMoving();}
}
}
}

function setArrowOpacity() {
if (!params.arrows || params.fixedArrows) {return;}

var maxScroll;
var scroll;

if (!params.vertical) {
maxScroll = listctnr[0].scrollWidth - listctnr.width();
scroll = listctnr[0].scrollLeft;
}
else {
maxScroll = listctnr[0].scrollHeight - listctnr.height();
scroll = listctnr[0].scrollTop;
}
var limit = params.arrowsOpacity;
var opacity = (scroll / maxScroll) * limit;

if (opacity > limit) { opacity = limit; }
if (isNaN(opacity)) { opacity = 0; }

var done = false;
if (opacity <= 0) {
$('div.arrow.left, div.arrow.top', ctnr).hide();
if(maxScroll > 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);
}
done = true;
}
if (opacity >= limit || maxScroll <= 0) {
$('div.arrow.right, div.arrow.bottom', ctnr).hide();
done = true;
}

if (!done) {
$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);
$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));
}
}

function startMoving(direction, speed) {
if (ctnr[0].direction != direction) {
if (params.debug) {
$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);
}

stopMoving();
ctnr[0].direction = direction;
ctnr[0].isChanging = true;
move();
}
if (ctnr[0].speed != speed) {
if (params.debug) {
$.log('[HoverScroll] Changed speed: ' + speed);
}

ctnr[0].speed = speed;
}
}

function stopMoving() {
if (ctnr[0].isChanging) {
if (params.debug) {
$.log('[HoverScroll] Stoped moving');
}

ctnr[0].isChanging = false;
ctnr[0].direction = 0;
ctnr[0].speed = 1;
clearTimeout(ctnr[0].timer);
}
}

function move() {
if (ctnr[0].isChanging == false) {return;}

setArrowOpacity();

var scrollSide;
if (!params.vertical) {scrollSide = 'scrollLeft';}
else {scrollSide = 'scrollTop';}

listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;
ctnr[0].timer = setTimeout(function() {move();}, 50);
}

if (params.rtl && !params.vertical) {
listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();
}

ctnr
.mousemove(function(e) {checkMouse(e.pageX, e.pageY);})
.bind('mouseleave', function() {stopMoving();});

this.startMoving = startMoving;
this.stopMoving = stopMoving;

if (params.arrows && !params.fixedArrows) {
// Initialise arrow opacity
setArrowOpacity();
}
else {
// Hide arrows
$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();
}
});

return this;
};

if (!$.fn.offset) {
$.fn.offset = function() {
this.left = this.top = 0;

if (this[0] && this[0].offsetParent) {
var obj = this[0];
do {
this.left += obj.offsetLeft;
this.top += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return this;
}
}

$.fn.hoverscroll.params = {
vertical: false, 
width: 400,
height: 50, 
arrows: true,
arrowsOpacity: 0.7, 
fixedArrows: false, 
rtl: false, 
debug: false 
};
$.log = function() {
try {console.log.apply(console, arguments);}
catch (e) {
try {opera.postError.apply(opera, arguments);}
catch (e) {}
}
};
})(jQuery);

// Aplicar desde aquí el hack de compatibilidad con Scriptaculous en caso de ser necesario

$(function(){
$("#slidervideo-tabs a").click(function(){
var container = $("#slidervideo-content");
container.html("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5QT6_p_chXwrfFqIgDByzg7JPFNi5wwb0DKBzZB9a8TMSHAZKuxaPqSZiDumroyiH0LHFZT1p_yo-8pIBwgWqzoNaANCy2lIUxFgCmrl64IVkd-OpVk11t0I2r6rwx22djen5wvyb7kA/s400/loading.gif' class='loading-vid' />");
var id = $(this).attr("href").slice(1);
loadvideo(id);
return false;
});
$("#slidervideo-tabs").hoverscroll({vertical:true,width:300,height:330,arrows:false});
$("#slidervideo-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
loadvideo();
});

function loadvideo (hash){if(hash){hash = hash.slice(3);$("#slidervideo-content").html(video[hash]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#slidervideo-content").html(video[1]);$("#slidervideo-tabs li").removeClass("actVid");$("#slidervideo-tabs a[href=#vid1]").parent().addClass("actVid");}}
//]]>
</script>

Luego agrega los estilos antes de ]]></ b:skin>

/* Galería de videos
----------------------------------------------- */
#slidervideo {
background:#000; /* Color de fondo */
clear:both;
margin:0 auto;
padding:5px;
width:765px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#slidervideo, #slidervideo-content, #slidervideo-tabs {height:350px;overflow:hidden;}
#slidervideo-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#slidervideo-tabs {float:right;width:300px;margin:0;}
#slidervideo-tabs li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqO8wmOWQGqrWxAQAoJvnwViea6OY9Zcziv2JqIoxm6791kB6nWoMrJi4p7zJ-jDhC-tZP7em0SE_0NXEn1ezxyDwC2T3s_QRFotTgt_vN1zm8OFEsr_dmhrWOAilui5z3aAALML21BcU/s0/tab_bg.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}
#slidervideo-tabs li a {padding:0 !important;border:0 !important;}
#slidervideo-tabs li.hover {background:#333;}
#slidervideo-tabs li.actVid {background:#555;}
#slidervideo-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#slidervideo-tabs li span.vidTit {
display:block;
color:#CD332D; /* Color de los títulos */
font-size:14px; /* Tamaño de los títulos */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs li .vidDesc {
display:block;
color:#fff; /* Color de la descripción */
font-size:12px; /* Tamaño del texto de la descripción */
font-weight:bold;
text-decoration:none;
}
#slidervideo-tabs a {text-decoration:none;}
#slidervideo-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#slidervideo-tabs li a:hover {background: none !important;}

Ahora en un elemento HTML/Javascript pega la estructura del slider, este gadget es el que pondrás debajo de la cabecera:

<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ID_video_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="slidervideo">
<div id="slidervideo-content"></div>
<ul id="slidervideo-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/ID_video_1/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/ID_video_2/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/ID_video_3/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/ID_video_4/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/ID_video_5/default.jpg" class="thumb-vid" /><span class="vidTit">Nombre del video</span><span class="vidDesc">Descripción del video</span></a></li>

</ul>
</div>

Agrega los IDs de los videos, sus nombres y su descripción y listo. La descripción deberá ser muy breve para que no tengas problemas de espacios.

Si no sabes cómo obtener la ID de un video abre el video en YouTube y mira en la barra de direcciones, los últimos caracteres son la ID que necesitas.
}

Toma en cuenta que la ID de cada video se agrega dos veces, uno es para que muestre el video y otra para la miniatura de las pestañas

Aqui Tienes un Demo!