Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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