Como instalar el modo oscuro en blogger
Como instalar el modo oscuro en blogger. Por supuesto, hoy en día la mayoría de la gente pasa mucho tiempo con sus teléfonos y pantallas digitales, como un smartphone o un ordenador de sobremesa. Este modo oscuro en la mayoría de los teléfonos inteligentes hace posible que los usuarios descansen sus ojos cansados con la presencia de este brillo alentador.
Le recomendamos que active la función de modo oscuro en su sitio web/blog. Además de hacer que tus usuarios se sientan cómodos y más jóvenes, también empezarás a aumentar la generación de leads en tu sitio web/blog, que, la mayoría de las veces es el número uno en las SERPs.
Antes de eso, verifique si su plantilla (theme) ya tiene este script jQuery, si no, pegue el código a continuación arriba </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>Como instalar el modo oscuro en blogger
- Primero ir al menú de blogger y hacer clic en el TEMA.
- Luego haga clic en el botón editar HTML.
- Buscar la etiqueta </body> y pegar el código arriba de el.
<div class="Switchdark">
<input
class="toggledarkbloggerpro toggledarkbloggerpro-switch"
id="darkmode"
type="checkbox"
/>
<label class="toggledarkbloggerpro-btn" for="darkmode">
<svg class='svg-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'></path></g></svg>
<svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></label>
</div>
<script type="text/javascript">
//<![CDATA[
// Dark Mode
$("#darkmode").click(function(){$("body").toggleClass("darkmode")}),$("body").toggleClass(localStorage.toggled),$("#darkmode").click(function(){"darkmode"!=localStorage.toggled?($("body").toggleClass("darkmode",!0),localStorage.toggled="darkmode"):($("body").toggleClass("darkmode",!1),localStorage.toggled="")});
//]]>
</script>- Luego agregue el código CSS sobre el código </head>
<style type='text/css'>
/* Dark Mode */
.Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.toggledarkbloggerpro{display:none;}
.toggledarkbloggerpro-btn{display:flex;align-items:center; width:26px;height:26px;}
.toggledarkbloggerpro-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.toggledarkbloggerpro-btn .svg-1{display:inline-block}
.toggledarkbloggerpro-btn .svg-2{display:none}
.toggledarkbloggerpro-switch:checked + .toggledarkbloggerpro-btn .svg-1{display:none}
.toggledarkbloggerpro-switch:checked + .toggledarkbloggerpro-btn .svg-2{display:inline-block}
.darkmode{background:#1e1e1e;color:#fefefe}
.darkmode .toggledarkbloggerpro-btn svg{stroke:#fefefe}
.darkmode .class-baru{}
.darkmode .class-baru{}
</style>Para escribir una nueva clase, el css debe comenzar con un punto y para ID debe comenzar con #hashtag, también edite el css de esta sección para determinar la posición del botón de modo oscuro.
Nota: Para escribir una nueva clase, el css debe comenzar con un punto y para ID debe comenzar con #hashtag, también edite el css de esta sección para determinar la posición del botón de modo oscuro.
.Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}Haga clic en guardar y vea los resultados, espero que sea útil y gracias por visitarnos.
Deja una respuesta