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
3 comentarios: