Tutorial On Making Night Way [Nighttime Style] On Blogspot

How to Install Night Mode on Blogger [Blogspot]

As always, brand sure you are logged into your blogger account. Open the Theme so click Edit HTML

one. Add the following script before

 Night Mode  
 

ii. Next add this CSS Code earlier

Information :
In 2 codes .nightmode .form-novel is a code that you lot tin can function to add novel elements that you want to add together when pressing the dark manner button. Please change the code .course-novel with class elements or HTML ID that y’all want to lay into night mode. For instance in the next example:

.nightmode .pop-postal service h2background:#222 .nightmode .Post-body h1color:#fff .nightmode .Post-torso th color:#555

Please besides adapt the position of the nigth fashion push

.Switchbtnposition:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px

Make Responsive SEO Friendly Dark Mode
Following are the minute methods that tin be applied to Viomagz three.three.0 templates or the latest versions too the similar. I have used this method as well as succeeded on the viomagz template. Here’sec the tutorial:

i. Paste the next CSS code before ]]

/* dark */ .modedarkdisplay:inline-block;float:right;margin-top:3px;position:absolute;right:45px;top:0;z-index:999; .modedark svgwidth:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:''; .modedark svg pathfill:#fff; .iconmodecursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear; .iconmode:hoverborder-radius:100px; .checkdisplay:none; .modedark .iconmode .openmodedisplay:block; .modedark .iconmode .closemodedisplay:none; .modedark .check:checked   .iconmode .openmodedisplay:none; .modedark .check:checked   .iconmode .closemodedisplay:block; .Nightbackground:#0c0c0c;color:#fff; .Night #wrapperbackground:#121212;color:#ddd; .Night #header-containerbackground:#000;color:#ddd; .Night #cssmenu ul ul libackground:#121212; .Night #cssmenu ul ul li acolor:#fff;background:#121212; .Night #cssmenu ul libackground:#000; .Night #cssmenu ul li a,#cssmenu ul ul li acolor:#ddd; .Night .above-post-widget h2color:#ddd; .Night .latest-post-title h2color:#ddd; .Night h2.post-title acolor:#ddd; .Night h1.post-titlecolor:#ddd; .Night .sidebar h2color:#ddd; .Night .sidebar-sticky h2color:#ddd; .Night .sidebar h2,.Night .sidebar-sticky h2border-bottom:2px solid #ddd; .Night .sidebar h2::before,.Night .sidebar-sticky h2::beforebackground-color:#ddd; .Night .artikel-terbaru acolor:#ddd; .Night .artikel-terbaru a:hovercolor:#0078d4; .Night .artikel-terbaru ul li::beforecolor:#ddd; .Night .PopularPosts ul li acolor:#ddd; .Night .author-profile >spancolor:#595959; .Night .tableOfContentborder-color:rgba(255,255,255,.1);background-color:#15202b; .Night .tableOfContent #tocContent acolor:#fff; .Night .tableOfContent #tocContent ol ul:earlier,.postal service-torso .tableOfContent ol ol:before,.postal service-torso .tableOfContent #tocContent ul ol:earlier,.post-body .tableOfContent ul ul:earlierborder-left:1px dashed rgba(234,228,228,0.2); .Night .comments h3color:#fff; .Night #Related ul li a.judulcolor:#fff; .Night #Related ul li a.judul:hover,#Related ul li:hover a.judulcolor:#fff; .Night #comments .comment .comment-content,.comment .comment-torsocolor:#fff; .Night #footer-wrapperxbackground:#000; .Night #footbawahbackground:#121212;color:#fff; .Night #footbawah a,.Night .Profile .profile-link,.Night .Profile .profile-advert-link,.Night .related-post-manner-iii .related-post-item-titlecolor:#ddd;

two. Next, salve the following Javascript code earlier

iii. Finally, add together this HTML Nightmode code straight to a higher place

4. Save in addition to encounter the results.

Thus this tutorial nigh How to Make the Night Mode Blogger Mode Button. May be useful. Thanks.

Add a Shooting Star Effect in Night Mode

This is a asking from a blogger friend who has already entered an e-mail to brand a shooting star issue tutorial when the nighttime / nighttime fashion push button is clicked.

i. Copy in addition to glue the next code earlier ]] or earlier

.department-eyeposition:fixed;width:100%;height:100%;top:50%;left:50%;display:none;overflow:hidden;z-index:5;pointer-events:none;box-shadow:0 0 50px 5px rgba(255,148,0,.1);transform:translate(-50%,-50%) .department-middle-webkit-transition:all 500ms linear;transition:all 500ms linear .shooting-starz-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:-70px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar 6s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear .shooting-star-iiz-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:200px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar-2 9s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear .starz-index:2;position:absolute;top:185px;left:25px;background-image:url('https://ivang-design.com//svg-load/air/star.png');background-size:15px 15px;width:15px;height:15px;opacity:0.4;animation:starShine 3.5s linear infinite;-webkit-transition:all 1200ms linear;transition:all 1200ms linear .star.sndtop:100px;left:310px;animation-delay:1s .star.trdtop:130px;left:100px;animation-delay:1.4s .star.fthtop:190px;left:200px;animation-delay:1.8s .star.fithtop:85px;left:1080px;animation-delay:2.2s @keyframes animShootingStarfromtransform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5pxtotransform:translateY(1280px) translateX(1280px) rotate(-45deg);opacity:1;height:800px @keyframes animShootingStar-2fromtransform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5pxtotransform:translateY(1920px) translateX(1920px) rotate(-45deg);opacity:1;height:800px @keyframes starShine0%transform:scale(0.3) rotate(0deg);opacity:0.425%transform:scale(1) rotate(360deg);opacity:1fifty%transform:scale(0.3) rotate(720deg);opacity:0.4100%transform:scale(0.3) rotate(0deg);opacity:0.4

2. Next, add together the next HTML caller code before

Thus this tutorial is nearly installing Dark Mode / Nigh Mode for bloggers amongst cool styles in addition to the improver of shooting star effects. A useful third. Thanks.