ahora os explicare el caso más clásico es el de envolver con texto una foto que se ubicará contra el margen izquierdo.
Aqui lo que debemos hacer es “flotar” hacia la izquierda el elemento, en este caso, la imagen.
Atraer a los usuarios que visitan nuestros blogs con buenos efectos y así animarlos a que se suscriban en nuestros perfiles de redes sociales, es darse a conocer mucho más en el ámbito del internet.
La intención es que nuestros visitantes puedan suscribirse en las diferentes redes sociales y así compartir con ellos nuestras nuevas actualizaciones.
No vamos a insertar ningún Javascript ni tampoco un Jquery, todo el código esta implementado para hacer fácil su instalación.
El código es basado en líneas CSS el cual le dará un efecto a su widget de redes sociales.
y ubicarlo donde mejor os parezca. Lo que vamos hacer es copiar un código en un widget “HTML/Javascript” y realizar tres simples cambios para ubicar las direcciones de nuestra Fanpage de Facebook y de nuestra cuenta de Twitter,
como también existirá un icono de Email para que los usuarios lo puedan contactar a su dirección de correo electrónico. Este truco de Blogger sirve para cualquier página web y blocs.
en la cual se pueden mostrar una galería completa, con avances, retrocesos, pausa, texto, y un link en cada imagen para dirigir a su post o artículo que quiera mostrar.
En este tutorial vamos a usar jQuery, JavaScript, CSS y HTML, bueno realmente es un solo widget en la cual vosotros vais a insertar el código que os proporcionare,
Una vez más he tratado que su instalación sea fácil y de primera. Así que sólo tienes que copiar y pegar el código dentro de un widget "HTML/Javascript" para que las cosas funcionen.
En blogger puedes poner tu firma al final de cada uno de tus post de forma automática de forma muy sencilla.
La firma es importante porque hace que el visitante recuerde tu blog mas fácilmente, es uno de esos detalles que añaden un poco de personalidad a las plantillas de blogger, quién dice firma dice foto anuncio… da igual lo que importa es añadir esos pequeños detalles que hacen que tu blog sea especial.
Quiero poner una firma al final de todos mis posts pero que ya salga sola, que no tenga que ponerla cada vez que hago una entrada.
La podéis ver aquí mismo colocada en un Gadget,solo puede ir en un Gadget “HTML-Javascript”, espero que sea de vuestro agado tal como me agrado ami y lo pongáis en vuestra Web.
En muchos sitios web verá un texto en movimiento, también puede agregarlo a su blog con solo una etiqueta de marquesina.
También puede agregarlo en la parte superior o justo debajo de su barra de navegación.
En este tutorial primero veremos cómo usarlo. la etiqueta de la marquesina y después veremos la etiqueta de la marquesina usando el CSS.
Ahora veamos cómo usar la etiqueta de marquesina.
Ve a tu editor de publicaciones
Cambiar pestaña para Editar HTML
En Editar tipo de sección HTML
Oh ve a Diseño y añade un elemento de pagina “HTML-Javascript” y lo incustas dentro y a volar.
Aquí tenemos la Marquesina Básica que tira a la izquierda i va que te matas
<marquee>BIENVENIDO A TEMAS IMPOSIBLES</marquee>
Y se Verá de esta manera;
Para detener marquesina con el mouse sobre el mouse, deberás usar esta etiqueta
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">BIENVENIDO A TEMAS IMPOSIBLES</marquee>
Y se Verá de esta manera;
Agregar CSS a la etiqueta de la marquesina
Para cambiar el fondo, la familia de fuentes y el color de la fuente, use el siguiente código:
Color del Texto; color:#FF0000;
Color de Fondo #FFCC00 C
<style>
.text
{
color:#FF0000;
font-family:verdana;
background:#ffcc00;
padding:5px;
}
</style>
<div class="text">
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">BIENVENIDO A TEMAS IMPOSIBLES</marquee></div>
.text
{
color:#FF0000;
font-family:verdana;
background:#ffcc00;
padding:5px;
}
</style>
<div class="text">
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">BIENVENIDO A TEMAS IMPOSIBLES</marquee></div>
Y por ultimo lo guardáis todo bien guardadito y listo a otra cosa mariposa espero que el post haya sido de vuestro agrado y hasta otra Amigos.
Cómo quitar Suscribirse a entradas ATOM
Para quitar el aviso de "Suscribirse a entradas ATOM" que sale al final de cada entrada y la verdad hoy en día con las demás funciones que cuenta Blogger ya no tiene sentido y lo que hace es estorbar, hacer lo sigiente.
Entrad a Plantilla / Editar HTML y clic sobre Plantilla de Formato. Y ayudándose del buscador interno de la plantilla Control + F puedes buscar por ejemplo: feedLinks o <data:feedLinksMsg/>
La parte completa del código es esta:
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'><data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<div class='feed-links'><data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
Y borrrar o quitar lo que está en azul; eso sería todo, ya no volverán a visualizar el aviso de los ATOM.
Fuente: www.charkleons.com
Fecha:22/03/2017
Publicado por:
Boton de entradas al azar para Blogger
Una utilidad muy buena para los blogs es incluir un widget para que los usuarios puedan ver entradas aleatorias. Esto se consigue con Javascript y un enlace simple, una imagen o, como en este caso un boton. Con un poco de codigo de CSS3, he diseñado este boton naranja tan chulo con efecto 'presionado', que haciendo click sobre el, te muestra un post al azar automaticamente. Para ponerlo en tu blog de Blogger, tan solo tienes que copiar el codigo de abajo y añadirlo en un gadget HTML, asi de sencillo
Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
<div id='postaleatorio'></div>
<script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Ver una entrada al azar'; document.getElementById('postaleatorio').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script>
<style type='text/css'>
@import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' );
#postaleatorio a {
position: relative;
color: rgba(255,255,255,1) !important;
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#postaleatorio a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>
<script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Ver una entrada al azar'; document.getElementById('postaleatorio').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script>
<style type='text/css'>
@import url( 'http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' );
#postaleatorio a {
position: relative;
color: rgba(255,255,255,1) !important;
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#postaleatorio a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>
Da un clic en “Guardar” Y listo.
Fuente: redeando.blogspot.com
Fecha:18/03/2017
Publicado por:
Mostrar un widget desplegable de categorías para blogger
Despues de presentarte un widget acordeón para blogger, os voy a dar a conocer un widget sencillo en el cual podreis utilizarlo como mejor os convenga. Este widget sirve para insertar manualmente los links de sus artículos que quieras mostrar por categorías, podrás aumentar las categorías y mostrar al momento que los usuarios le den un clic en su categoría. En este widget se desplegara un cuadro en el cual les mostrara los nombres de los artículos que quieran dar a conocer y así obtener mas vistas de algunos post que tal vez los usuarios hayan pasado por alto.
Para instalarlo tienes que seguir estos pasos:
Abrir blogger
1 Da un Clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
<!-- Start HTML - http://www.grupodelecluse.com by www.grupodelecluse.com-->
<table border="1" width="253px" align="center">
<tr>
<th>
<center>
TITULO DEL WIDGET
</center>
</th>
</tr>
<tr>
<th>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 1
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 2
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 3
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 4
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 5
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
</th>
</tr>
</table>
<!-- End javascript - http://www.grupodelecluse.com by www.grupodelecluse.com-->
<table border="1" width="253px" align="center">
<tr>
<th>
<center>
TITULO DEL WIDGET
</center>
</th>
</tr>
<tr>
<th>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 1
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 2
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 3
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 4
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 5
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
</th>
</tr>
</table>
<!-- End javascript - http://www.grupodelecluse.com by www.grupodelecluse.com-->
Realiza estos cambios:
Donde dice CATEGORIA 1 cámbialo por el nombre que tú quieras y hazlo en todas
En la parte que dice URL inserta el link del articulo que quieras mostrar, este paso realizo en todas.
Donde dice TITULO DEL WIDGET pon el nombre que quieras poner al Widget.
Y por ultimo en la parte que dice Título 1 pon el titulo de tu artículo, eso es todo, ahora dale un clic
en “Guardar” y ubica este widget en el lugar que tú quieras de tu blog de blogger.
Fuente: ayudadeblogger
Fecha:10/03/2017
Publicado por
Índice de entradas Personalizable Vertical basado en Etiquetas
Hoy voy a mostrar cómo agregar un índice de las entradas a una página del blog. Tiene muchas opciones de configuración para adaptarlo a vuestro propio diseño las cuales describiré a continuación.
Esta basado en las Etiquetas y lleva el atributo new, que te indica cuales la pagina nueva que se ha editado últimamente se puede ver todas en una Pagina.
Como veis en la imagen, En la izquierda están las Etiquetas y a la derecha el Nombre de la entrada
Después de ver la demostración si Quieres añadirlo a tu blog sigue los pasos siguientes.
En primer lugar tenemos que crear una nueva página. Panel de Administración Páginas,Pagina Nueva, Página en blanco. El editor de la página se abrirá y ahora haga clic en la ficha HTML.
Una vez en la ficha HTML del editor de páginas, agregue el código siguiente
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#252524; /*color fondo etiquetas*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:white;}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;}
#tabbed-toc .toc-tabs {
width:15%;
float:left;}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#4B4B4B; /* background de etiquetas */
color:white;} /* color enlace etiqueta con background */
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#ccc; /* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con background */
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:85%;
float:right;
background-color:#ffffff; /* color separación entre entradas */
border-left:5px solid #ccc; /* borde separación entre etiquetas y entradas */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#3A3A3A; /* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#DFDDDD;} /* primer color separación entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#333; /* color background de las entradas */
color:white; /* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.amorsevillista.com/" title="indice">Amor Sevillista</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "https://famagblogfacil.blogspot.com.es", /* url de tu blog */
containerId: "tabbed-toc",
activeTab: 1,//()
showDates:false,
numChars: 200,
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 5,
newText: " - <em style='color:red;'>Nuevo!</em>"
};
</script>
<script src='https://dl.dropboxusercontent.com/u/54259066/indice.js
' type='text/javascript'></script>
#tabbed-toc {
margin:0 auto;
background-color:#252524; /*color fondo etiquetas*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:white;}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;}
#tabbed-toc .toc-tabs {
width:15%;
float:left;}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#4B4B4B; /* background de etiquetas */
color:white;} /* color enlace etiqueta con background */
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#ccc; /* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con background */
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:85%;
float:right;
background-color:#ffffff; /* color separación entre entradas */
border-left:5px solid #ccc; /* borde separación entre etiquetas y entradas */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#3A3A3A; /* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#DFDDDD;} /* primer color separación entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#333; /* color background de las entradas */
color:white; /* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.amorsevillista.com/" title="indice">Amor Sevillista</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "https://famagblogfacil.blogspot.com.es", /* url de tu blog */
containerId: "tabbed-toc",
activeTab: 1,//()
showDates:false,
numChars: 200,
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 5,
newText: " - <em style='color:red;'>Nuevo!</em>"
};
</script>
<script src='https://dl.dropboxusercontent.com/u/54259066/indice.js
' type='text/javascript'></script>
Ahora cambie la dirección URL en "Url de tu blog"
Puedes cambiar otros ajustes, lo he descrito brevemente en el código .
Después de realizar los cambios, guarda la página y enlázala en el menu o donde quieras, ahora ya puedes ver todo el contenido del blog en una sola página.
Fuente: amorsevillista
Fecha:09/03/2017
Publicado por:
