Floating Dark Mode कैसे जोड़े Blogspot Template में

How To Add Floating Dark And Night Mode In Blogger Blog Website Hindi

तैरता हुआ Dark या Night Mode Icon को कैसे लगाए

यह Dark Mode सिर्फ Blogger Website पर काम करता है

नाईट मोड कैसे जोरे Blogspot Theme में

दोस्त मेरी जान ये आर्टिकल आप के लिए बहुत अच्छा होने वाला है मेरे website की तरह आप भी अपने Blogspot Template में Night Mode या Dark Skin या मोड जोर या Add कर सकते है यह Super Light है, इस से आप का Blogspot Blogger धीमा नही होता । यह Blogger Website के लिए Widget है जिसे Dark Mode कहते है ओर तो ओर मेने काफी लोगो के Website में देखा इस Widget या Dark Mode का काम अंधेरा करना होता है जैसे आप इस Night Mode को चालू करेंगे तो बिल्कुल अंधेरा हो जाता है हमारे मोबाइल Screen में यानी आप के Website को अंधकार जैसा काला कर देगा

Dark Mode Add करने का फायदा

अगर कोई भी User या Visitor आप के Website पर आता है और वह समय रात का हो तो उसे Article पढ़ने में कोई परेशानी नही होगी सिर्फ एक Click में Light से अंधेरा हो जाएगा जैसा हमारे घर मे एक बल्ब को को चालू ओर बन्द करते है । यह Coding के साथ अपने Website में लगा सकते है, ओर आप का Website Premium Professional Official जैसा दिखाई देने लगता है, अगर आप के पास कोई Premium Template नही है Blogspot में लगाने के लिए अभी तक आप ने खरीदा नही है तो जा कर आप एक बहुत बढ़िया Blogger Template खरीद लीजिये, या आप मुझसे संपर्क कीजिये । वेसे मेने मुफ्त वाले भी Template के बारे में बताया हु जा कर देखिये । Template में Blue Wave Animation कैसे लगाए इसका भी Article में लिखा है यह भी आप के Blogspot Blogger को एक अच्छा Design दे सकता है, जा कर देखे । तो दोस्त हम कहा थे तो आप भूल गए होंगे चलो हम बताई देते है तुम को । में इस Article में आप को बताऊंगा कैसे

कैसे ऐड करते है Dark Mode

ओर दोस्त अगर आप को Blogspot Blogger Template Customize करने नही आता है तो यह देख सकते है Article How To Customize Blogger Template अगर सही से आप को Blogger Template Restore या Upload करने नही आता है तो ये भी Article देख सकते है How To Upload Blogger Template ये सब आप के लिए ही था तो चलते है अब जानते है

How To Add Dark Mode In Blogger Template

तो दोस्त कुछ शब्द इंग्लिश में लिखना पड़ता है अगर ऐसा नही करेंगे तो यह आर्टिकल लोगो तक नही जा पायेगा
अब सुरु करते है Step By Step कैसे Add करे ये सब Night Mode कोड तो में बता दु दोस्त
नाईट मोड ऐड करने के लिए थोड़ी सी कुछ जानकारी चाहिए आप को जैसे Css Code की जानकारी होनी चाहिए तभी आप को पता चलेगा कहा पर अंधेरा दिखाना है Dark Mode में Code का इस्तेमाल कर के कोई बात नही अगर नही आप को पता है तो हम यहां है ना। तो दोस्त सबसे पहले आप को Blogger में जाना ये या Download हुआ Template आप के पास होगा उसे Txt Editor से चालू करना है या फिर आप Blogger में जाये अपना Account Log In करे Website Select करिये । तो वेसे दोस्त इसे मोबाइल के जरिये नही लगा सकते है या तो आप Txt Editor Install करिये या फिर Computer से Blogger पर जाए

Dark Mode Night Mode Widget

चलो यही आप को बता देता हूं Android Application जिसका नाम

Quick Edit Android App

है इसकी मद्त से आप Xml File को Edite या बदलाव कर सकते है ये Play Store में मिल जाएगा

How To Edit Blogger Template In Android Mobile

सिर्फ एक यही तरीका है Mobile से Blogspot Template को Edit करना लेकिन में आप को Desktop में बता रहा हु Mobile इस लिए मना किया हु क्यों कि जब आप Xml Edit करेंगे तो आप का मोबाइल हैंग हो जाएगा Blogger में इस लिए मेने Playstore से download करने के लिए बोलै जिसका नाम Quick Edit है बोहत है ऐसे App मगर में जो इस्तेमाल करता हु वही बताऊंगा ना
Step 1 Blogger में जा कर Theme पर Click कर देना है अब आप को Theme Menu दिखाई दे रही है Customize के ऊपर तीन बिंदी दिखाई दे रही है उस पर Click कर देना है, ओर अब
Step 2 जैसे ही आल तीन बिंदु पर दबायेंगे वेसे ही अब आप को यह Edit Html दिखाई देगा वहां पर दबाना है यानी क्लिक कर देना है
Step 3 अब आप के सामने Xml Edit Pannel दिखाई देगा मगर ध्यान रहे अगर कही भी कोई भी कोड इधर उधर हो गया तो सारा आप का Template खराब हो जाएगा इस लिए आप पहले अपने Blogspot Blogger Template का Backup ले लीजिए
या अपना Theme Download कर लेना है। Step 4 अब आप के सामने वो तमाम Coding नंबर वगेरा दिखाई देगी जो दिमाग से बाहर है वेसे ख़बरने की जरूरत नही सभी Code के बीच मे आप को कही भी Click कर देना है
Step 5 इतना जल्दी Step 5 पर आ गए पता ही नही चला मेरे दोस्त आप को ये Search करना है लिख कर ठीक है या Find करना है ये Code जिसका नाम है ]]></b:skin> अब आप अपने Computer या Laptop में
Keyboard को मद्त लेते हुए
 Ctrl+F दबाव और खोजो 
इस कोड को खोजने के बाद आप को शोना चांदी मिल जाएगा Hhhhh Sorry Step 6 भूल गया में कही और ही चला गया नीचे नीचे देखो दोस्तो Step 6 है
Step 6 अब आप को इस Code से  

<style type='text/css'>
/*---- Night Mode/यहां पर पेस्ट करिये ----*/ 
यहां हु में इसके अंदर डालो Code  
</Style>

बीच मे खोज कर डाल देना है या पेस्ट कर देना है कुछ इस तरह दिखाई देगा

Double Click

करेंगे Box में तो Copy हो जाएगा
/*---- Night Mode/Dark Mode Feature ----*/ .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 -----*/ // 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 --- */
वेसे मेरे प्यारे दोस्तो ये जो Start Adding Elements From Here He Na 

इस Code को Edit करना है अपने Blog के हिसाब से Se 

मतलब जैसे में Header में Dark Color दिखानी है तो  
.nightmode #header {background:color
अपने हिसाब से ओर Text कैसा दिखाई दे ! important 

ऐसे ही जहा पर आप को अंधकार अंधेरा दिखाना है वेसे ही इन कोड को Adjust करना है Edit या बदलना है  


Step 7 पर आप को बताया जाएगा ऊपर वाला Css कोड सही से लगा लिए है तो Thats Great Awesome अब आप को HTML Button Add करने के बारे में है जो इस कि मद्त से कहि भी लगा सकते है तो ये है वो बटन जिसकी सहायता से Night Mode ओर Dark Mode को चालू ओर बन्द कर सकते है इसके बाद JavaScript मिलेगा  


यहां पर Double Click करेंगे तो Copy हो जाएगा  

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


Step 8 अब इसकी कहानी खतम Bye Bye फिर मिलेंगे रुको जरा सबर करो अब आल को JavaScript को लगाना ज़हे   </body>  के ऊपर डाल देना है या कॉपी किआ हुआ Code पेस्ट कर देना है </body> देखो इसके ऊपर Past करो


<script type='text/javascript'>
//<![CDATA[
/* Night Mode/Dark Mode Feature */ 

$(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>  
इस तरह से आप अपने Blogger Blogspot के कोई भी Template हो या Theme पर Dark ओर Night Mode लगा सकते है मुझे आशा है आप समझ गए होंगे Enjoy करिये अगर आप का कोई भी सवाल हो कुछ पूछना हो तो Comment आप के लिए खाली है All My Friends Please Support Me