En este tutorial haremos algo distinto con codigo de diseño Css cuando miramos los bullets o puntos por defecto de blogger estos no tienen estilo solo se ve ese punto enumerado <li> que es un punto . en forma vetical para enumerar cosas o temas vamos a usar imagenes en su lugar para darle vida y atractivos.
Si deseas como yo cambiar tus bullets o puntos enumerados entonces encuentra imagenes debes recordar que el tamano de la imagen debe ser menor o necesitaras anadir espacio en el codigo de Css .
Como usar imagenes para lista de puntos en tu blog
- Entra en cuenta de blogger
- Da Click en pestaña de Plantilla
- Luego da Click en boton de Personalizar.
- Ahora Selecciona pestana Avanzado.
- Luego aparece un listado y escoje la opcion Añadir Css y Pega el codigo de abajo.
.post ul li {Nota:Reemplace URL de la Imagen-Bullets Con tu URLde tu imagen de bullet y guardelo
list-style-image:url('URL de la Imagen-Bullets');
}
Aqui te dejare algunos bullets listos lo que tienes que hacer es solo pegar el codigo de la imagen que escojas en espacio de Añadir Css como ilustra arriba en la imagen.
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKIutOUffvp82yfkLcwr_R_gsXPoshZQXf-kbQZEM9goeHzJm4y1V6g-vNxIolFGUkgd19JPvozffZnFkKFBVJSCnZW2yxX8T8e5pLhStYCr-FtyIStipuUI7mKDsYGsFg4D2xIdDCTwRf/s1600/11-dot-green.png');
}
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTcA2oP16gzzoS2jk09E9hgoCCIE6YKdzJKDDVHEvhyphenhyphenFkMxkAbkbUvdNWlOXBDCcVjiWoSZFcHWNnksBh2TQSECbcilW2Ukc8F3nds7r-_BGBWqqXV0u17MyboBEIlODPTWrjkqIOwIco/s1600/bullet_page_white.png');
}
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0wvt4hiUfXqA7CEn28Jp67xIfKPOMEzihWc8_BCODUhCJzP-_AdV89FOtyGa9RvetGcCDuNx-_Ou06A5KxDg0D2kmOfhwUqdAMrA55IAJQTt4akKR4TMN_RaH3qsiMMBCu-EbisRyXoJs/s1600/bullet_blue_arrow.png');
}
.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBF_Ikl1pmclPplXb_ErQe2FcW4pz2reKl2_-Du2QyHvCsyUj1rEcmpY48zNonvXQWugEAPOakYdvxgZs4XMeXLqyD8K_mi4ef_KLftW0j9Ic0jwmudrNhvuR_XfGZL-Gp4BFGjG9gQVW-/s1600/bullet_tick.png');
}
0 comentarios:
Publicar un comentario