Pari Digital Marketing

success behind you

Breaking

Friday, 22 January 2021

How to Add Night mode or Dark mode button on Blogger navigation bar in Blogger in Hindi

Stay Safe Wear Mask, Protect Your Self from COVID-19 Thanks For Visit My Website

How to Add Night mode or Dark mode button on Blogger navigation bar in Hindi





ब्लॉगर डार्क मोड या नाईट मोड क्या है ?

How to Add Night mode or Dark mode button on Blogger navigation bar in Blogger in Hindi



डार्क मोड ऑन करने से पाठक को रात में ब्लॉग को पढ़ने में आसानी होती है क्युकि डार्क मोड ऑन करने से स्क्रीन की Brightness कम हो जाती है जिससे आँखों में रोशनी कम  है जो कि पाठक के लिए अच्छा है। 
डार्क मोड पाठकों को कम रोशनी के दौरान आसानी से सामग्री से गुजरने में मदद करता है। इस सरल ट्रिक से आसानी से अपने ब्लॉगर ब्लॉग में नाइट मोड जोड़ना शुरू करना सीखें।

How to Add Night mode or Dark mode button on Blogger navigation bar in Blogger in Hindi


ब्लॉगर नेविगेशन बार पर नाइट मोड या डार्क मोड बटन कैसे जोड़ें

डार्क मोड पाठकों को कम रोशनी के दौरान आसानी से सामग्री से गुजरने में मदद करता है। इस सरल ट्रिक से आसानी से अपने ब्लॉगर ब्लॉग में नाइट मोड जोड़ना शुरू करना सीखें।

डार्क मोड, या डार्क थीम, या बस नाइट मोड, एक लाइट-ऑन-डार्क कलर स्कीमा है। सफेद पृष्ठभूमि और काले रंग के रंग के साथ एक मानक डिजिटल दस्तावेज़ की कल्पना करें। डार्क मोड में, एक ही डॉक्यूमेंट में व्हाइट टेक्स्ट कलर के साथ डार्क बैकग्राउंड होगा।

आज ज्यादातर ऐप और फोन डार्क मोड फीचर के साथ काम में आते हैं। और वे क्यों नहीं करेंगे? नाइट मोड सामान्य प्रकाश मोड पर दो प्रभावशाली गुण प्रदान करता है: 1) यह मोड आपकी आंखों में प्रवेश करने वाले प्रकाश की मात्रा में कटौती करता है, आंखों के तनाव को कम करता है और शायद आपको बेहतर नींद लाने में मदद करता है। 2) इसके अलावा, कम रोशनी का उपयोग करता है, और जिससे कम बिजली की खपत होती है।

How to Add Night/Dark Mode To My Blogger Wesbite in Hindi

चलिए जान लेते कि डार्क मोड ऑप्शन  के लिए क्या स्टेप है। 


1. Step to Add Night Mode Icon in Your Blog : 
1. सबसे पहले आपको अपने ब्लॉग में डार्क मोड का icon जोड़ना पड़ेगा जिसके लिए निचे  दिए गए स्टेप्स को फॉलो करे। 

>> अपने ब्लॉगर के theme section में जाकर Edit Theme पर क्लिक करना है और search करना हैं </head>  या &lt;/head&gt;&lt;!--<head/>--&gt; 
>> निचे दिए गए कोड को </head>  के ऊपर Paste करें। 

Tips : अपने ब्लॉग की Theme को Edit करने से पहले Theme का Backup जरूर ले 

<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>
2. अब Jquery Script को Call करेंगे Blogger में  Dark Mode को Enable करेंगे। 

Jquery Script Install करने के लिए निचे दिए गए Code को </head> के ऊपर Paste करना है। 

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
3. निचे दिए गए Code को </body> के ऊपर Paste करें। 
<script type='text/javascript'>
//<![CDATA[
/* Night Mode/Dark Mode Feature - By TwistBlogg.com */
/* Keep the Credit Intact */
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode",$(".section-center").css("display","block")):($("body").toggleClass("nightmode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("nightmode")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>
4. अब निचे दिए गए Code को <head> Section  के निचे Paste करें। 
<style type="text/css">
/*---- Night Mode/Dark Mode Feature - By TwistBlogg.com ----*/
.modedark {
background: linear-gradient(to right, #eb3349 40%, #f45c43); /*Background color of icon*/
float: left;
position: fixed;
bottom: 0; /*Change this for position*/
z-index: 999;
opacity:0.7 /*Opacity Degree Of Icon*/
}
.modedark svg {
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
}
/*----- Start adding Elements From here -----*/
// Below are some samples only
// Start with .nightmode followed by element(class or id) {their_properties}
.nightmode{background:#15202B;color:rgba(255,255,255,.7)}
.nightmode #outer-wrapper,.nightmode #sidebar-wrapper{background:#323232;color:#fff!important}
/* --- Add More Elements --- */
</style>

5. अब Add More Elements की जगह Night Mode के लिए New Property Add करने के लिए 

 .nightmode  (element Class or Id here) की {CSS property} को Add करें। निचे दिए गए Format में Property Add करें। 
.nightmode (element class or id here) {CSS Properties}

निचे कुछ Example दिए गए है इन्हे भी Add कर सकते है। 
.nightmode .header-menu {
background: #2B2B2B;
color: #fff!important
}
.nightmode .header-menu a,
.nightmode .header-menu span {
color: #EEEEEE!important
}
.nightmode #outer-wrapper,
.nightmode #sidebar-wrapper {
background: #323232;
color: #fff!important
}
.nightmode #PopularPosts1,
.nightmode #Label3,
.nightmode #Label1 {
background: #323232;
}
.nightmode #PopularPosts1 a,
.nightmode #PopularPosts1 .title,
.nightmode #Label1 a,
.nightmode #Label3 a,
.nightmode #Label1 .title,
.nightmode #Label3 .title {
color: #eeeeee!important
}
.nightmode .post-body h1,
.nightmode .post-body h2,
.nightmode .post-body h3,
.nightmode .post-body h4,
.nightmode .post-title,
.nightmode .index-post .post-info &gt; h2 &gt; a {
color: #fff!important
}

How to find out my blog elements ids and classes?

6.  अब अपने ब्लॉग के elements की Ids और Class को ऐसे ढूढ़े। 

How to find out my blog elements ids and classes?


>> जिस भी पेज की Ids और Class को पहिचानने के लिए Blog Elements Attributes  का उपयोग करना है। 

>> सबसे पहले माउस से Right Click करके Inspect पर क्लिक करे। या (CTRL+SHIFT+I) प्रेस करे। 

>> First स्टेप को चित्र के अनुसार फॉलो करे। फिर वह Widget चुने जिसकी क्लास देखनी है। 

>> अब inspect में वह लाइन का कलर बदल गया हो गया। 

>> Class बार के Text को note कर ले यही Class की Id है। 







No comments:

Post a Comment

New For You Open It

Popular Posts

WooCommerce