Featured

Mostrando entradas con la etiqueta entradas. Mostrar todas las entradas
Mostrando entradas con la etiqueta entradas. Mostrar todas las entradas
POST RECIENTES CON IMÁGENES PARA MI BLOG DE BLOGGER.



Widget de publicaciones recientes para blogs de Blogger, este widget lo podrás usar en cualquier bloc de Blogger.
Su función e instalación es sumamente fácil, lo único que tendrás que hacer es seguir mis instrucciones y nada mas.
A este widget de Blogger se lo conoce como publicaciones recientes, lo podrás insertar en cualquier parte de su bloc.
Una de las funciones que realiza este widget de publicaciones recientes es indicar las nuevas publicaciones y las antiguas publicaciones de tu bloc, con una imagen en miniatura y también se mostrara un texto de 60 caracteres.

Botón 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

Í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>

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:



Entradas Relacionadas con miniatura.


Colocar un gadget de "Entradas Relacionadas" es una de las cosas que mas se han estado exigiendo este último tiempo, lo cual facilita mucho más el recorrido a los visitantes por nuestro Blog, tal cual lo mencionamos en la forma anterior para agregar dicho Gadget. 

En este caso no lo vamos a hacer por medio de otro sitio que agregue el Gadget de manera automática, sino lo vamos a hacer nosotros mismos mezclando un poco de código. Para que se den una idea de cómo se ve acá les dejo una foto:

Colocar "Entradas Relacionadas" en Blogger.


Anteriormente vimos cómo colocar los gadgets de entradas relacionadas con miniaturas , después otra forma de poner las entradas relacionadas con un efecto y también otra que era proveída por un sitio externo que nos permitía colocar entradas relacionadas con imágenes o con texto.