CÓMO HACER UN COPIA DE SEGURIDAD EN MI BLOG DE BLOGGER
CAMBIAR LAS ETIQUETAS POR UN MENÚ DESPLEGABLE
OPCIONES DE PAGINACIÓN PARA BLOGGER
es agregar un sistema de Paginación, en esta oportunidad ESCAPARATE DIGITAL 2019 te trae un código para agregar una Paginación para Blogger.
Una de las grandes ventajas que busco con este sistema de Paginación para el blog es que sea sencillo de instalar y que no requiera modificar elcódigo fuente de la plantilla de tu blog como otros sistemas de Paginación para blogger disponibles, es decir que se coloque en tu blog de la misma forma que cualquier otro gadgets o widgets.
COLOCAR UN MENSAJE EN LA BARRA DE ESTADO DEL BLOG,
TUTORIAL PARA AGREGAR ACCESORIOS AL BLOG.
Aquí te mostraré paso a paso como agregar los accesorios para el blog gratis, que encuentras en cualquier Pagina Web o Blog para instaurar en tu blogger.
BOTON DE IR ARRIBA Y IR ABAJO PARA BLOGGER
ME GUSTA FACEBOOK + GOOGLE
Es de suma importancia dar a conocer nuestro blog en las redes sociales mas conocidas como, Facebook, Google + y Twitter, poder compartir lo que haces y que la gente lo comparta, en sus perfiles, dará como lugar a que tu blog sea visitado por mas personas en todo el mundo. Una buena opción para promocionar tu blog de blogger.
No voy hacer este tutorial demasiado extenso ya que solo deberán insertar un solo código en un widget y realizar tres simples cambios.
El widget que van aprender a insertar en su blog de blogger se mostrara al momento que un visitante abra su blog y se abrirá automáticamente un popout de bienvenida en la cual estará presente los iconos de compartir un me gusta de Facebook, Google + y Twitter.
Así que es un código que no le dará errores en el proceso de SEO.
CONTROL DESLIZANTE CON JAVASCRIPT PARA BLOGGER
Este control deslizante contiene una cinta en la esquina superior izquierda del control deslizante y se denomina "What's Hot"; también contiene un hermoso efecto de corte que rebana la imagen en 12 partes, estas características principales aumentan la belleza del control deslizante.
Otra gran característica de este control deslizante es que es altamente personalizable para que lo edites como desees y que se adapte perfectamente a tu blog.
Este control deslizante está creado por menucool.com y He creado una versión para blogger de este control deslizante que funciona perfectamente con el blog de blogger.
GALERÍA DE IMÁGENES CON OPCIONES DE PERSONALIZACIÓN
Anteriormente publicamos un tutorial sobre cómo agregar el control deslizante de nivo a blogger, pero muchos de ustedes tienen los problemas y lo agregan al blogger de blogger. .
Es por eso que consideré compartir un deslizador / galería de imágenes totalmente personalizable y fácilmente.
Este es un simple deslizador de imágenes con muchas opciones de personalización como dimensiones, reproducción, pausa, intervalo entre la diapositiva siguiente y anterior y algunas otras opciones.
MENÚ DESPLEGABLE HORIZONTAL PARA BLOGGER
Este menú también está diseñado con el uso de CSS3 puro, como compartimos antes de un excelente menú desplegable css3 de múltiples niveles.
Este menú está diseñado por Nick La de webdesignerwall .
Como siempre he probado mi mejor nivel para hacerlo en la instalación por pasos. Así que solo tiene que copiar y pegar el código.
Puede agregar este menú como un widget HTML / JavaScript para que pueda no edite su plantilla :). Veamos cómo agregarla al blogger blogger.
ESTILOS DE PAGINACIÓN PARA BLOGGER CON CSS
A sí que si estabas pensando poner una barra de paginación en tu blog pero el color de la paginación no se ajustaba a tu gusto, puedes escoger entre estos 6 estilos de paginación que bienen en distintos colores, escoge el que más te guste.
El color de los estilos es el mismo que pueden ver en la imagen de arriba.
QUITAR MORE Y CENTRAR MÁS INFORMACIÓN
IMÁGENES APILADAS EN BLOGGER
A mí me ha encantado dicho efecto, y por eso me ha encandilado y me ha motivado para escribir está entrada.
WIDGETS PARA BLOGGER - NUEVAS PUBLICACIONES
Es la solución perfecta para las revistas en línea o blogs simples y viene con opciones de personalización disponibles.
Usted puede dinámicamente cambiar su tamaño a cualquier dimensión deseada. La visualización de una lista de las entradas recientes en la columna lateral es una gran manera de mantener a sus visitantes ocupados.
Hay un montón de Widgets de mensajes recientes que puede utilizar, pero el que estaremos cubriendo en este post sin duda capta la atención de la gente en su blog.
Este Widget se ha personalizado añadiendo un poco de código CSS.
HEADLINE DE NOTICIAS MANUAL EN UN SOLO WIDGET
Te comento que lo podrás realizar de forma manual y así aumentar las vistas de tus antiguos post que tal vez los usuarios que visitan tu blog no lo hayan encontrado.
Un Headline de Noticias sirve para mostrar los temas más destacados de nuestros post.
La funcionalidad del Headline de Noticias para blogger es muy fácil de realizarlo
solo vamos a copiar un código e insertarlo en un solo widget y no necesitaran ingres
ar en el Editor HTML de su plantilla
MENÚ HORIZONTAL 'HOVERCOLOR
Como veis, tiene un diseño elegante en color azul que, al pulsar sobre uno de los botones cambia de color gradualmenteademás se puede personalizar un poquito y colocar mas menús.
Panel Ultimas Entradas con efecto loader
En este artículo vamos a ver cómo lograr este sencillo slider que, sin duda, añade un plus de usabilidad a la web ya que usa la típica imagen de Ajax Loader y el usuario sabrá que hay alguna acción que se está realizando en la web.El slider además de tener el efecto carga, lleva descripciones de las entradas mediante Tooltip y se podrá navegar a las entradas mediante las imágenes. Está configurado como slider pero también se puedeajustar a la sidebar cambiando algunos parámetros que veremos más abajo.
Como personalizar la nube de etiquetas de blogger
Alinear la imagen dentro de la página
Nota: El atributo align en las imágenes ha quedado obsoleto con el HTML5 y se debe usar CSS para implementar esos estilos.
Sin embargo, ya hemos dicho que la etiqueta <img> puede aceptar el atributo align. En este caso, la utilidad que le damos difiere de la anterior.
El hecho de utilizar el atributo align dentro de la etiqueta <img> nos permite, en el caso de darle los valores left o right, justificar la imagen del lado que deseamos a la vez que rellenamos con texto el lado opuesto. De esta forma embebemos nuestras imágenes dentro del texto de una manera sencilla.
Crear Bar Flotante
Me gusta Facebook+ Google
Algunas páginas web o blogger ya utilizan este sistema así que no es cosa de otro mundo.
Implementación del código
1 Ir a blogger
2 Da un clic en “Diseño”
3 Busca el gadget “Añadir un gadget” y ábrelo
4 Se te abrirá una nueva ventana en la cual tendrás que buscar el widget que dice “HTML/Javascript” ábrelo e inserta en su interior las siguientes líneas de código
<style>
#stp-bg{
display:none;
position:fixed;
_position:absolute; /* star by ayudadeblogger.com*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:998;
}
#stp-main{
position:fixed;
top:220px;
_position:absolute; /* hack for IE 6*/
display:none;
width:450px;
border:7px solid #2f2f2f;
background:#fff;
z-index:999;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin:0pt;
padding:0pt;
color:#333333;
text-align:left;
font-family:arial,sans-serif !important;
font-size:13px;
}
#stp-title{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
font-size:18px;
padding:13px 0 13px 15px;
}
#stp-close{
float:right;
font-size:14px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
color:#777777 !important;
margin:0 13px 0 0;
border-bottom:0px !important;
text-decoration:none !important;
}
#stp-close:hover{
text-decoration:none !important;
}
#stp-msg{
background:#4074CF;
padding:10px 15px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif !important;
font-weight:bold;
line-height:20px;
}
#stp-buttons{
margin:25px 0px 25px 120px;
padding:0 0 0 15px;
}
#stp-bottom{
padding:15px 10px;
background:#EFEFEF;
color:#95989F;
border-top:1px solid #DDE0E8;
}
#stp-counter{
font-size:11px !important;
text-align:right;
font-weight:bold;
}
.stp-button{
float:left;
width:120px;
}
.stp-clear{
clear:both !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://connect.facebook.net/es_LA/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://yourjavascript.com/114356611/jquery-stp-min.js">
</script>
<script> $(document).ready(function(){ $().socialTrafficPop({ timeout: 30, title: "Bienvenido a Ayudadeblogger.com",
message: 'No te olvides de Recomendarnos <em> en las redes sociales</em>! ', google_url: "http://www.ayudadeblogger.com/", google_size: "tall", fb_url: "http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017", fb_layout: "box_count", closeable: true, advancedClose: false, opacity: '0.45', twitter_on: true
});
});
</script>
#stp-bg{
display:none;
position:fixed;
_position:absolute; /* star by ayudadeblogger.com*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:998;
}
#stp-main{
position:fixed;
top:220px;
_position:absolute; /* hack for IE 6*/
display:none;
width:450px;
border:7px solid #2f2f2f;
background:#fff;
z-index:999;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin:0pt;
padding:0pt;
color:#333333;
text-align:left;
font-family:arial,sans-serif !important;
font-size:13px;
}
#stp-title{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
font-size:18px;
padding:13px 0 13px 15px;
}
#stp-close{
float:right;
font-size:14px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
color:#777777 !important;
margin:0 13px 0 0;
border-bottom:0px !important;
text-decoration:none !important;
}
#stp-close:hover{
text-decoration:none !important;
}
#stp-msg{
background:#4074CF;
padding:10px 15px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif !important;
font-weight:bold;
line-height:20px;
}
#stp-buttons{
margin:25px 0px 25px 120px;
padding:0 0 0 15px;
}
#stp-bottom{
padding:15px 10px;
background:#EFEFEF;
color:#95989F;
border-top:1px solid #DDE0E8;
}
#stp-counter{
font-size:11px !important;
text-align:right;
font-weight:bold;
}
.stp-button{
float:left;
width:120px;
}
.stp-clear{
clear:both !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://connect.facebook.net/es_LA/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
<script type="text/javascript" src="http://yourjavascript.com/114356611/jquery-stp-min.js">
</script>
<script> $(document).ready(function(){ $().socialTrafficPop({ timeout: 30, title: "Bienvenido a Ayudadeblogger.com",
message: 'No te olvides de Recomendarnos <em> en las redes sociales</em>! ', google_url: "http://www.ayudadeblogger.com/", google_size: "tall", fb_url: "http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017", fb_layout: "box_count", closeable: true, advancedClose: false, opacity: '0.45', twitter_on: true
});
});
</script>
Realiza estos cambios:
He marcado tres puntos de diferentes colores en los cuales tendrás que cambiarlos, donde dice Bienvenido a Ayudadeblogger.com cámbialo por un tema de bienvenida de tu blog.
También deberás remplazar el link que esta marcado de color azul http://www.ayudadeblogger.com/ y poner el link de tu blog de blogger.
Y por ultimo en la misma posición vas a encontrar un link marcado de color verde http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017 este link es el que uso en mi Fanpage de Facebook, deberás borrarlo y poner el link de tu Fanpage de Facebook.
Eso es todo ahora dale un clic en “Guardar” y ubica tu widget donde tu quieras, y mira tus nuevos cambios en tu blog.
Publicado por;
Suscribirse a:
Entradas (Atom)
0 comentarios: