EL MUNDO DE FAMAG: tutorial

Mostrando entradas con la etiqueta tutorial. Mostrar todas las entradas

NUEVOS ESTILOS EN LAS PRESENTACIONES DE LAS IMÁGENES EN BLOGGER.

nuevos estilos en las presenntaciones delas imágenes de tu blog de Blogger

Características importantes

Muestra la imagen

Al pasar el cursor por la galería de cualquier imagen, dará un efecto envolvente de la imagen y luego mostrara, el título del post, una pequeña descripción de su artículo y un link dirigido hacia el post que queramos destacar y dar a conocer.

Este widget para Blogger nos ayudara a destacar los artículos más destacados de nuestro blog, ayudando a aumentar las vistas de los artículos.

A continuación pueden ver su demostración en el siguiente demo, el widget está ubicado al final del sidebar y tiene como nombre “Galería”

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” ábrelo

5 Inserta el siguiente código en su interior

<style>

.ayudadeblogger { /* 300x188 */

border: 10px solid #FFF;

cursor: pointer;

height: 188px;

margin: 0 auto;

overflow: hidden;

position: relative;

text-align: center;

width: 300px;

}

.ayudadeblogger img { /* la imagen */

display: block;

position: relative;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

opacity: 1;

filter: alpha(opacity=100);

}

.ayudadeblogger:hover img {

-moz-transform: rotate(720deg) scale(0);

-webkit-transform: rotate(720deg) scale(0);

-o-transform: rotate(720deg) scale(0);

-ms-transform: rotate(720deg) scale(0);

transform: rotate(720deg) scale(0);

opacity: 0;

filter: alpha(opacity=0);

}

.ayudadeblogger .mask {

background-color: #094B8D;

height: 188px;

left: 0;

position: absolute;

overflow: hidden;

top: 0;

width: 300px;

-moz-transform: rotate(0deg) scale(1);

-webkit-transform: rotate(0deg) scale(1);

-o-transform: rotate(0deg) scale(1);

-ms-transform: rotate(0deg) scale(1);

transform: rotate(0deg) scale(1);

-moz-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

opacity: 0;

filter: alpha(opacity=0);

}

.ayudadeblogger:hover .mask {

-moz-transform: translateY(0px) rotate(0deg);

-webkit-transform: translateY(0px) rotate(0deg);

-o-transform: translateY(0px) rotate(0deg);

-ms-transform: translateY(0px) rotate(0deg);

transform: translateY(0px) rotate(0deg);

-moz-transition-delay: 0.4s;

-webkit-transition-delay: 0.4s;

-o-transition-delay: 0.4s;

transition-delay: 0.4s;

opacity: 1;

filter: alpha(opacity=100);

}

.ayudadeblogger h4 { /* ecuador-turistico.com */

background-color: rgba(255, 255, 255, 0.5);

color: #fff;

text-align: center;

position: relative;

font-family: Georgia;

font-size: 20px;

margin: 20px 0 0 0;

padding: 5px 0;

text-shadow: 0 3px 1px #000;

-moz-transform: translateY(-200px);

-webkit-transform: translateY(-200px);

-o-transform: translateY(-200px);

-ms-transform: translateY(-200px);

transform: translateY(-200px);

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.ayudadeblogger:hover h4 {

-moz-transform: translateY(0px);

-webkit-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

-moz-transition-delay: 0.7s;

-webkit-transition-delay: 0.7s;

-o-transition-delay: 0.7s;

transition-delay: 0.7s;

}

.ayudadeblogger p {

color: #000;

font-family: Tahoma;

font-size: 13px;

margin: 0;

padding: 15px;

position: relative;

text-align: center;

text-shadow: 1px 1px 1px #FFF;

-moz-transform: translateY(-200px);

-webkit-transform: translateY(-200px);

-o-transform: translateY(-200px);

-ms-transform: translateY(-200px);

transform: translateY(-200px);

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.ayudadeblogger:hover p {

-moz-transform: translateY(0px);

-webkit-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

-moz-transition-delay: 0.6s;

-webkit-transition-delay: 0.6s;

-o-transition-delay: 0.6s;

transition-delay: 0.6s;

}

.ayudadeblogger a.info {

background-color: #456;

border-radius: 5px;

box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;

color: #FFF;

display: inline-block;

padding: 7px 14px;

text-decoration: none;

-moz-transform: translateY(-200px);

-webkit-transform: translateY(-200px);

-o-transform: translateY(-200px);

-ms-transform: translateY(-200px);

transform: translateY(-200px);

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.ayudadeblogger a.info:hover {

box-shadow: 0 0 5px #FFF;

}

.ayudadeblogger:hover a.info {

-moz-transform: translateY(0px);

-webkit-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

-moz-transition-delay: 0.5s;

-webkit-transition-delay: 0.5s;

-o-transition-delay: 0.5s;

transition-delay: 0.5s;

}

</style>

<h4> AQUI EL TITULO </h4>

<p> Aquí su texto resumido </p>

</div>

<h4> AQUI EL TITULO </h4>

<p> Aquí su texto resumido </p>

</div>

<h4> AQUI EL TITULO </h4>

<p> Aquí su texto resumido </p>

</div>

<h4> verde AQUI EL TITULO título de algún post en particular</h4>

<p> anaranjado Aquí su texto resumido artículo que estés dando a conocer.</p>

</div>

Realiza estos cambios:

He marcado de 4 colores deferentes en los lugares que ustedes tendrán que realizar sus diferentes cambios

La URL que está marcada de color rojo representa a cada una de las imágenes a mostrar, recuerda publicar una imagen que tenga una dimensión de 300x200 prixeles, y todas deberán tener esa misma dimensión para que no se salga de contexto las imágenes.

Cambia las URLs que están marcadas de color azul, por la dirección URL del artículo que quieras a conocer.

Borra las palabras que están marcadas de color verde, por el título de algún post en particular

Y por último, borra el texto que está marcado de color anaranjado y cámbialo por un pequeño resumen del artículo que estés dando a conocer.

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo widget de imágenes el sidebar de tu blog de Blogger

Fecha de la Publicación; 14-11-2020

Fuente; ayudadeblogger

Publicado por;

INSERTAR UNA MULTICOLUMNA EN TU BLOG DE BLOGGER.

La utilidad de crear nuevos Widgets en nuestro Blogger es una de las formas en la que le damos más vida a nuestro blog y así tener nuestro Blogger como una página de diseño web profesional. El día de hoy va a aprender con unos simples pasos a insertar un código que hará todo este proceso. Este nuevo widget puede convertirse en tres columnas, cuatro columnas o tantas columnas como desee. Además este nuevo widget de pie de página tiene algunos grandes efectos añadidos a la misma CSS que hace que sea aún mejor. Lo que vamos hacer es insertar un código en el Editor HTML de nuestra plantilla--

Un clic en “Plantilla

3 Abre “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

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, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

4 Busca este código

]]></b:skin>

Despues de encontrar el código, inserta el siguiente código arriba del código que encontraste

#lower {

margin:auto;

padding: 0px 0px 10px 0px;

width: 100%;

background:#333333;

}

#lower-wrapper {

background:#333333;

margin:auto;

padding: 20px 0px 20px 0px;

width: 960px;

border:0;

}

#lowerbar-wrapper {

background:#333333;

float: left;

margin: 0px 5px auto;

padding-bottom: 20px;

width: 23%;

text-align: justify;

color:#ddd;

font: bold 12px Arial, Tahoma, Verdana;

line-height: 1.6em;

word-wrap: break-word;

overflow: hidden;

}

.lowerbar {margin: 0; padding: 0;}

.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {

margin: 0px 0px 10px 0px;

padding: 3px 0px 3px 0px;

text-align: left;

border:0;

color:#ddd;

text-transform:uppercase;

font: bold 14px Arial, Tahoma, Verdana;

}

.lowerbar ul {

color:#fff;

margin: 0 auto;

padding: 0;

list-style-type: none;

}

.lowerbar li {

display:block;

color:#fff;

line-height: 1.6em;

margin-left: 0 !important;

padding: 6px;

border-bottom: 1px solid #222;

border-top: 1px solid #444;

list-style-type: none;

}

.lowerbar li a {

text-decoration:none; color: #DBDBDB;

}

.lowerbar li a:hover {

text-decoration:underline;

}

.lowerbar li:hover {

display:block;

background: #222;

}

Si quieres cambiar de color a la multicolumna basta con cambiar los números que están marcados de color verde por el número de color que tú quieras.

5 Ahora busca este otro código

</body>

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

]</body>

Espues de encontrar el código, inserta el siguiente código arriba del código que encontraste

<b:section class='lowerbar' id='lowerbar1' preferred='yes'>

</b:section>

</div>

<b:section class='lowerbar' id='lowerbar2' preferred='yes'>

</b:section>

</div>

<b:section class='lowerbar' id='lowerbar3' preferred='yes'>

</b:section>

</div>

<b:section class='lowerbar' id='lowerbar4' preferred='yes'>

</b:section>

</div>

</div> </div>

Con el código que acabo de insertar le representara 4 columnas en su blog de Blogger y se verá tal como se muestra en la siguiente imagen en el diseño de su blog. Con esto obtendrá nuevos puestos para ubicar nuevos Widgets. Antes de dirigirte a Diseño tendrás que dar un clic en “Guardar Plantilla”

¿Cómo personalizar el widget?

Bueno voy a mantener la sencillez. Creo que los colores, el tamaño total y el relleno y márgenes son simplemente perfectos. La única cosa que usted tendrá que ajustar de acuerdo a la plantilla es el ancho del widget y el número de columnas verticales.

1. Con el fin de reducir o aumentar la anchura total del widget simplemente cambie el ancho donde dice: 960px;

2. Si desea reducir el número de widgets a tres entonces simplemente elimine esta parte del código

--------------------------------------------------------------------

div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='lowerbar4' preferred='yes'>

</b:section>

</div>

--------------------------------------------------------------------

3. O si usted desea agregar una columna adicional a continuación, agregue su nuevo código justo por encima del código que está marcado de color anaranjado

--------------------------------------------------------------------------------

-------------------------------------------------------------------------------

Inserta el siguiente código justo arriba del código que está marcado de color anaranjado

--------------------------------------------------------------------------------------

<b:section class='lowerbar' id='lowerbar5' preferred='yes'>

</b:section>

</div>

--------------------------------------------------------------------------------------

Recuerde que lowerbar5 se refiere al número de columna.

Después de haber agregado la quinta columna a continuación, tendrá que cambiar el width: 23%; por width: 17%;

Deberá repetir el paso 3 para todas las columnas nuevas que desea crear. Sin embargo, tres, cuatro y cinco columnas son un estándar. El aumento de ellos hará que las cosas se vean feas.

Nota: Si quieres dejarlo tal como está en mi tutorial solo debes seguir las instrucciones hasta el paso 5 y si gustas aumentar o disminuir el número de columnas sigue las demás instrucciones