Tutoriales cortos Gadgets
La manera de colocar una foto a mano en un post es como si insertásemos un enlace
<img src=”https://ruta de la imagen”>
Como puedes ver también podemos controlar el ancho, el alto o la proporción de la foto
<a href="http://a-donde-va-el-enlace" target="_blank"><img src="https://direccion-de-donde-tienes-la-foto-o-ruta" width="320"></a>
--------------------------------------------
<a href="http://a-donde-va-el-enlace" target="_blank" rel="nofollow">YO SOY EL TEXTO QUE MARCA EL ENLACE</a>
-----------------------------------------------------------------
Poner un enlace con tu mail directo:
<a href=”mailto:carmen@yoblogueo.com” target=”_blank”> Mi correo </a>
-------------------------------------------------------
Enlace para descarga:
<a href="archivo.exe">Descripción del enlace </a>
-------------------------------------------------
Hacer tablas con HTML
<table><tr><td><img src="punto.gif" height="5"></td></tr>
--------------------
<code>
<table>
<tbody>
<tr>
<td>hola</td>
<td>adios</td>
</tr>
<tr>
<td>gato</td>
<td>perro</td>
</tr>
</tbody>
</table>
</code>
----------------------------------------------------
<a href="https://forobeta.com/">Forobeta</a>
-------------
En enlace nofollow sería algo como esto:
Código HTML:
----------------
<a href="https://forobeta.com/" rel="nofollow" target="_blank">Forobeta</a>
---------------------------------------------------------------
Cómo cambiar el cursor de tu blog
https://forobeta.com/tutoriales-de-blogger/75151-cambiar-cursor-de-tu-blog.html
-------------
Este tutorial lo hice en mi blog y hoy lo quiero compartir con ustedes
Cómo cambiar el cursor de tu blog
Cambiar el cursor del mouse no parece ser algo muy importante segun algunos Bloggers pero si quieres personalizar tu blog y darle un aspecto unico un curioso cursor puede ser la solucion,asi que veamos como cambiar el cursor.
Este servicio de cambiar el cursor lo presta Gifs Animados:
,aca te dejo algunos ejemplos para que uses el que mas te guste.
Pega antes de </body> lo siguiente
<style>body{cursor:url(http://www.cristoferdelatorre.com/gi...arpadeando.ani), url(http://www.cristoferdelatorre.com/gi...arpadeando.gif), auto;}</style><span style="font:tahoma; font-size:9px;"><a href="http://www.gifanimados.org/">Gifs animados</a></span><br />
La imagen solo se ve en movimiento en Internet Explorer,en otros navegadores se vera la imagen sin movimiento.
Cómo cambiar el cursor de tu blog-pitufo-rosa.gif
<style>body{cursor:url(http://www.cristoferdelatorre.com/gi...itufo-rosa.ani), url(http://www.cristoferdelatorre.com/gi...itufo-rosa.gif), auto;}</style><span style="font:tahoma; font-size:9px;"><a href="http://www.gifanimados.org/">Gifs animados</a></span><br />
Cómo cambiar el cursor de tu blog-bob-esponja.gif
<style>body{cursor:url(http://www.cristoferdelatorre.com/gi...ob-esponja.ani), url(http://www.cristoferdelatorre.com/gi...ob-esponja.gif), auto;}</style><span style="font:tahoma; font-size:9px;"><a href="http://www.gifanimados.org/">Gifs animados</a></span><br />
Cómo cambiar el cursor de tu blog-perro-andarin.gif
<style>body{cursor:url(http://www.cristoferdelatorre.com/gi...ro-andarin.ani), url(http://www.cristoferdelatorre.com/gi...ro-andarin.gif), auto;}</style><span style="font:tahoma; font-size:9px;"><a href="http://www.gifanimados.org/">Gifs animados</a></span><br />
Si quieres buscar mas cursores entonces ve a Gifs Animados,alli hay cientos de cursores para que escojas el que mas te guste,seleccionas el codigo de tu cursor y lo pegas antes de </body> y guardas.
Espero que les guste el aporte,nos veremos en otro tutorial.
---------------------------------------
Poner una Imagen
<img src="URL DE LA IMAGEN"/>
---------------------------------------------
IMAGEN TOP EN ESQUINA DEL BLOG
Ve a Diseño> Añadir un gadget> HTML / Javascript
Pega este codigo
------------------------
<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url del boton"></a>
----------------------------------------------
Mensaje Pestaña Barra de Navegación
Abran su escritorio de blogger y vayan a Diseño> Añadir un gadget> HTML / Javascript.
<script language=javascript>
msg = "aqui tu mensaje";
msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>
--------------------------------------------------------------
PONER BORDES A EL TITULO DEL POST
Te vas Diseño o plantilla en la nueva interfaz >> Edición de HTML >> y buscas el codigo
h3.post-título {
o
h3.post-título, h4 {
...O tal vez no los encuentre... entonces busca estos
--------------
#main .post h3 {
o
.post h3 {
o
h3 post-title
------------------------
2) Bien ahora justo abajo pondras este codigo
--------------------------------------------
background: #FFECF5;
border: 2px dashed #000000;
----------------------------------------------
Aparte de el codigo que ya tengas o solo modificalo
Cambia los colores
#FFECF5 Color del fondo
#000000 Color del borde
dashed Estilo de borde, puede ser solid o double.
-----------------------------------------------------------------------------
reducir el tamaño de la imagen
recortar fotos
http://webresizer.com/
---------------------------------------------------
Bancos de fotos e imágenes gratis
https://openphoto.net/
https://foter.com/
http://www.everystockphoto.com/
20 páginas para subir fotos gratis a Internet.
https://marcecastro.com/veinte-paginas-gratuitas-recomendadas-para-subir-fotos-a-internet/
---------------------------------------------------------------------------------------
GADGET SOBRE MI
https://www.bloggerpasoapaso.com/2016/05/poner-gadgets-imprescindibles-blogger-curso-gratis.html
-------------------------------
<div><center><a href='LA URL DE TU BLOG'><img src="URL de tu imagen" /></a></center></div>
<div style=''><p style=" word-wrap: break-word; clear: both; text-align: justify; color:#8fb59e; font-size:10px;letter-spacing:2px;font-family: 'Arial';text-transform:uppercase; line-height:130%;padding-top:-30px;">TEXTO que quieras redactar</p> </div>
<div style='padding-top:15px;padding-bottom:10px;'><center><a href='URL DE TU FACEBOOK'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwqj5CT2m9lVRGHicYHJWEeffcLZ-watWRczchPCPoPQgCgwzoCBN-2RpnJHMEG3WlwUkV_j5xfZGDZlo6fxFltkRiAxqwx13qeNEutX-4I5EZv4FTK1OqHWyfFiRSLSC6NOuQ6HKdovc/s1600/FACEBOOK-azul.png" title="Facebook"/>
<a href='URL de tu Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiyfnIjIagrfY4XsrZ1MJQFJXnJWsGTSfW6pn-5Elaa1AFTGkz3pfVz-kCRduVAZRr93wZ8G8vBEpRcGHD6fw_ajcyu7vPRqjijZc9AzpaT8u1g9F2RWxe9FIQ-mcU9XU25fslzbt8xB-m/s1600/TWITTER-azul.png" title="Twitter"/></a>
<a href='URL de tu Instagram'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjygCpzD49raoISfODbhtH_tHw6jAIMZXq4gen6Ng-acSy2MkuPYJ3JG3ch5PEiAlwCGZkR5-VjHZ6hgb87mnyI8IRzqQajFJ0bnEq_r3qMa_zfN0FojcPiaZO5_PzOTtw6nwnu9yf6k6O1/s1600/INSTAGRAM-azul.png" title="Instagram"/></a>
<a href='URL de tu Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY0lNh1ijjdCWSiyKYKzRi5o-hD5AcYOxBmXAOkLAkVgN1BRNj23M8lMdULPrHXw39Q0HF6xrdaI_bBnWSyneBoHMHmw0ca00GVLzQ8ErOMnoeSKq-GFBT5sEZyil61aJ9iys2uvmHUUt0/s1600/PINTEREST-azul.png" title="Pinterest"/></a>
<a href='URL de tu Google+'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzEau2yen-q0ftDO9pHQFwB-FZ-rqoE7n_VbhwGEsBMISwGKYIhwIXf6hiM0Zsx2rwx2r9EvI5z6bWpMmCcMnc-7hLPu3vfzcOxJg0feRe8acf3Z3Y5Rv1qjRbzUqDvjK5Di6vuuNS9LiZ/s1600/GOOGLEPLUS3-azul.png" title="Google+"/></a>
</a></center></div>
-----------------------------------------------
Lo que está en fucsia se puede personalizar de esta manera:
color:#8fb59e; el color del texto.
font-size:10px; mide el tamaño de las letras.
letter-spacing:2px; mide la distancia entre cada carácteres/letras.
font-family: 'Arial'; Tipografía o Fuente de la letra.
text-transform:uppercase; cambia a mayúsculas, lowercase cambia a minúsculas y si lo eliminas saldrá tal cual lo escribas.
line-height:130%; este porcentaje mide la distancia entre líneas/frases.
? Una vez preparado lo pegamos en el cuadro del gadget que hemos abierto, el HTML/Javascript y le damos a Guardar.
Si te fijas solo hay 6 etiquetas div 3 que abren <div obien <div> y 3 que cierran </div>
Cada contenido dentro de esas partes es una parte del Sobre Mi , en este código que te facilito están en este orden:
<div> IMAGEN</div>
<div TEXTO </div>
<div> REDES SOCIALES </div>
Si lo que quieres es cambiar de posición los elementos, solo tendrás que cortar desde el <div> que abre hasta el </div> que cierra del elemento que quieres mover y pegarlo encima o debajo del elemento que prefieras. Cualquier duda me dejas un comentario ;)
----------------------------------------------------------------------------------------------------
ancho
No hay comentarios:
Publicar un comentario