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.




Antes que nada veremos una demostración

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://lh4.googleusercontent.com/-_-eoDLSWxGk/T5AyGYGSvTI/AAAAAAAABLk/GONv0zzm-HA/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
Nota:- 
"Tips" Seran las etiquetas que mostrara
Solo debes de Cambiar la URL de Tu blog

Eso es todo espero que les guste 


- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar