How to Add Code Box With Copy to Clipboard Button in Blogger
Please read the instructions carefully, and always the first backup of your theme in case of any errors.
1. Go to your blogger dashboard and click Edit HTML in the Theme panel and paste the below code after the </body> tag.
<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>
2. After paste the below CSS code in between <style> or <b:skin><![CDATA[ and Save or ]]></b:skin> the theme.
/* Code Box With Clipboard Button by gxfreee (My Hindi Articles.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. After Saving your theme, then got to your blogger post editor and switch to HTML mode. Use this shortcode to which place you need to insert the Code Box With Clipboard Button in any of your posts
<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>