How To Add Responsive Code Box With Copy Button

आज के पोस्ट में मैं आपको बताऊंगा की आप अपने Blogger में

Responsive Code Box with Copy Button In Blogger मैं कैसे अप्लाई करें आप इस पोस्ट को शुरू से लेकर अंत तक ध्यान से पढ़ें अन्यथा या आपके ब्लॉक में काम नहीं करेगा शुरू से लेकर अंतक पढ़ें धन्यवाद

इसके फायदे

1. जो आपके ब्लॉग के यूजर हैं उसे कोड कॉपी करने में आसान होगा

2. आपके ब्लॉक किए स्पीड धीमी नहीं होगा

3. आपके ब्लॉगर बहुत ही ए स्मूथ और स्पीड में काम करेगा

4. इससे अपने Blogger में ज्यादा से ज्यादा Traffic

 ला सकते हैं

यहां कोड javascript और CSS का कोड है और आप इस कोड को एक यही बात अपला कर सकते हैं अगर आपने उस कोड को डिलीट कर दिया तो आप में यह काम नहीं करेगा

सूचना

आप इस कोड को ऐड करने से पहले अपने थीम का बैकअप जरूर ले

1.सबसे पहले आपको अपने बुलाकर के टीम के ऑप्शन में जाना होगा उसके बाद आपको edit html पर क्लिक करना होगा उसके बाद आप javascript code को कॉपी कर के </body> ko search कर के उसके नीचे पेस्ट कर देना है

2.इसके बाद आपको css code ko कॉपी करने के बाद इस को सर्च करे ]]></b:skin> सर्च करने का बाद उसके ऊपर पेस्ट कर दे

3. और अंत में html code कॉपी कर के आप अपना कोड जिस पोस्ट में देना चाहते हैं अस पोस्ट को html view को ओपन कर के आप अपना कोड दे सकते ही 

Java Script Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> <script> var clipboard = new ClipboardJS(".cbtn"); clipboard.on('success', function() { M.toast({ html:" Successfully", classes:"green" }); }); clipboard.on('error', function() { M.toast({ html:"Copy error", classes:"red" }); }); </script>Copied!

CSS Code:

/* Code Box With Clipboard (R_S GAMEZON) */ .r1 {text-align: left;height: auto;width: auto;padding-top: 10px;padding-bottom: 10px;padding-left: 20px;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);border-radius: 0 0 4px 4px;} .cbtn {color: #fff;background-color: #26a69a;letter-spacing: .5px;cursor: pointer;font-size: 14px;outline: 0;border: none;border-radius: 4px;line-height: 36px;padding: 0 16px;text-transform: uppercase;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);font-weight: bold;} .toast {height: auto;width: auto;background-color: #50A950;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;position: fixed;display: inline-block;color: white;margin-left: 50%;margin-top: 5%;border-radius: 5px;} .c-box{position: relative;display: block;background-color: #1f2024;font-family: Monospace;font-size: 13px;color: #f2f2fa;white-space: pre-wrap;line-height: 1.4em;padding: 15px;margin: 0;border: 0;border-radius: 4px 4px 0 0; }

Html Code:

<br> <div class="c-box" id="content">Paste Your Code this area only </div> <div class="r1"> <button class="cbtn" data-clipboard-target="#content">Click Here to </button> </div> <br>

Read Also :

Go to Link