Entradas Recientes con JQuery efecto Acordeón

Entradas Recientes con JQuery efecto Acordeón

En este tutorial veremos como agregar un gadget con Entradas Recientes efecto Acordeón. Ya hemos visto como agregar varios gadget de Entradas Recientes, es este tutorial lo aremos mas vistoso y por otro lado no ocupara tanto espacio en nuestros sidebar.



--------------------------------------------------------------

Comencemos:

• Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

</head>

• Paso 3: Justo por encima de </head> agregaremos el Efecto Acordeón 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();
$(&quot;.accordion h3&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
});
});
</script>
<style type='text/css'>
.accordion {
width: 480px; //Ancho de nuestro Acordeón//
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3aBRNxBlG2K-rB6rUFqF9hQwAtQImrH0HIzmaqoLQ5WiEuDDnV2zIcByJ_JZI4txoxNavTGyuEN28-c7kaiCCG9T59X7K8QZeanYF6ZeIoUj-HMWYeBoAGoZ5GkBUC5JrzttC9dESCQA/h120/arrow-square-namkna-blogspot-com.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

• Paso 4: Guardamos la Plantilla
• Paso 5: Agregaremos nuestro acordeón en un Gadget, para eso vamos a 
• Blogger>>Diseño>>Añadir un Gadget>>HTML/Javascript

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://cdn3.iconfinder.com/data/icons/diagram/96x96/diagram-23.png";
showRandomImg = true;
jimgwidth = 80; //Ancho de la imagen//
jimgheight = 80; //Alto de la imagen//
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;
jtext = "Comentarios";
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
numposts = 10; //Numero de Entradas a Mostrar//
label = "Tips";
home_page = "http://tutorialesblogger.blogspot.com/";
</script>
<div class="accordion">
<script src="http://dl.dropbox.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Acordeon.js" type="text/javascript"></script>
</div>

• Paso 6: Guardamos el Gadget
- Información tomada de: http://www.tutoriales-blogger.info/2012/12/entradas-recientes-con-jquery-efecto.html