Tutorial - Slider lateral para banners ou publicidade no blog

Algumas pessoas tem me pedido para fazer um tutorial de como inserir um slider lateral para blogger que fique passando as imagens de promoções ou mesmo uma publicidade. Separei aqui um código bem simples e que deve suprir essa necessidade de quase todos os blogueiros. O slider que vou mostrar como montar é semelhante ao do lado, ele fica passando em ordem as imagens com um efeito de pagina de livro sendo virada. Caso queiram ver ele em funcionamento podem dar uma olhada no blog da minha namorada http://www.vicio-de-leitura.com/ que lá esta ele instalado.

<style>

#slide_lista ul, li{
 display: block;
}
 
#publicidade{
 margin: auto;
 padding: 10px;
 width: 250px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #fff;
 border-radius: 5px;
 background: rgba( 255 , 255 , 255 , .5 );
 position: relative;
}
 
#box-1, #box-2, #box-3, #box-4{
 width: 250px;
 height: 250px;
}
#pub_pager{
text-align:center;
}
#pub_pager a{
padding: 5px;
margin: 3px;
background: grey;
font-size: 8px;
color: white;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/151407432/jquery-cycle-all.js"></script>

<script type="text/javascript">

 $( document ).ready( function(){

  $( "#publicidade ul" ).cycle({ 
      fx: "shuffle",
   //exemplo: shuffle, zoom, curtainX, turnDown. scrollHorz
      pager: "#pub_pager"
   });
 } );

</script>

<div id="publicidade">
 <ul id='slide_lista'>
  <li id="box-1"> aqui dentro voce vai colocar o codigo da sua imagem </li>
  <li id="box-2"> aqui dentro voce vai colocar o codigo da sua imagem </li>
  <li id="box-3"> aqui dentro voce vai colocar o codigo da sua imagem </li>

 </ul>
 <div id="pub_pager"></div>
</div>