Hi, my name is Gabriel, I'm a professional web developer and today I wanna show you something very wonderful you can introduce in your blog to enhance good user experience of all your visitors who arrive at your website.
What is it? what is it used for? and how can it improve user experience on my website?
Code Box is a box with a source code section; this script box is comparable to the highlighter syntax but has a distinct appearance.
The goal of the Code box is to ensure that the appearance of the source code is tidy and does not occur, not only the appearance of this script box is also a lot of options and different colors that you can use to improve the design of your blog.
How Does Code Box Improve User Experience On Your Website
Many people rely on the Code Box With Copy Clipboard Button features to enhance their browsing experience and increase productivity. This is because the Clipboard feature makes it easy to copy code box code with a single click. With the end-user in mind, we created this Code Box With Clipboard Button script!
Now you know what a code box is and what it is used for, let's create one real quick.
How to create A Code Box In Blogger
Note: Please read the instructions carefully and make sure you follow the as I have shown you in this post, always back up your theme before making any changes.
Step 1: Go to your blogger dashboard and click one theme.
Step 2: Click on the drop-down arrow beside "customize theme" and select edit HTML.
Step 3: Press ctrl + F, search for </b: skin> and paste this code just above it as shown in the picture
/* 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; }
Step 4: Press ctrl + F, search </body> and paste this code below it as shown in the picture then save it.
<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>
Step 5: Go to the page you want the clipboard to appear and paste this code. As shown in the picture, add your message to the appropriate place in the source code you're about to paste
<br />
<div class="c-box" id="content">This is where you need to paste your code</div>
<div class="r1">
<button class="cbtn" data-clipboard-target="#content">Click Here to Copy</button>
</div>
<br />
Conclusion
I would like to thank you for taking the time to read this article post. I really hope that you enjoyed this post on how to create an automated Code Box With Copy to Clipboard Button in the blogger and that it assisted you in adding a Code Box With Clipboard Button in Blogger.
If that's the case, please share this post across all of your social media accounts. You are welcome to leave a remark below if you have any difficulties or troubles. [Read also How To Copy Content from a site that Copying is disallowed ]
