EL MUNDO DE FAMAG

GADGET DE ETIQUETAS COMO MENÚ DESPLEGABBLE Y ESTILO PERSONALIZABLE.

Lo primero, es que si tienes el gadget de etiquetas elimínalo, ahora ve a Tema, Editar HTML y justo arriba de la etiqueta ]]></b:skin> añade lo siguiente:

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>

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

/*!

* Widget: iLabels | v1.0.4

* by zkreations

*/.labeldrop:checked~.iLabels__button::before{position:fixed;top:0;left:0;width:100%;z-index:800;content:"";cursor:default;height:100%}.widget.Label,.widget.Label .widget-content{overflow:initial!important;}.labeldrop{display:none}.iLabels{font-size:14px;position:relative}.iLabels__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:3px;cursor:pointer;font-weight:500;-webkit-transition:color .3s;transition:color .3s}.iLabels__button::after{content:"";width:8px;height:8px;display:block;border-right:3px solid;border-bottom:3px solid;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:.3s transform;transition:.3s transform}.iLabels__dropdown{height:0;overflow:hidden;position:absolute;top:100%;z-index:9999;width:100%;margin-top:1em;border-radius:3px;opacity:0;-webkit-transition:visibility .3s,opacity .3s,-webkit-transform .3s;transition:visibility .3s,opacity .3s,-webkit-transform .3s;transition:transform .3s,visibility .3s,opacity .3s;transition:transform .3s,visibility .3s,opacity .3s,-webkit-transform .3s;-webkit-transform:translate(0,2em);transform:translate(0,2em);visibility:hidden}.iLabels__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-weight:500}.labeldrop:checked~.iLabels__button::after{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.labeldrop:checked~.iLabels__dropdown{visibility:visible;opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0); overflow:auto;height:auto}.iLabels__dropdown::before{content:"";display:block;top:-8px;position:absolute;right:1em;border-left:8px solid transparent;border-right:8px solid transparent}

/*Personalizar*/

.iLabels__button {

padding: 1.2em; /*=> relleno del "switch"*/

background: rgba(0, 0, 0, 0.05); /*=> fondo del boton "switch"*/

color: rgba(38, 50, 56, 0.5); /*=> fondo del boton "switch"*/

}

.iLabels__button:hover {

color: rgba(38, 50, 56, 0.75); /*=> hover del boton "switch"*/

}

.iLabels__dropdown::before {

border-bottom: 8px solid #fff; /*=> señalador de la lista*/

}

.iLabels__dropdown {

background-color: #fff; /*=> fondo de la lista*/

box-shadow: 0 4px 20px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.15); /*=> Sombra de la lista*/

max-height: 450px; /*=> Alto máximo de la lista */

}

.iLabels__dropdown::-webkit-scrollbar {

width: 6px; /*=> ancho del scroll*/

}

.iLabels__dropdown::-webkit-scrollbar-track {

background-color: rgba(0, 0, 0, 0.1); /*=> color de fondo del trayecto del scroll */

}

.iLabels__dropdown::-webkit-scrollbar-thumb {

background-color: rgba(0, 0, 0, 0.4); /*=> color del indicador del scroll */

}

.iLabels__link {

padding: .8em 1em; /*=> sombra de la lista*/

color: rgba(0, 0, 0, 0.5); /*=> color de los elementos*/

border-bottom: 1px solid rgba(0, 0, 0, 0.05); /*=> borde de elementos*/

}

.iLabels__num {

color: rgba(0, 0, 0, 0.25); /*=> color del indicador numerico*/

font-size: .9em; /*=> fuente*/

font-weight: 700; /*=> grosor de fuente*/

}

Guarda los cambios. Después de esto busca la etiqueta </b:section> y agrega también arriba de ella lo siguiente:

<b:widget id='Label50' title='Etiquetas desplegables' type='Label'>

<b:widget-settings>

<b:widget-setting name='showFreqNumbers'>true</b:widget-setting>

</b:widget-settings>

<b:includable id='main'>

<b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>

<label class='iLabels__button' for='labeldrop'>Elige una etiqueta</label>

<b:loop values='data:labels' var='i'>

<b:if cond='data:showFreqNumbers'><span class='iLabels__num'><data:i.count/> posts</span></b:if></a>

</b:loop>

</nav>

</div>

</b:includable>

</b:widget>

-Finalmente, guarda los cambios y ya tendrás el gadget funcionado en tu blog con el estilo predeterminado que se muestra en la primera imagen del post. En el CSS (el código de la primera parte) se indican los valores que se pueden modificar para darle una apariencia personalizada al gadget.-

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

Fuente; zkreations:

Publicado por;

GADGET DE ÚLTIMAS ENTRADAS (DE ESPECTACULAR ESTILO).

Ya he publicado varios estilos del gadget de últimas entradas, pero estoy seguro que ninguno es tan genial y espectacular como el que voy a publicar hoy que con algo de CSS se ha logrado un gran cambio en el aspecto del gadget, el cual se ve de la siguiente manera:

Para agregar este gadget solo ve a Diseño, Añadir gadget, HTML/JavaScript y pega allí lo siguiente:

-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

var posts_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

</script>

<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>

img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}

.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}

ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}

ul.recent-posts-container {border: 2px solid #FCD6CB; }

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 14px;color: #616662;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #888;}

.recent-posts-details {padding-bottom: 5px;}

a.readmorelink {color: #4DACE3;}

</style>

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

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

Fuente miltrucosblogger.

Publicado por:

MOSTRAR Y OCULTAR EL CONTENIDO EN TU BLOG DE BLOGGER.

Ocultar contenido en Blogger es algo muy fácil de hacer, solo debemos agregar un código en nuestras entradas en modo HTML. Es importante también que cuando se vaya a editar la entrada se haga en modo HTML, porque o sino se perderá el efecto, y será mejor volver a agregar el código. Un buen consejo es realizar primero la entrada, y al final pasar a modo HTML y agregar los códigos.

Los siguientes códigos corresponden a la forma de ocultar contenido con un texto y con una imagen.

Ocultar contenido con un texto

<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a>

</div><div><div class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar

</div></div>

Ocultar contenido con una imagen

</div><div><div class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar

</div></div>

Cabe mencionar que al tener que agregarse el código en modo HTML, el contenido que ubiquemos dentro de él puede ir personalizado, es decir, admite contenido ya editado en su tipo de fuente, tamaño, color y otros, igualmente puede ir video incrustado, por ejemplo un código iframe de YouTube.

El contenido de estos códigos o el código en sí, también puede ir centrado o dentro de un div de alineación, la forma básica de centrarlo sería agregando al inicio la etiqueta <center> y al final la etiqueta </center>.

En el código que muestra una imagen, podemos usar el código que muestra dos imágenes en una, tendríamos que reemplazar la parte en color verde.

</div><div><div class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar

</div></div>

Código con dos imágenes en una:

</div><div><div class="spoiler" style="display: none;">

Aquí el contenido que queremos ocultar

</div></div>

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

Fuente; charkleons.com

Publicado por;

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;

NOTICIAS EN MOVIMIENTO PARA TU BLOG DE BLOGGER.

Hoy revelare un truco para blogger muy fácil de implementarlo en su blog de blogger, en algunas plantillas para blogger que regale se podía ver este truco, llevaba el nombre de Headline o Noticias, y en otras plantillas no, en vista que me han llego cientos de emails pidiéndome que publicara este truco para blogger, lo voy hacer. La inserción del código es muy simple y fácil de realizar. Lo que hará este código es mostrar las últimas publicaciones en texto en movimiento incluyendo la fecha de publicación, el cual se mostrara en la cabecera principal de su blog de blogger. Bueno no voy hacer tan largo este post, a continuación mire su demostración en mi blog de demos, la barra de noticias tiene como nombre Noticias y se encuentra en la cabecera principal de mi blog de demos:

1 Ir a Blogger

2 Da un clic en “Plantilla”

3 Presiona “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

</head>

Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<style>

.headline-wrapper{background:#fff;width:950px;height:22px;border-bottom:1px solid #ffffff;margin:0 auto;padding:0 auto}

.headline{width:950px;line-height:1.4em;text-align:left;font-family:Arial;font-size:13px;color:#000;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}

.headline a:hover{color:#1A13EB;text-decoration:underline}

</style>

A continuación Busca:

Busca cualquiera de estos dos códigos

Una vez que hayas encontrado cualquiera de esos dos códigos tendrás que insertar el siguiente código abajo del código que encontraste

Noticias :

</div>

var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")

cssfeed.addFeed("Headline News", "http://elmundodefamag.com/feeds/posts/default") //Specify "label" plus URL to RSS feed

cssfeed.displayoptions("date") //show the specified additional fields

cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag

cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

</div><div style='clear:both;'/>

</div>

Realiza este cambio:

Borra el texto que esta marcado de color azul elmundodefamag y pon ahí solo el nombre de tu blog de blogger, por ejemplo si tu blog se llama así: ejemplo.elmundodefamag, copia solo lo que dice ejemplo.elmundodefamag y nada mas.

Es momento de dar un clic en “Guardar plantilla”