PÁGINA DE BIENVENIDA
Blog
Entrada destacada
AGREGAR BOTONES DE REDES SOCIALES EN MI BLOG DE BLOGGER
"BLOGS FAMAG "
Estos son unos botones muy sencillos pero muy prácticos para que nuestros lectores puedan seguirnos en las diferentes redes sociales. No es nada del otro mundo, sólo son iconos agrupados en una lista que tienen un efecto pushbutton al pasar el cursor sobre ellos.
Puedes verlos en esta misma entrada.
Para poner estos botones de las redes sociales en tu blog sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega los siguientes estilos:
Un clic en “Plantilla”
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,
Busca el siguiente código
]></b:skin>
4 Justo arriba del código que encontraste, inserta las siguientes lineas de código.
/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}
Despues de haber insertado el código, un clic en “Guardar plantilla”
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
<ul class="BotonesSociales">
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbkj13z7CZXQsS_6l2afwIbGiiQYeTVKzmhekBz-JmkNGBhgMMehiSw6QdLaY4G0tspesuBuSw3k1chHGFrpKCcJ-IzdB1PUdxgb6y2jKKb1q926LQPCBVjWQywJsxgadCrMLIYUTCEg/" /> <span>Agrégame en tus círculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HbNUScYmgXP7pUqwc8LGT3Da_eVdicDHPilrBD_XjWXWg2rKXhSFxYOybOr2-sErCDJBmaTT8Lqax5Jo7KxhtcVKaVQpAcwmu44mc1cOGSHbddCzf-bsuzBKQoxdP3d0_e6ZjW3uq7E/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7VAz7_CgEzlgRbF6rN5HB2TBDZbQh8poHwv_Cmbua-D5ztyDkkSoMjTwsuz1tvaYd5tqifauNVIOZencw9uUcagyATRDWdBJ56PgJPcOQk-Gwl6RxQ5bHFkmRs8JB8T8f-nGU_fxZa-E/" /> <span>Sígueme en Twitter</span></a></li>
</ul>
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsbkj13z7CZXQsS_6l2afwIbGiiQYeTVKzmhekBz-JmkNGBhgMMehiSw6QdLaY4G0tspesuBuSw3k1chHGFrpKCcJ-IzdB1PUdxgb6y2jKKb1q926LQPCBVjWQywJsxgadCrMLIYUTCEg/" /> <span>Agrégame en tus círculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HbNUScYmgXP7pUqwc8LGT3Da_eVdicDHPilrBD_XjWXWg2rKXhSFxYOybOr2-sErCDJBmaTT8Lqax5Jo7KxhtcVKaVQpAcwmu44mc1cOGSHbddCzf-bsuzBKQoxdP3d0_e6ZjW3uq7E/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7VAz7_CgEzlgRbF6rN5HB2TBDZbQh8poHwv_Cmbua-D5ztyDkkSoMjTwsuz1tvaYd5tqifauNVIOZencw9uUcagyATRDWdBJ56PgJPcOQk-Gwl6RxQ5bHFkmRs8JB8T8f-nGU_fxZa-E/" /> <span>Sígueme en Twitter</span></a></li>
</ul>
Para finalizar cambia los nombres de usuario o ID donde se indica en color rojo y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que están de color verde dentro del primer código.
Si quieres agrega más botones sólo añade antes de </ul> una línea como esta por cada botón extra cambiando la URL del enlace, la URL de la imagen y el texto:
<li><a href="URL del enlace"><img src="URL de la imagen" /> <span>Texto</span></a></li>
Y ahora sí, es todo
Después de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 08-10-2019
Fuente; ciudadblogger
Publicado por;
Fuente; ciudadblogger
Publicado por;
marzo 03, 2020
No Comments
CAMBIAR LA FORMA DEL CURSOR SOBRE LA SUPERFICIE DE UN LINK
"BLOGS FAMAG "
también se puede cambiar la forma del cursor cuando este pasa por encima del enlace.
Pasa el mouse sobre los enlaces para ver los distintos efectos del cursor:
Para poner cualquiera de estos efectos sobre los links entra a Tema > Edición de HTML y busca donde dice a:hover { generalmente está después de body {
Abajo deberás poner cursor: más la propiedad que quieras;
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Tema”
Un clic en “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 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.
a:hover {
cursor:move;
color: #0000FF;
text-decoration:none;
}
cursor:move;
color: #0000FF;
text-decoration:none;
}
Puedes elegir cualquiera de los estilos antes mencionados, de esta forma podrás tener una forma distinta de mostrar el cursor sobre tus enlaces.
Para saber cómo personalizar los links visita el siguiente enlace:
Data de la Publicación;19-02-2020
Fuente; ciudadblogger
Publicado por;
marzo 03, 2020
No Comments
TRUCO PARA QUE LAS IMÁGENES SE MUEVAN CON EL MAUS
"BLOGS FAMAG "
Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “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.
Coloca este código en el buscador y dale un "Enter"
</head>
Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->
Nota: Es posible que el código anterior ya lo tengas en la plantilla, si es así no es necesario volverlo a pegar, así que omite ese paso.
Ahora cuando quieras hacer que la imagen de una entrada se pueda arrastrar usa el siguiente código dentro del post:
<img id="drag1" style="cursor:move; border:0px;" src="URL de la imagen"/>
<script type="text/javascript">new Draggable('drag1');</script>
<script type="text/javascript">new Draggable('drag1');</script>
Agrega la URL de la imagen donde se indica y listo. Ten en cuenta que cada vez que vayas a hacerlo deberás cambiar la ID de la imagen
(lo que está en color azul, por ejemplo drag2, drag3, etc. de modo que ninguna imagen tenga el mismo ID.
Es así de simple que con Scriptaculous podemos darle más dinamismo al sitio web y más diversión para los más pequeños.
marzo 03, 2020
No Comments
Todos hemos visto alguna vez un texto 'intermitente' en alguna web que te llama la atencion.
Para que ese efecto se produzca solo tenemos que 'encerrar' el texto entre dos etiquetas 'blink'. Por ejemplo, si quiero poner PRUEBAS INICIALES, lo pondria asi: <blink>PRUEBAS INICIALES</blink>.El código seria este:
<div id='blink' style="text-align:center;">
<blink>PRUEBAS INICIALES</blink>
</div>
<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>
<blink>PRUEBAS INICIALES</blink>
</div>
<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>
<div id='blink' style="text-align:center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRqYO0q1WKnPmlQ3m0DllfgxMIo5E4fmW-Lmg945j9o42h2If_7-le6mECao1eOYu4Z9xSdaa3ZDnOmb_l7PRSrfTh7_0npjrR987mzri1SRKjjNIPNTWWjCvGEb26RClmiDsfkKMd4I/s1600/harleydavidson_09-29-2017.jpg">
</div>
<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRqYO0q1WKnPmlQ3m0DllfgxMIo5E4fmW-Lmg945j9o42h2If_7-le6mECao1eOYu4Z9xSdaa3ZDnOmb_l7PRSrfTh7_0npjrR987mzri1SRKjjNIPNTWWjCvGEb26RClmiDsfkKMd4I/s1600/harleydavidson_09-29-2017.jpg">
</div>
<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>
Este es el código Limpio
<div id='blink' style="text-align:center;">
AQUÍ PODÉIS PONER LO QUE QUERÁIS
</div>
<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>
AQUÍ PODÉIS PONER LO QUE QUERÁIS
</div>
<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>
Fecha de la Publicación;03-08-2019
Fuente; redeando
Publicado por;
agosto 03, 2019
No Comments
Hace un tiempo, vi por una web un menu que me llamo la atencion. Ahora, basado en aquel menu, he diseñado este tan divertido y a la vez visualmente muy estetico. Ahora solo nos queda implementarlo en nuestro blog o web.
Lo primero de todo es poner los estilos (los podeis añadir aparte o conjuntamente con el HTML)
estilos CSS
<style> #menucomic, ul#menucomic li { float: left; } ul#menucomic li { background-repeat: no-repeat; list-style-type: none; margin-right: 5px; overflow: hidden; } ul#menucomic li a { color: #FF7700 !important; display: block; font-family: "Lucida Grande",Arial,Helvetica,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; height: 40px; overflow: hidden; padding-bottom: 20px; padding-top: 20px; text-align: center; text-decoration: none; text-shadow: 0 2px 2px #000000; text-transform: uppercase; width: 110px; } ul#menucomic li a:hover { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzMDYLL9iZNWDKeqoccauB1DvGQDw0s4W5pwZBAYBGnRDLBIx5jOzUeDNjrHjrlWUBvYZY_M-4wqNk6G6I1RroZ0-UU86GiKeAz_q4vSalFBnlikRLlDDwlOuugG3ku__HVYTlkaTpqCt/s1600/hovercomic.png"); background-position: center top; background-repeat: no-repeat; color: #FFFFFF !important; font-style: normal; font-weight: normal; overflow: visible; } ul#menucomic li a:active { position: relative; top: 2px; } ul#menucomic li#active a { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cwKQxVbdjaNxGvWerWIX7vNIxgoJ2prvltjxosxpX0LMBQP5pOXkPispqBSWTvWMYlywbyVJh3TdNdELaXiHjgDiC8m0kXS2CkA80y8QiWgcVwlCd23W9BQalw822NM-PU_sfPiap3kS/s1600/activecomic.png"); background-position: center top; background-repeat: no-repeat; color: #FFFFFF !important; } </style>
Ahora colocaremos el HTML donde queramos que aparezca el menu, cambiando lo que esta en rojo. Si queremos añadir mas enlaces al menu, añadimos la linea <li> <a href="URL">Texto</a></li> tantas veces como queramos
<ul id="menucomic">
<li id="active"> <a href="URL">Inicio</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
</ul>
<li id="active"> <a href="URL">Inicio</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
</ul>
Aquí lo tenéis armado y listo para el montaje en un gadget solo le falta colocar las URL de los enlaces.
<style> #menucomic, ul#menucomic li { float: left; } ul#menucomic li { background-repeat: no-repeat; list-style-type: none; margin-right: 5px; overflow: hidden; } ul#menucomic li a { color: #FF7700 !important; display: block; font-family: "Lucida Grande",Arial,Helvetica,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; height: 40px; overflow: hidden; padding-bottom: 20px; padding-top: 20px; text-align: center; text-decoration: none; text-shadow: 0 2px 2px #000000; text-transform: uppercase; width: 110px; } ul#menucomic li a:hover { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzMDYLL9iZNWDKeqoccauB1DvGQDw0s4W5pwZBAYBGnRDLBIx5jOzUeDNjrHjrlWUBvYZY_M-4wqNk6G6I1RroZ0-UU86GiKeAz_q4vSalFBnlikRLlDDwlOuugG3ku__HVYTlkaTpqCt/s1600/hovercomic.png"); background-position: center top; background-repeat: no-repeat; color: #FFFFFF !important; font-style: normal; font-weight: normal; overflow: visible; } ul#menucomic li a:active { position: relative; top: 2px; } ul#menucomic li#active a { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cwKQxVbdjaNxGvWerWIX7vNIxgoJ2prvltjxosxpX0LMBQP5pOXkPispqBSWTvWMYlywbyVJh3TdNdELaXiHjgDiC8m0kXS2CkA80y8QiWgcVwlCd23W9BQalw822NM-PU_sfPiap3kS/s1600/activecomic.png"); background-position: center top; background-repeat: no-repeat; color: #FFFFFF !important; } </style><ul id="menucomic">
<li id="active"> <a href="URL">Inicio</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
</ul>
<li id="active"> <a href="URL">Inicio</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
</ul>
Fuente; redeando
Publicado por;
agosto 03, 2019
No Comments
