Widgets para Blogger – Multi Tabla

Al momento de ahorrar espacio en nuestro blog de Blogger es esencial obtener un widget que nos facilite este sistema, para ello voy a explicar cómo hacer este truco para Blogger utilizando un código e insertarlo en un solo widget y así tener un widget realmente espectacular para Blogger. El widget Multi Tabla para Blogger no le causara ningún daño en la estructura de su blog, además, funciona perfectamente en todos los navegadores web. Voy a describir un poco sobre la utilización de este nuevo widget para Blogger. Las fichas se utilizan generalmente para romper el contenido en múltiples secciones que se pueden intercambiar para ahorrar espacio, tanto como un acordeón. Aquí tienen un conjunto particular de marcado que se debe utilizar con el fin de que funcionen correctamente. Las fichas a su vez pueden ser ordenadas ( <ol> ) o desordenadas ( <ul> ) listas. Cada "title" pestaña debe estar dentro de un elemento de la lista ( <li> ) y envuelto por un ancla ( <a> ) con un atributo href. Cada panel de pestañas puede ser cualquier elemento válido pero debe tener un identificador que le corresponde al código en el anclaje de la ficha correspondiente.

El contenido de cada panel de pestañas puede ser definido en la página o se puede cargar a través de Ajax, ambos se manejan de forma automática basándose en el href del anclaje asociado a la cuenta. Por fichas predeterminadas se activan al hacer clic, pero los acontecimientos se pueden cambiar a flotar a través de la opción de eventos. Esto es simple marcado jQuery que se utiliza para construir una ficha de múltiples dinámicas en Blogger. Voy a mostrar las características, así como la integración de esta pestaña en Blogger. Lo que vamos hacer es copiar el código en un widget y realizar unos simples cambios.

A continuación mire su demostración en mi blog de demos, la multi tabla está ubicado en el sidebar, al final del blog de demos.

Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” ábrelo

5 Ingresa las siguientes líneas de código en su interior

<style> .ui-spinner .ui-icon-triangle-1-s {     /* need to fix icons sprite */     background-position: -65px -16px; } .ui-tabs {     position: relative;/* posicion: relativo impide el IE de error de desplazamiento (elemento con posicion: recipiente interior en relación con rebosadero : auto appear as "fixed") */     padding: 0em; } .ui-tabs .ui-tabs-nav {     margin: 0;     padding: 0em 0em 0; } .ui-tabs .ui-tabs-nav li {     list-style: none;     float: left;     position: relative;     top: 0;     margin: 1px .2em 0 0;     padding: 0;     white-space: nowrap; } .ui-tabs .ui-tabs-nav li a {     float: left;     padding: .5em 1em;     text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active {     margin-bottom: -1px;     padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-S7wUohEhYQoz0WpVl9aG9O0SMHyScFl0mEsMpgYPfmBRndeetBd0fQA_ctO6LueAd-I1AvatkNk2OBy5FbrJlUOYrchTs_8rGM8uc6-Sllf3R_K37oA5UT2o-O8C7-tMrDUoNLeNto/s1600/bg-tab.png") repeat-x scroll left top rgb(85, 149, 37); color: rgb(255, 255, 255); font-weight: bold; border-width: 1px ; border-style: solid solid none; border-color: rgb(99, 173, 43) rgb(99, 173, 43) -moz-use-text-color; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; text-shadow: -1px -1px 0px rgb(68, 119, 29); } .ui-tabs .ui-tabs-nav li a, /* primera selección en grupo parece obsoleto, pero requiere superar el error en la aplicación de Opera en el cursor: texto en general, si se define en otro lugar...... */ .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {     cursor: pointer;     font-family: Helvetica;     font-size: 13px; } .ui-tabs .ui-tabs-panel {     display: block;     padding: 1em;     clear: both;     border: 2px solid rgb(85, 149, 37);     position: relative;     overflow: hidden;     z-index: 10; width: 320px; } .ui-tooltip {     padding: 8px;     position: absolute;     z-index: 9999;     max-width: 300px;     -webkit-box-shadow: 0 0 5px #aaa;     box-shadow: 0 0 5px #aaa; } body .ui-tooltip {     border-width: 1px; } /* Contenido del contenedor ----------------------------------*/ .ui-widget {     font-family: Helvetica, Arial,sans-serif;     font-size: 14px; margin-top: -10px; } .ui-widget .ui-widget {     font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {     font-family: Verdana,Arial,sans-serif;     font-size: 1em; } .ui-widget-content {     color: #222222; } .ui-widget-content a {     color: rgb(35, 97, 161); display: block; font-weight: normal; text-decoration: none; } .ui-widget-header {     font-weight: bold; } .ui-widget-header a {     color: #222222; } /* Estado de interacciones ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #e6e6e6;     font-weight: normal;     color: #555555; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {     color: #555555;     text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: none repeat scroll 0% 0% rgb(241, 241, 241);     font-weight: normal;     color: #212121; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited {     color: #212121;     text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {     font-weight: normal;     color: #212121; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {     color: #212121;     text-decoration: none; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#tabs-1">Google +</a></li> <li><a href="#tabs-2">Facebook</a></li> <li><a href="#tabs-3">Twitter</a></li> </ul> <div id="tabs-1"> <!-- Inserta esta etiqueta donde quieras que aparezca widget. --> <div class="g-page" data-width="275" data-href="//plus.google.com/109642587966892719343" data-rel="publisher"></div> <!-- Inserta esta etiqueta después de la última etiqueta de widget. --> <script type="text/javascript">   window.___gcfg = {lang: 'es'};   (function() {     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;     po.src = 'https://apis.google.com/js/platform.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })(); </script> </div> <div id="tabs-2"> <iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" ></iframe> </div> <div id="tabs-3"> <a class="twitter-timeline"  href="https://twitter.com/ayudadeblogger"  data-widget-id="415221420910592000">Tweets por @ayudadeblogger</a>     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </div>

Realiza estos cambios:

He insertado en este widget multi tabla, los scripts de mis perfiles sociales, si gustan pueden utilizar este widget para redes sociales o para otro tipo de utilización.

Bueno, si quieren utilizarlo como widget de perfiles sociales, realicen los siguientes cambios:

Elimina la URL que está marcada de color verde //plus.google.com/109642587966892719343 y pon ahí la dirección URL de tu página social de Google +

Borra la URL que esta marcada de color azul http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017 e inserta la URL de tu Fanpage de Facebook.

Por último, debes eliminar todo el código que está marcado de color rojo, y remplazarlo por el código que te proporciona Twitter, para realizar este truco de Twitter sigue las siguientes instrucciones de este post: Obtener el Widget de Twitter

Una vez hecho esto, es momento de dar un clic en “Guardar” y ubícalo donde mejor te parezca

Otra opción de utilización del widget Multi Tabla

Si no quieren utilizar este widget Multi Tabla como widget social, tienen que copiar el siguiente código, y realizar tres cambios para insertar, el código de cualquier widget que quieran que se muestre en la Multi Tabla

1 Abre un gadget “Añadir un gadget”

2 Busca el widget que dice “HTML/Javascript” ábrelo

3 Ingresa las siguientes líneas de código en su interior

<style> .ui-spinner .ui-icon-triangle-1-s {     /* need to fix icons sprite */     background-position: -65px -16px; } .ui-tabs {     position: relative;/* posicion: relativo impide el IE de error de desplazamiento (elemento con posicion: recipiente interior en relación con rebosadero : auto appear as "fixed") */     padding: 0em; } .ui-tabs .ui-tabs-nav {     margin: 0;     padding: 0em 0em 0; } .ui-tabs .ui-tabs-nav li {     list-style: none;     float: left;     position: relative;     top: 0;     margin: 1px .2em 0 0;     padding: 0;     white-space: nowrap; } .ui-tabs .ui-tabs-nav li a {     float: left;     padding: .5em 1em;     text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active {     margin-bottom: -1px;     padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-S7wUohEhYQoz0WpVl9aG9O0SMHyScFl0mEsMpgYPfmBRndeetBd0fQA_ctO6LueAd-I1AvatkNk2OBy5FbrJlUOYrchTs_8rGM8uc6-Sllf3R_K37oA5UT2o-O8C7-tMrDUoNLeNto/s1600/bg-tab.png") repeat-x scroll left top rgb(85, 149, 37); color: rgb(255, 255, 255); font-weight: bold; border-width: 1px ; border-style: solid solid none; border-color: rgb(99, 173, 43) rgb(99, 173, 43) -moz-use-text-color; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; text-shadow: -1px -1px 0px rgb(68, 119, 29); } .ui-tabs .ui-tabs-nav li a, /* primera selección en grupo parece obsoleto, pero requiere superar el error en la aplicación de Opera en el cursor: texto en general, si se define en otro lugar...... */ .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {     cursor: pointer;     font-family: Helvetica;     font-size: 13px; } .ui-tabs .ui-tabs-panel {     display: block;     padding: 1em;     clear: both;     border: 2px solid rgb(85, 149, 37);     position: relative;     overflow: hidden;     z-index: 10; width: 320px; } .ui-tooltip {     padding: 8px;     position: absolute;     z-index: 9999;     max-width: 300px;     -webkit-box-shadow: 0 0 5px #aaa;     box-shadow: 0 0 5px #aaa; } body .ui-tooltip {     border-width: 1px; } /* Contenido del contenedor ----------------------------------*/ .ui-widget {     font-family: Helvetica, Arial,sans-serif;     font-size: 14px; margin-top: -10px; } .ui-widget .ui-widget {     font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {     font-family: Verdana,Arial,sans-serif;     font-size: 1em; } .ui-widget-content {     color: #222222; } .ui-widget-content a {     color: rgb(35, 97, 161); display: block; font-weight: normal; text-decoration: none; } .ui-widget-header {     font-weight: bold; } .ui-widget-header a {     color: #222222; } /* Estado de interacciones ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #e6e6e6;     font-weight: normal;     color: #555555; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {     color: #555555;     text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: none repeat scroll 0% 0% rgb(241, 241, 241);     font-weight: normal;     color: #212121; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited {     color: #212121;     text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {     font-weight: normal;     color: #212121; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {     color: #212121;     text-decoration: none; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#tabs-1">Google +</a></li> <li><a href="#tabs-2">Facebook</a></li> <li><a href="#tabs-3">Twitter</a></li> </ul> <div id="tabs-1"> INSERTA QUI EL CODIGO DEL WIDGET QUE QUIERAS MOSTRAR EN LA PRIMERA TABLA </div> <div id="tabs-2"> INSERTA QUI EL CODIGO DEL WIDGET QUE QUIERAS MOSTRAR EN LA SEGUNDA TABLA </div> <div id="tabs-3"> INSERTA QUI EL CODIGO DEL WIDGET QUE QUIERAS MOSTRAR EN LA TERCERA TABLA </div> </div>

He marcado de color rojo en los lugares que ustedes tendrán que borrarlos y poner en cada una de ellas el código de los Widgets que quieras mostrar.

Eso es todo. Guarda el widget y ubícalo en el sidebar

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones diarias directamente en tu correo electrónico

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Medios de Comunicacion SocialWidgets para Blogger

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.