WIDGET DE IMÁGENES PARA BLOGGER .

 Voy a revelar un truco muy simple para blogger y así lo puedas usar en tu blog de blogger. En trucos para blogger encontraras un widget único con imágenes y una pequeña descripción de tu artículo.

Estoy revelando los grandiosos trucos para blogger con un solo código y podrás obtener este grandioso widget para blogger. Lo podrás usar como tú lo prefieras, en un sidebar o en un post artículo, como tu quieras.

Además podrás aumentar o disminuir las imágenes y como también aumentar el numero de imágenes que quieras mostrar en este widget.




La inserción del código es muy simple, solo debes seguir las instrucciones de configuración al momento de insertar el código.

La idea es dar a conocer los artículos que a veces los usuarios pasan por alto, pero con este widget podrás obtener mas vistas de las páginas que no la tenían.

A continuación mire su demostración en mi blog de demos, al widget lo tengo puesto en el sidebar, pero ustedes también lo podrán poner en algún articulo.

Te gusto verdad!!

Luego de ver su demostración nos dirigimos a trabajar


 Da un clic en “Diseño”

 Da otro clic en “Añadir un gadget”

 Luego se te abrirá una nueva venta en la cual deberás buscar el widget que dice “HTML/Javascript”

Ingresa el siguiente código en su interior

<script language="JavaScript">

imgr = new Array();


imgr[0] = "";

imgr[1] = "";

imgr[2] = "";

imgr[3] = "";

imgr[4] = "";

showRandomImg = true;

tablewidth = 290;

cellspacing = 5;

borderColor = "#fff";

bgTD = "#0b92be";

imgwidth = 185;

imgheight = 250;

fntsize = 14;

acolor = "#FFF";

aBold = true;

icon = " + ";

text = "Comentar";

showPostDate = false;

summaryPost = 0;

summaryFontsize = 1;

summaryColor = "#000";

icon2 = " &rarr; ";

numposts = 5;

home_page = "http://plantillapietro.blogspot.com/feeds/posts/default/-/Farandula";

</script>
<script src="http://sites.google.com/site/musikjisite/js/recent-categori.js" type="text/javascript"></script>

Realiza estos cambios:

Primero debes borrar solo el texto que esta marcado de color purpura plantillapietro.blogspot.com y cámbialo por el nombre de tu pagina web, recuerda solo copia el nombre tal y cual lo tengo señalado, no vayas a copiarlo así; (http://plantillapietro.blogspot.com/) ya que cometerías un error y no se mostrara las imágenes en el widget.

Además también deberás borrar el nombre que se encuentra marcado de color verde Farandula y poner el nombre de cualquier etiqueta que quieras mostrar en este widget, recuerda poner solo un nombre de una etiqueta.

Que es una Etiqueta más información en este enlace

Si quieres aumentar el numero de imágenes en tu widget, deberás buscar este código numposts = 5;   y solo deberás borrar el numero 5 por el numero de imágenes que quieras mostrar en tu widget, por ejemplo podrás poner el numero 8, 10, 12, etc.

Para cambiar el tamaño de la imagen de tu widget busca este código:

imgwidth = 185;

imgheight = 250;

Cambia los números que están marcados de color azul, por ejemplo si quieres aumentar el ancho de la imagen deberías cambiar el numero en este punto imgwidth = 185;  cambia el numero 185 por el numero que tu quieras, al igual si deseas aumentar el tamaño de la imagen de forma vertical, cambia en este punto imgheight = 250;  por el numero que tu quieras.

Si deseas que el widget se vea mas grande deberas buscar este código tablewidth = 290; y cambiar el numero 290 por el numero que tu quieras.

Eso es todo, ahora dale un clic en “Guardar”, ubica tu widget donde tú quieras dar a conocer este nuevo widget.

Data de la Publicación; 12-08-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                    

MENÚ PARA BLOGGER GRADIUS .

Para las que os guste este color o posiblemente os combine con el estilo de vuestro blog o web, aquí tenéis este menú tan chulo diseñado en tono violeta gradient (difuminado) con bordes redondeados.

Esta íntegramente realizado con CSS, es decir que no utiliza ninguna imagen de fondo.

Para ponerlo en Blogger puedes añadir si quieres los dos códigos juntos en un gadget HTML/Javascript.


Y si quieres ponerlos por separado, primero añade el codigo CSS en la plantilla antes entre las etiquetas <head> y guardas.

Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

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

                                                                                 

<style type="text/css">
.violetagradius{width:100%;
height:52px;z-index:3000;
}
.izmvg{float:left;
width:40px;
height:52px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
}
.izmvg,.demvg,.violetagradius a{background: -moz-linear-gradient(bottom, #663399, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#663399), to(#FFFFFF));
border: 2px solid #444444;
}
.demvg{-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
float:left;
width:40px;
height:52px;
border-left:none;
}
.violetagradius a{float:left;
display:block;
height:52px;
border-left:none;
font-family:Helvetica;
line-height:52px;
font-size:18px;
font-weight:900;
text-decoration:none;
color:#FFFFFF !important;
padding:0px 30px 0px 30px;
border-right: 2px solid #444444;-webkit-text-shadow: 2px 1px 2px #000000;-moz-text-shadow: 2px 1px 2px #000000;text-shadow: 2px 1px 2px #000000;
}
.violetagradius a:hover{ background: -moz-linear-gradient(bottom, #441177, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#441177), to(#FFFFFF));
color:#FFFFCC !important;
}
.clear{clear:both;
}
</style>

Aquí teneis  el codigo HTML para colocarlo  alli donde quieras mostrar el menu, escribiendo los enlaces donde pone URL y el texto donde esta indicado en color rojo. Si quieres añadir mas enlaces, solo tienes que poner la linea <a href="URL">TEXTO</a> a continuacion de las otras, tantas veces como quieras.

<div class="violetagradius"><span class="izmvg"></span><a href="URL">TEXTO</a><a href="URL">TEXTO</a><a href="URL">TEXTO</a><span class="demvg"></span></div>

Despues de haber insertado el código, un clic en  "Guardar"

Fecha de la Publicación; 29-07-2019

 Fuente; redeando

 Publicado por;                                                                             

ANIMACIÓN PARA LAS ENTRADAS POPULARES .

Como todos sabemos, en  Blogger  tenemos el gadget de entradas populares. Pues bien, ahora vamos a darle un toque de movimiento con un poquillo de JQuery.
No tiene mucha complicacion y nos quedara muy 'cool'.

Primero, añadimos el gadget de entradas populares, claro, y donde pone "mostrar un maximo de" ponemos 4 entradas.

                                                                     

Ahora añadimos un gadget HTML/Javascript, y en su interior ponemos este codigo:

<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.tags span,
.tags a {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script><br />
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script><br />
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Para que funcione, solo tenemos que mover el gadget con el codigo y ponerlo justo encima del de entradas populares como veis en esta foto.

Fecha de la Publicación; 29-07-2019

 Fuente; redeando

 Publicado por;                                                                                      

CINCO FORMULARIOS DE CONTACTO PARA BLOGGER.

Una de las novedades que me perdí fue el gadget de Formulario de Contacto de Blogger, un formulario con el que nuestros lectores pueden ponerse en comunicación privada con nosotros sin necesidad de que ellos tengan que abrir el correo.

El gadget por sí solo es útil, y aunque no tiene opciones me parece que incluye los campos más básicos y suficientes que la mayoría de los bloggers necesita.

La ventaja de este gadget es que no tenemos que depender de servicios externos que luego nos limitan con un número mensuales de envíos y nos obligan a mantener visible su link.

La desventaja es que su diseño es demasiado simple, y tal vez esa sea una razón por la que muchos usuarios no se atreven a usarlo.

La buena noticia es que esa misma simplicidad de su diseño permite que podamos modificarlo a nuestro gusto y adaptarlo a nuestra plantilla.

Ya saben que no soy muy bueno con el diseño, no obstante ayer dedicando una horas realicé estos ejemplos con los que se podrán dar una idea de la manera como podemos transformar radicalmente estos widgets y pasar de los simple a lo llamativo.


Son 5 diseños, y el código está listo para copiar y pegar. Primero deberás tener el gadget del Formulario, si aún no lo tienes entra en Diseño | Añadir un gadget, se abrirá una ventanita, del menú de la izquierda selecciona Más gadgets y ahí elige Formulario de contacto.




Ya que lo tengas en tu blog entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega el código del estilo del formulario que prefieras. Guarda los cambios y listo.

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:



1 Un clic en “Plantilla”

                                                                     

   2 Un clic en “Editar HTML”

                                                                         

  Ahora se te abrirá el Editor HTML de tu plantilla

                                                                               

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

                                                                                         

3 Busca el siguiente código


]></b:skin>


4  Una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

Estilo Básico

/* Formulario de Contacto, Estilo Básico
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
float: left;
padding: 10px;
background: #d5dde6;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #4a7694;
border: none;
}

Estilo Postal

/* Formulario de Contacto, Estilo Postal
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7FYmSj2H8jYMTmKg_v5XOI_4LvIUaMrIi_kE1sqORfH2YTEXzz4pY7YBfF2EfSmqLjSKxOsqjir1M6paZrOO27ZVvehKBxAsXe1EkZgXaX294mXyGbPGbhm3Gpp-yOl56dsgeizqpiPcY/s74/postal.png);
color: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Estilos del contenedor interno */
.contact-form-widget div.form {
background: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMA7YbHBwioppOyCgevXTAcUxmQ9LGXFPNZNtzT9rrbONCyaGxBxg8pinE0ybvXEOwJ3iUKVejsqRXyx0PtVXbsETINV2NvS0pIDrokbovQv5D27yYThdQ0Lt0ndpTiagVmADpJKcxpqPe/s133/stamp.png);
background-repeat: no-repeat;
background-position: 95% 85%;
padding: 1px 10px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 5px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #a14248;
border: none;
}

Estilo Negro Limón

/* Formulario de Contacto, Estilo Negro Limón
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: #282828;
border-bottom: 35px solid #98bd3c;
color: #98bd3c;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #98bd3c;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #282828;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #F9D423;
color: #282828;
border: none;
}

Estilo Girly

/* Formulario de Contacto, Estilo Girly
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWq_K-jKStn9jCRLNCPl6oPhRBy2dBRaqfG27arGCV-dKo3tlyNEPEg6ejPtSSpRZFirVU8qmqQf47l7Ml2J9ZCyB9oTGK8Nt76bDD_JL1VJ0xqIvSO4p6aKEwJfPU5rDnqzVf9_O8mdz3/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
/* Estilos del contenedor interno */
.contact-form-widget:before {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR5p2X-bT2K-J0GL3U1_edOkK3Ihur27r_oc5VBV43vBA3a9tHQYgp3DTYJaDT8bS7h6i4NMrsC-AcGub886VP59Xf0enMuIGRrLhbwBvqjgtPZAnMVGOojjczbbnMIm7xeX6Do3csG7m3/s160/lazo.png);
background-repeat: no-repeat;
background-position: 100% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #d1f6ff;
color: #424242;
border: none;
}

Estilo Metálico

/* Formulario de Contacto, Estilo Metálico
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #424242;
border-bottom: 25px solid #424242;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwSZZ37kpS-3CynIXyNP44L2wGpnLjM1EuyJw_CEjrN2LjWw4NDH8h_9ymOD28pw3vduVw4Xh_hyDTVc9_ItjkWSkS-UdcVt5eDiQUF9Ied4n6WaTCN4aHRpudJ-GFGVrNhuL9tivoBKo/s128/metal.gif);
color:#424242;
text-shadow: 1px 1px 1px #FFFAFB;
box-shadow: -6px 6px 6px 0px rgba(50, 50, 50, 0.65);
border-radius: 18px;
float: left;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: auto;
border: none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
background: -webkit-linear-gradient(top, #424242, #575757);
background: -moz-linear-gradient(top, #424242, #575757);
background: -ms-linear-gradient(top, #424242, #575757);
background: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
margin-bottom: 10px;
float: right;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #424242;
color: #ccc;
border: none;
}

En color verde he puesto a qué área pertenece cada grupo de estilos por si alguien le quiere modificar algo, o por si alguien se anima a hacer sus propio diseño.
En todos los casos el ancho máximo del gadget se controla en esta parte: max-width: 280px;
Toma en cuenta que algunos estilos al ser CSS3 podrían no verse de la misma manera en todos los navegadores, sobre todo en Internet Explorer.

Fecha de la Publicación; 29-07-2019

 Fuente; ciudadblogger

 Publicado por;