¿Cómo insertar un área de contenido con múltiples paneles en un widget de Blogger? Versión 1


Al momento de ahorrar espacio en nuestro blog de Blogger es necesario realizar varios trucos utilizando varios códigos con los cuales nos creara una caja con tres títulos múltiples y dentro de cada uno de ellos se puede ingresar contenido, este truco de Blogger lo pueden insertar en un widget o en una entrada, dependiendo el uso que lo quieran dar. La inserción del código es muy fácil de realizarlo, parte del código se ingresa en la plantilla y el ultimo código en el cual está el contenido y los títulos se lo ingresa de forma manual en nuestra entrada o en un widget, a este método se lo conoce como Tab Múltiple.


Pueden ver su demostración en el siguiente blog de demos

Ver demostración en un widget de Blogger

DEMO

Ver demostración en una Entrada de Blogger

DEMO

Diferentes versiones Tab Múltiples para Blogger

“En construcción”

¡Le gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla


3 Un clic en “Editar HTML


Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.


4 Busca este código

<head>

Ingrese las siguientes líneas de código justo abajo del código que encontró

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"></link>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

5 Busca este código

</head>

Ingrese el siguiente código justo arriba del código que encontró

  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

6 Un clic en “Guardar plantilla


7 Ahora diríjase a “Diseño


8 Un clic en “Agregar un gadget


9 Busque el widget que dice “HTML/Javascript” ábrelo


10 Ingrese las siguientes líneas de código en su interior

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Adsense</a></li>
    <li><a href="#tabs-2">Teléfonos</a></li>
    <li><a href="#tabs-3">Móvil</a></li>
  </ul>
  <div id="tabs-1">
    <p>AdSense para búsqueda móvil permite a los editores obtener ingresos de sus páginas web para móviles mediante anuncios Google orientados. En AdSense para búsqueda móvil, Google hace coincidir los anuncios con el contenido de su sitio web para móviles y usted obtiene ingresos cuando los usuarios de dicho sitio hacen clic en sus anuncios.</p>
  </div>
  <div id="tabs-2">
    <p>Los dispositivos móviles antiguos con capacidad para Internet (conocidos como teléfonos de gama media) utilizan el protocolo de aplicaciones inalámbricas (WAP, Wireless Application Protocol) y solo pueden acceder parcialmente a Internet. Los sitios web que admiten dichos dispositivos suelen estar escritos en un lenguaje de marcas, como el lenguaje de marcas inalámbrico (WML, Wireless Markup Language) o HTML extensible estricto (XHTML estricto). En determinadas regiones del mundo, los dispositivos utilizan i-mode para acceder a los sitios web escritos en HTML compacto (CHTML).</p>
  </div>
  <div id="tabs-3">
    <p>Con el desarrollo de teléfonos como iPhone y Android, un número cada vez mayor de navegadores para móviles puede interpretar ahora JavaScript y HTML. Los dispositivos con estos navegadores pueden acceder a prácticamente las mismas funcionalidades de Internet que ofrecen los ordenadores (con algunas limitaciones debidas a su tamaño, la disponibilidad del operador, etc.) y se llaman teléfonos de gama alta.</p>
  </div>
</div>

Realice los cambios en los tres títulos que están marcados de color rojo por los nombres que usted desee

Realice los cambios en las tres descripciones que están marcados de color verde por el texto que usted quiera dar a conocer

11 Eso es todo un clic en “Guardar

12 Ubique el Widget Tab Múltiple donde usted quiera

Para mostrar el Widget Tab Múltiple en una Entrada de su blog de Blogger, deberá abrir su entrada y habilitar la casilla en modo “HTML” y pegar todo el código del paso 10 de este tutorial.


¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

2 comentarios:

  1. amigo podrias hacer un tutorial porfavor esque no me sale y de verdad quiero esta opcion para mi pagina web,espero respondas,gracias

    ResponderEliminar
    Respuestas
    1. Hola, sobre su pregunta, procurare realizar el tutorial, pero no es difícil, las instrucciones están dadas y funciona

      Saludos

      Eliminar