How to Create Night Mode and Star Effects on a Blogger Blog

Hello friends! Today in this article we are going to talk about Create Night Mode and Star Effects on a Blogger Blog. We will know How to Create Night Mode and Star Effects on a Blogger Blog. So stay with this article to know in more detail.


If you are thinking of creating Night Mode or Dark Mode on your blog then today's post is for you. In today's post, I will tell you how to install Night Mode or Dark Mode in your blog. It is very easy to install Night Mode or Dark Mode in the blog. For this, you have to follow some steps given below.


How to make Dark Mode / Night Mode on Blogger

Login to your Blogger.com dashboard

Click on Theme Section and then click on the Customize arrow

Now click on Edit HTML

Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.

Search for ]]></b:skin>, Paste below CSS code above the ]]></b:skin> 


$ads={2}


.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;top: 0;z-index:999;}

width:24px;

height:24px;

vertical-align: -5px;

background-repeat: no-repeat !important;

content: '';

}

.modedark svg path{

fill:#fff;

}

.modedark .check:checked ~ .NavMenu{

opacity:1;

visibility:visible;

top:45px;

min-width:200px;

transition:all .3s ease;

z-index:2;

}

.iconmode {

cursor: pointer;

display: block;

padding: 8px;

background-position: center;

transition: all .5s linear;

}

.iconmode:hover{

border-radius: 100px;

background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%;

}

.check {

    display: none;

}

.modedark .iconmode .openmode{

display:block;

}

.modedark .iconmode .closemode{

display:none;

}

.modedark .check:checked ~ .iconmode .openmode{

display:none;

}

.modedark .check:checked ~ .iconmode .closemode{

display:block;

}

.Night #wrapper {background: #292e38;}

.Night #HTML3 {background:#1d2129;}

.Night #footer-widget-container {background:#1d2129;}

.Night .share-this-pleaseeeee {background:#292e38;}

.Night .related-post h4{background:#292e38;}

.Night #label-info-th {background:#1d2129;}

.Night body {background:#1d2129;}

.Night .post-body {color:#cccccc}

.Night #baca-juga h2 {color:#cccccc;background:#1d2129}

.Night .label-info-th a {color:#cccccc;background:#3d4658}

.Night li.recent-posts a{color:#cccccc}

.Night .recent-posts-title h2{color:#cccccc}

.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}

.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}

.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}

.Night .post-info {color:#cccccc}

.Night {background:#1d2129;}

.Night h2.post-title a {color:#9e9e9e;}

.Night h2.post-title a:hover {color:#f17f43}

.Night .post-title {color:#1e90ff}

.Night ul.nav-social {color:#1d2129}

.Night .post-snippet {color:#cccccc}

.Night #ignielNewsletter {background:#292e38;}

.Night #Label1{background:#292e38;}

.Night .post{background:#292e38;border-bottom-color: #252a33;}

.Night .PopularPosts h2{background:#343944;}

.Night .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}

.Night .newspaptext{color:#9e9e9e}

.Night .PopularPosts h2 span{color:#9e9e9e}

.Night .list-label-widget-content ul li {border-bottom-color: #313640;}

.Night .img-thumbnail img {background: #252931 linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;}

.Night #ignielNewsletter .medsos__ {border-top-color: #313640;}

.Night #footer-container{background:#12161f;}

.Night #footer-navmenu{background:#171b25;}

.Night .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}

.Night .btnsocialshare {background:#383c44;}

.Night .label-line::before{background: #1d2129;}

.Night .label-line-c::before {background: #333740;}

.Night a.showcontent:hover {background: #373a42;}

.Night a.showcontent{background: #292e38}

.Night #ignielNewsletter input{background: #272b33;border-color:#2b303a;}

.Night .comments .comments-content .comment-content {color:#ffffff}

.Night div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}

.Night .related-post-style-3 .related-post-item-title {color: #bbb;}

.Night #baca-juga ul {border: 2px solid #333740;}

.Night #baca-juga h2 {border: 2px solid #292e38;}

.Night #comments a.hiddencontent {background: #424854;}

.Night .comments .comments-content .comment-thread ol {background: #292e38;}

.Night .comments .comments-content .inline-thread {background: #292e38;}


Now again press Ctrl+F and search for </head>

Copy the below code and paste it above the </head> tag.


<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/>

<label class='iconmode' for='modedark'>

<svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg>

<svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg>

</label>

</div>


Now add below JS code above to the </body>


<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});

//]]>

</script>


Copy the below code and paste it below of <head> tag.


<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>


Click on the Save theme icon.


How to create a Star Effect in Blogger Blog

Click on Theme Section and then click on the Customize arrow

Now click on Edit HTML

Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.

Search for ]]></b:skin>, Paste below CSS code above the ]]></b:skin> 


.section-center{

    position: 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%);

}

.section-center {

    -webkit-transition: all 500ms linear;

    transition: all 500ms linear;

}

.shooting-star {

 z-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-2 {

 z-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;

}

.star {

 z-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.snd {

 top: 100px;

 left: 310px;

 animation-delay: 1s;

}

.star.trd {

 top: 130px;

 left: 100px;

 animation-delay: 1.4s;

}

.star.fth {

 top: 190px;

 left: 200px;

 animation-delay: 1.8s;

}

.star.fith {

 top: 85px;

 left: 1080px;

 animation-delay: 2.2s;

}

@keyframes animShootingStar {

 from {

  transform: translateY(0px) translateX(0px) rotate(-45deg);

  opacity: 1;

  height: 5px;

 }

 to {

  transform: translateY(1280px) translateX(1280px) rotate(-45deg);

  opacity: 1;

  height: 800px;

 }

}

@keyframes animShootingStar-2 {

 from {

  transform: translateY(0px) translateX(0px) rotate(-45deg);

  opacity: 1;

  height: 5px;

 }

 to {

  transform: translateY(1920px) translateX(1920px) rotate(-45deg);

  opacity: 1;

  height: 800px;

 }

}

@keyframes starShine {

 0% {

  transform: scale(0.3) rotate(0deg);

  opacity: 0.4;

 }

 25% {

  transform: scale(1) rotate(360deg);

  opacity: 1;

 }

 50% {

  transform: scale(0.3) rotate(720deg);

  opacity: 0.4;

 }

 100% {

  transform: scale(0.3) rotate(0deg);

  opacity: 0.4;

 }

}


$ads={2}

Now again press Ctrl+F and search for </body>

Copy the below code and paste it above the </body> tag.


&lt;div class=&#039;section-center&#039;&gt;

 &lt;div class=&#039;shooting-star&#039;/&gt;

 &lt;div class=&#039;shooting-star-2&#039;/&gt;

 &lt;div class=&#039;star&#039;/&gt;

 &lt;div class=&#039;star snd&#039;/&gt;

 &lt;div class=&#039;star trd&#039;/&gt;

 &lt;div class=&#039;star fth&#039;/&gt;

 &lt;div class=&#039;star fith&#039;/&gt;

&lt;/div&gt;


Now click on the Save theme icon.


Conclusion

In this article, I told you How to Create Night Mode and Star Effects on a Blogger Blog. If you like this article, then definitely share it with your friends. If you still have confusion. Any topic, anything, if you have not understood in the article. So you can tell us this through comments. 

Thank you!

Post a Comment

Please do not enter any spam link in the comment box.