Un BlogRoll muy especial (query)

Se trata de una caja que contiene una relacion de páginas, de las que destaca algunos epígrafes vinculándolos a su feed. A mí me parece más cómodo, para Blogger, destacar esas entradas o, si se quiere, unas etiquetas, mediante la URL en cuestión. Picando en cada uno de los nombres que coronan la caja, o en "previous" y "next", irán deslizándose los conenidos de cada uno de ellos.

Para entendernos, casi mejor que echáis un vistazo en la sidebar de este Blog, y veréis a qué me refiero. Podéis ver y descargar el hack original en CSS-Tricks

Y vamos a ver en qué consiste:

.- CSS: Aquí es dónde insertamos las imágenes del BlogRoll, incluídas (si así lo deseamos) las de cabecera de las páginas, cuya URL se desplegará en el interior de la caja. Podéis cambiar, además, cosas como el ancho de la caja.

<link href='http://.../BetterBlogroll_style.css' rel='stylesheet' type='text/css'/>

.- SCRIPTS:

<script src='http://.../jquery-easing.1.2.js' type='text/javascript'/>

<script src='http://.../jquery-easing-compatibility.1.2.js' type='text/javascript'/>

<script src='http://.../Coda-slider.1.1.1.js' type='text/javascript'/>



<script type='text/javascript'>

$(function () {

$(&quot;#blogSlider&quot;).codaSlider();

});

</script>

.- HTML: A colocar donde deseáis vuestro blogroll: p.e., yo lo he colocado entre los widgets de la sidebar. Os pongo un ejemplo "mixto": de feeds que provee el autor y de Urls de etiquetas de Epílogo, que he introducido en mi prueba.

<div id='blogSliderWrap'>



<div id='blogSlider'>

<div class='innerWrap'>

<div class='panelContainer'>



<div class='panel' title='EPILOGO'>

<div class='wrapper'>



<ul id='psd-list'>

<li><a href='http://cafe-junio.blogspot.com/search/label/Blog'>Entradas bajo la etiqueta Blog</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/Imagen'>Entradas bajo la etiqueta Imagen</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/Mootools'>Entradas bajo la etiqueta Mootools</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/Navegaci%C3%B3n'>Entradas bajo la etiqueta Navegacion</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/Plantilla'>Entradas bajo la etiquta Plantilla</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/Peek-A-Boo'>Enradas bajo la etiqueta Peek-A-Boo</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/query'>Entradas bajo la etiqueta Query</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/Taller'>Entradas bajo la etiqueta Taller</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/Wordpress'>Entradas bajo la etiqueta Wordpress</a></li><li><a href='http://cafe-junio.blogspot.com/search/label/CSS'>Entradas bajo la etiqueta CSS</a></li> </ul>





</div>

</div>



<div class='panel' title='NETTUTS'>

<div class='wrapper'>



<ul id='net-list'>

<li><a href='http://feeds.feedburner.com/~r/nettuts/~3/381922188/'>Google Enters the Browser Wars with Chrome</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/381603728/'>ThemeForest is Live</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/380958614/'>10 Challenging But Awesome CSS Techniques</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/380472191/'>How to Create a Mobile Site with MoFuse</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/378140896/'>Quick Fire with Jeff Croft</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/377070562/'>Learn Ruby on Rails from Scratch: Week 1</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/376548700/'>Evening Tip: 5 Time Saving Coda Features</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/375730620/'>How To Create An Amazing jQuery Style Switcher</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/374817070/'>10 Principles of the CSS Masters</a></li><li><a href='http://feeds.feedburner.com/~r/nettuts/~3/373877263/'>Creating a PHP5 Framework - Part 1</a></li> </ul>





</div>

</div>



<div class='panel' title='VECTORTUTS'>

<div class='wrapper'>



<ul id='vector-list'>

<li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/382314190/'>Create a Glowing Vector Lightsaber</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/381916207/'>ThemeForest Launch</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/381436267/'>70 Cute and Cheeky Vector Animal Characters</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/380761577/'>Best of the Web - August</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/377991625/'>Create an Attractive Arctic Landscape Environment in Illustrator</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/377062525/'>Meet the VECTORTUTS Writing Team</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/376101477/'>Create a Stylized Vector Police Badge with Metal and Leather</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/375259130/'>50+ High-impact Illustrated Vector Posters</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/374182950/'>Create a Vector Film Slate Icon</a></li><li><a href='http://feeds.feedburner.com/~r/vectortuts/~3/372159504/'>Methods for Creating Random Vector Noise</a></li> </ul>





</div>

</div>



<div class='panel' title='AUDIOTUTS'>

<div class='wrapper'>



<ul id='audio-list'>

<li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/382302187/'>6 Most Bizarre Instruments Ever Used in Popular Music</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/381374786/'>How to Choose the Right Distortion for Your Song</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/381120234/'>What Do You Want? We Don&#8217;t Know Until You Tell Us!</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/380502415/'>Live Sound 101: Preparing for the Show</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/378932552/'>8 Stifling Myths About Studio Recording</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/378095204/'>How to Automate Audio Tracks in Logic Pro 8</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/377221786/'>5 Former Music Badasses Who&#8217;ve Lost Their Way</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/375241898/'>How to Create Complex Layered Bass Using Reason&#8217;s Combinator</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/374288294/'>How to Add Interest to Your Chord Progression</a></li><li><a href='http://feeds.feedburner.com/~r/audiotuts/~3/371891560/'>11 Totally Free VST Synthesizers That Sound Great</a></li> </ul>





</div>

</div>

</div>

</div>

</div>



<div id='push'/>

</div>

Atentos, como siempre, a las ID de los elementos que introducís...

Es un hack más laborioso que difícil, creedme.