Mis Blocs
Ultimas entradas
Entradas Destacadas
PÁGINA DE BIENVENIDA
PÁGINA DE BIENVENIDA
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”
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>
Una vez que hayas encontrado el código, tendrás que insertar las siguientes líneas de código justo 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;
}
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.
Ahora busca este otro código
</body>
Luego de encontrar el código, inserta el siguiente código arriba del código que encontraste
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</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”
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.
Con el fin de reducir o aumentar la anchura total del widget simplemente cambie el ancho donde dice: 960px;
Si desea reducir el número de widgets a tres entonces simplemente elimina esta parte del código
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
si deseas agregar una columna adicional a continuación, agrega este nuevo código justo por encima del código que está marcado de color anaranjado
<div style='clear: both;'/>
Inserta el siguiente código justo arriba del código que está marcado de color anaranjado
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
</b:section>
</div>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
</b:section>
</div>
Recuerda 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ás 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
Fuente; ayudadeblogger
Publicado por;
En el siguiente ejemplo tendremos la posibilidad de:
Ordenar alfabéticamente por Categorías.
Ordenar alfabéticamente por Título.
Ordenar por Fecha de publicación.
Mostrar la fecha de publicación.
Definir el texto o marca que aparece en los últimos artículos.
Ejm: New!!
Determinar el número de artículos a los que poner la marca.
Lo primero que hacemos es acceder al panel de control de Blogger y nos situamos sobre la opción Páginas del menú de la parte izquierda
A continuación hacemos clic sobre el botón Página nueva
En el campo con el texto Título de la página escribimos Indice y en el área de escritura de mayor tamaño introducimos el siguiente código:
<div id="all-post" class="all-post"></div>
<script>
var conf = {
sortBy: 'orderlabel', // forma en que se muestran las artículos publicados
lastPost: 10, // últimos post (10) a los que les pongo una marca
date: 1, // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
newPost: 'Nuevo!!', // texto o marca que aparece en los últimos artículos
newtab: 1 // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js"></script>
<script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script>
var conf = {
sortBy: 'orderlabel', // forma en que se muestran las artículos publicados
lastPost: 10, // últimos post (10) a los que les pongo una marca
date: 1, // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
newPost: 'Nuevo!!', // texto o marca que aparece en los últimos artículos
newtab: 1 // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js"></script>
<script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Vamos a analizar los parámetros de configuración:
sortBy puede tomar los siguientes valores:
orderlabel: ordena alfabéticamente por Categorías
titleasc: ordena alfabéticamente por Título del Post (de A a Z)
titledesc: ordena alfabéticamente por Título del Post (de Z a A)
dateoldest: ordena el Título del Post por fecha de publicación (del más antiguo al más reciente)
datenewest: ordena el Título del Post por fecha de publicación (del más reciente al más antiguo).
lastPost: número de artículos que aparecerán como nuevos, ordenados por última fecha de publicación.
date: 0 si no queremos mostrar la fecha de publicación del artículo o 1 para mostrarla.
newPost: texto o etiqueta que aparecerán en los artículos nuevos.
newtab: 0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
Como indicación final, sustituimos el texto [URL DE TU BLOG] por la dirección de nuestro blog (en mi caso: https://trucosparabloggerkiradober.blogspot.com).
Si además, queremos añadir estilos al Índice para que resulte más atractivo, podemos incluir clases de la siguiente forma:VA PUESTO DELANTE DEL PRIMER SCRIPT,
<style type="text/css">
.all-post ol{
list-style-type: circle
}
.all-post li a{
text-decoration:none;
padding:0 2px;
color:#445;
font-size:1.2rem
}
.all-post a:visited{
color:#445;
text-decoration:none
}
.all-post a:hover{
outline:0;
text-decoration:none;
color:#eee
}
.all-post li{
background:#eee;
padding:.5rem 1rem;
border-bottom:1px solid #c5c5c5
}
.all-post li span{
color:#888;
font-family:Impact,Charcoal,sans-serif;
font-size:.7rem
}
.all-post li:nth-child(){
background-color:#f5f5f5;
border-bottom:1px solid #b5b5b5
}
.all-post li:hover{
background:#1680c6
}
.all-post {
margin:3px auto;
font-size:1rem;
font-weight:400;
letter-spacing:1px
}
.all-post ol li strong em{
font-style:italic;
color:#d24f18
}
.all-post p a{
margin:0 0 10px 0;
padding:10px;
color: #fff;
font-size:1rem;
line-height:16px;
font-family:'Oswald',sans-serif;
font-weight:normal;
text-decoration:none;
outline:1px dashed #98abb9;
outline-offset:-2px;
background-color:#1680c6;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #000;
box-shadow:2px 2px 2px #000
}
</style>
.all-post ol{
list-style-type: circle
}
.all-post li a{
text-decoration:none;
padding:0 2px;
color:#445;
font-size:1.2rem
}
.all-post a:visited{
color:#445;
text-decoration:none
}
.all-post a:hover{
outline:0;
text-decoration:none;
color:#eee
}
.all-post li{
background:#eee;
padding:.5rem 1rem;
border-bottom:1px solid #c5c5c5
}
.all-post li span{
color:#888;
font-family:Impact,Charcoal,sans-serif;
font-size:.7rem
}
.all-post li:nth-child(){
background-color:#f5f5f5;
border-bottom:1px solid #b5b5b5
}
.all-post li:hover{
background:#1680c6
}
.all-post {
margin:3px auto;
font-size:1rem;
font-weight:400;
letter-spacing:1px
}
.all-post ol li strong em{
font-style:italic;
color:#d24f18
}
.all-post p a{
margin:0 0 10px 0;
padding:10px;
color: #fff;
font-size:1rem;
line-height:16px;
font-family:'Oswald',sans-serif;
font-weight:normal;
text-decoration:none;
outline:1px dashed #98abb9;
outline-offset:-2px;
background-color:#1680c6;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #000;
box-shadow:2px 2px 2px #000
}
</style>
Fuente; jmacuna.tecnoblog
Publicado por;
Para usarlo en tu blog sólo basta con poner este código en una entrada cada vez que lo quieras usar:
<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>
Ahí sólo tienes que agregar donde se indica el contenido que quieres ocultar. Si el botón no te gusta mucho puedes leer esta entrada para saber cómo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un botón
En ese caso el código a usar es este:
Aquí el contenido que queremos ocultar
<div class="divspoiler">
<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>
<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>
Aquí el contenido que queremos ocultar
COLOCAR IMÁGENES O BANNERS CON MOVIMIENTO EN BLOGGER
By Blogs Famag - martes, agosto 06, 2019
Les voy a mostrar cómo se hace una fila de imágenes con movimiento, a las cuales al hacer clic sobre ellas, se es redirigido a su contenido.
Esto se puede usar en las columnas o en una parte horizontal del diseño de la plantilla, dependiendo de las partes que usen.
Para ello vamos a usar el código <marquee> </marquee> el cual iría dentro de un gadget HTML / Javascript. La ruta sería: Diseño / Añadir un Gadget / HTML-Javascript
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
Un ejemplo del código para una fila con dos imágenes desplazá
ndose de derecha a izquierda sería:
<marquee scrolldelay="1" scrollamount="2" direction="left" loop="infinite" onmouseout="this.start()" onmouseover="this.stop()"><a href="URL que Redirecciona al tema 1" target="_blank"><img title="Titulo de la entrada" alt="Titulo de la entrada" src="URL de la imagen 1" height ="80px" width="80px"/></a><a href="URL que Redirecciona al tema 2" target="_blank"><img title="Titulo de la entrada" alt="Titulo de la entrada" src="URL de la imagen 2" height ="80px" width="80px" /></a></marquee>
Y el Resultado:
El target="_blank" se usa para que al hacer clic sobre la imagen, el enlace se abra en otra pestaña o ventana; casi no se usa, ya que por lo general se quiere que se abra un contenido propio de la página.
El código puede contener varias partes.
El movimiento se maneja con Behavior y Scroll.
Scroll hace que las imágenes o el contenido se desplacen como en un círculo, es decir, que sale por un lado, desaparece en el lado opuesto, y vuelve a salir por el primer lado.
Behavior, conozco dos, behavior="alternate" que hace que rebote el contenido de un lado a otro, y behavior="slide" que hace que el contenido comience en un lado y al llegar al otro extremo se detenga.
Ejemplo: <marquee behavior="alternate"></marquee>
onmouseout="this.start()" onmouseover="this.stop()" »»» Esto hace que al colocar el puntero del mouse sobre la imagen, ésta se detenga.
direction= »»» Esto define el sentido (dirección) en la que se desplazarán las imágenes o el contenido.
Se usan:
direction="left" para que se desplace de derecha a izquierda.
direction="right" para que se desplace de izquierda a derecha.
direction="up" para que se desplace de abajo hacia arriba.
direction="down" para que se desplace de arriba hacia abajo.
scrolldelay= »»» Esto define la velocidad con la que se desplazan las imágenes o el contenido. Cuanto menor sea el número, mayor será la velocidad. Ejemplo:
scrolldelay="200" » Lento
scrolldelay="1" » Rápido
Esto casi no se modifica ya que lo que le da velocidad realmente es el scrollamount ya que es la distancia que avanza la imagen.
scrollamount= »»» Esto define la cantidad de píxeles que avanzarán las imágenes o el contenido. Ejemplo:
scrollamount="2" » Se verá un movimiento normal.
scrollamount="100" » Se verá como si flash estuviera corriendo jejeje.
loop= »»» Esto define si el movimiento se repetirá o no. No es necesario su uso cuando se usa behavior.
Ejemplo:
loop="10" » Se repetirá 10 veces.
loop="infinite" o loop="-1" » Se repetirá indefinidamente.
width= »»» Determina el ancho del área en la que se desplazará el contenido; se maneja en píxeles o en porcentaje. Entonces con un width="200px" la marquesina tendrá esa medida y con un width="50%" si el área donde queremos ubicar el código tiene 900px, solo se usará la mitad 450px.
height= »»» Similar al width= Casi no se usa ya que se maneja el alto de las imágenes.
Funciones que se manejan para o con una marquesina:
align= »»» Su función es indicar la ubicación del contenido (texto o imágenes) dentro del código. Se usan: "top" (en la parte alta), "middle" (en la parte media) o "bottom" (en la parte baja). Todo esto depende de si el código lleva height y width dentro del <marquee ******> para definir el tamaño de la marquesina; esto casi no se usa, ya que el tamaño lo definimos con el de las imágenes. Ejemplo: align="top"
bgcolor= »»» Esto define el color de fondo que llevará la marquesina. Ejemplo: bgcolor="#FFFFFF"
Si se omite esta parte, el fondo será transparente.
Extras
Dentro de la parte del link de la imagen <img ******* /> van:
alt= y title= »»» Permiten que al pasar el puntero del mouse sobre la imagen se visualice una leyenda (texto). Se deben usar ambos, ya que los navegadores, o leen ambos, o leen solo uno. Ejemplo:
alt="Titulo de la Entrada" title="Titulo de la Entrada"
El alt= Lo usa el internet explorer y el title= lo usan o leen el resto de navegadores.
height= y width= »»» Determinan un tamaño preciso o definido para las imágenes, es decir, si las imágenes que incluya el código tienen diferentes tamaños, con estas partes se les puede designar un mismo tamaño para todas. Ejemplo: height ="80px" width="80px"
Dentro de la parte del link que redirecciona <a href="" ******* > se puede agregar:
target="_blank" »»» Para que el link se abra en otra pestaña o ventana.
Fecha de la Publicación; 06-08-2019
Fuente; charkleons
Publicado por;
Hoy voy a compartir un widget tan novedoso e interesante, lo que vamos a hacer es cambiar la caja de nuestra etiqueta y convertirla en un widget agradable para todos nuestros lectores.
Tener una buena apariencia en nuestro blog hace que sus lectores se interesen más en sus publicaciones.
A continuación les voy a explicar paso a paso a como tener un lindo y maravilloso widget de etiquetas totalmente modificado.
Pueden ver su demostración en la siguiente página de demos, el widget de etiquetas esta ubicado al final del sidebar.
Ver DEMO
1 Diríjase a "Diseño"
2 Abrir un gadget
3 Buscar “Etiquetas” tal como se muestra en la imagen
4 Configure su etiqueta tal como se muestra en la imagen a continuación
5 Dele un clic en “Guardar” y luego realice lo siguiente
6 Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
7 Busque este código ]]></b:skin> y encima de él, inserte el siguiente código.
/*-----Nuevo estilo de etiquetas widget by www.ayudadeblogger.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #0000FF;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #0000FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #0000FF;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #0000FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}
Despues de haber insertado el código, dele un clic en “Guardar plantila” y listo ya tiene su nuevo estilo de etiquetas completamente renovado para su blog de blogger.
Fecha de la Publicación; 05-08-2019
Fuente; ayudadeblogger
Publicado por;