11 febrero 2010

Colocar varios widgets en una sola sección

 
Si piensas que los widgets uno debajo de otro te ocupa mucho espacio en el blog, y quieres que esto no suceda, hoy te traigo esta solucion... Con tan solo el uso de unos cuantos codigos HTML en tu blog, puedes hacer que varios widgets se muestren en una sola seccion, separadas por pestañas y que no es necesario que al hacer click en una pestaña. la pagina carge completamente, ya que esto es ligero, y sera todo muy rapido...

PASO 1

Dirigete a tu blog de blogger, entra a la pestaña Diseño > Edicion de HTML y busca la etiqueta </head>

Ahora, antes del codigo que acabas de buscar, colocaras el siguiente codigo, luego de colcarlo haz click en GUARDAR PLANTILLA

<link href='http://pmsc.free.fr/CSS02/10211205155.css' rel='stylesheet' type='text/css'/>

<script src='http://pmsc.free.fr/J02/10211205224.js' type='text/javascript'>

</script>

PASO 2

Ahora dirigete hasta Elementos de la pagina, crea un nuevo widget en la parte donde quieres que aparezca el widget de pestañas elijiendo HTML/Javascript

PASO 3

Te tengo tres modelos, puedes verlos en funcionamiento haciendo click aqui

  • Modelo 1

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Pestaña 1</a></li>
<li><a href="#" rel="dog2">Pestaña 2</a></li>
<li><a href="#" rel="dog3">Pestaña 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Pestaña 4</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Contenido de las pestaña 1 aqui<br />
</div>

<div id="dog2" class="tabcontent">
Contenido de las pestaña 2 aqui<br />
</div>

<div id="dog3" class="tabcontent">
Contenido de las pestaña 3 aqui<br />
</div>

<div id="dog4" class="tabcontent">
Contenido de las pestaña 4 aqui<br />
</div>

</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>

<!--
document.write(unescape("%3Ca%20href%3D%22http%3A//frikibloggeo.com.ar/%22%20target%3D%22_blank%22%3E%3Cspan%20style%3D%22font-size%3A%20x-small%3B%22%3EFriki%20bloggeo%3C/span%3E%3C/a%3E"));
//-->
  • Modelo 2

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Descripcion larga pestaña 2
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Descripcion corta pestaña 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Descripcion pestaña 4
</div>

<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Contenido pestaña 1<br />
</div>

<div id="tcontent2" class="tabcontent">
Contenido pestaña 2<br />
</div>

<div id="tcontent3" class="tabcontent">
Contenido pestaña 3<br />
</div>

<div id="tcontent4" class="tabcontent">
Contenido pestaña 4<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Pestaña 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Pestaña 2</a></li>
<li><a href="#" rel="tcontent3">Pestaña 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Pestaña 4</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>
<script>
<!--
document.write(unescape("%3Ca%20href%3D%22http%3A//frikibloggeo.com.ar/%22%20target%3D%22_blank%22%3E%3Cspan%20style%3D%22font-size%3A%20x-small%3B%22%3EFriki%20bloggeo%3C/span%3E%3C/a%3E"));
//-->
</script>
  • Modelo 3

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Pestaña 1</a></li>
<li><a href="#" rel="country2">Pestaña 2</a></li>
<li><a href="#" rel="country3">Pestaña 3</a></li>
<li><a href="#" rel="country4">Pestaña 4</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Contenido pestaña 1<br />
</div>

<div id="country2" class="tabcontent">
Contenido pestaña 2<br />
</div>

<div id="country3" class="tabcontent">
Contenido pestaña 3<br />
</div>

<div id="country4" class="tabcontent">
Contenido pestaña 4<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
<script>
<!--
document.write(unescape("%3Ca%20href%3D%22http%3A//frikibloggeo.com.ar/%22%20target%3D%22_blank%22%3E%3Cspan%20style%3D%22font-size%3A%20x-small%3B%22%3EFriki%20bloggeo%3C/span%3E%3C/a%3E"));
//-->
</script>

Cualquier duda, comentamela

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo