दोस्तों आज का हमारा टॉपिक हे Blogger Code Box With Copy to Clipboard Button कैसे लगायें क्योंकि अगर आपकी blogger पर कोई website हे और वहां पर आप अपने visitor को किसी तरह का html या कोई भी script code provide करते हैं तो अगर हम उस code को normaly वहां पेस्ट कर देते हैं तो वो देखने में अच्छा नहीं लगता हे.
आपने कुछ ब्लॉग ऐसे भी देखे होंगे जहाँ पर आपको एक box देखने को मिलता हे और उस box में वो अपना code provide करते हैं लेकिन जो old वाला box blogger में use किया जाता था उसमे copy to clipboard का कोई आप्शन नहीं होता था जबकि आपको wordpress में काफी तरह के plugin मिल जाते हैं जिनकी help से आप अपनी पोस्ट में Code Box With Copy to Clipboard Button add कर सकते हैं जो की देखने में भी अच्छा लगता हे.
Smart Fone Hang होने से कैसे बचाये ? पूरी जानकारी हिंदी में
लेकिन आज की इस पोस्ट में मैं आपको बताने वाला हु की आप ठीक इसी तरह का Blogger Code Box With Copy to Clipboard Button अपने blogger की website में किस तरह से add कर सकते हैं जिस से की आपका कोई visitor copy button पर क्लिक करके आपके दिए हुए code को 1 क्लिक में copy कर सके.
तो दोस्तों Blogger Code Box With Copy to Clipboard Button add करने के लिए आपको कुछ steps को follow करना होगा :-
1.सबसे पहले आपको अपने blogger में लॉग इन करना हे और थीम वाले सेक्शन पे जाना हे उसके बाद आपको edit html पे क्लिक करके अपनी थीम की coding को ओपन कर लेना हे इसके बाद आपको CTL+F दबाना हे और आपको अपने थीम में </body> search करना हे और इसके ठीक ऊपर आपको नीचे दिए गए code को pest करना हे.
<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:"Copy Successfully",
classes:"green"
});
});
clipboard.on('error', function() {
M.toast({
html:"Copy error",
classes:"red"
});
});
</script>
Start 10 sec countdown When Click Download Button | Advance Script
2. इसके बाद आपको ]]></b:skin> या <b:skin><![CDATA[ search करना हे और इसके ठीक ऊपर आपको नीचे दिया गया code pest कर देना हे.
/* Code Box With Clipboard Button by gxfreee (gxfreee.com) */
.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;
}
3. अब आपको अपनी Theme को save कर देना हे और वापस अपने blogger के deshbord में आ जाना हे.
4. अब इसके बाद आपको अपनी उस पोस्ट को ओपन करना हे जिसमे आप इस Blogger Code Box With Copy to Clipboard Button को add करना चाहते हैं और अपनी पोस्ट को आपको html view में ओपन करना हे और जिस जगह पे आप अपने code provide करना चाहते हैं वहाँ आपको नीचे दिए गए code को pest कर देना हे.
<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 Copy</button> </div> <br>
5.अब इस code में जहाँ Paste Your Code this area only लिखा हे इसकी जगह पे आपको अपना वो code pest कर देना हे जो आप अपनी पोस्ट में provide करना चाहते हैं,इसके बाद आपको अपनी पोस्ट को publish कर देना हे लीजिये दोस्तों हमने अपना box अपनी पोस्ट में add कर दिया हे.
तो दोस्तों इस तरह से आप भी अपनी blogger की पोस्ट में इस तरह का box लगा सकते हैं.तो दोस्तों आपको ये पोस्ट कैसी लगी नीचे comment करके ज़रूर बताइयेगा.