#1 Create Code Box With Copy to Clipboard Button in Blogger

Hello Guys! Welcome to your Gxfreee blog. So in this article today We’re going to talk about Code Box With copy to Clipboard Button in Blogger using the simple Script. Blogger only supports JAVASCRIPT so using a simple script to Create Code Box With Clipboard Button.

this code using not affect slow down your site. We present the shortcode based automatic add Code Box With copy to Clipboard Button for the blogger site.

Advantage Code Box With Copy Clipboard Button

This blogger script designed especially for blogger that no server loaded or third-party scripts is loaded besides the base. it only loads your entire page is loaded and other important page content is loaded first and making sure our code doesn’t hurt them. Download PPSSPP Games

• It’s Shortcode based.
• Copy to Clipboard Button.
• One-Time setup.
• Optimized Code for Performance.
• Slightest CSS.
• Responsive Design.

Improve User Experience

many users need to Code Box With Copy Clipboard Button functions because this Clipboard function is easy to copy code box code in a single click. this Code Box With Clipboard Button script is User-friendly.

Code Box With Copy to Clipboard Button

You have just used a shortcode. This is a one-time setup and after that, don’t have any work.

just two javascript function files add extra, this file is important to Clipboard function. don’t change or remove code, because this code is not working.

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

Watch Video Tutorial

Conclusion

Thank you for reading this article post, I hope that you liked this post on how to add an automatic Code Box With Copy to Clipboard Button in the blogger and helped you to add a Code Box With Clipboard Button in Blogger. If so please share this article on your social media. If you find any problems or issues you can comment below.

Mohan

hi, I am Mohan, founder of the gxfreee website. Gxfreee ☇ Just Learn Something New. Gxfreee.com(gxfreee) is an information and Tech Support blog. In this blog, along with blogging-related information, Adsence approval tips, blogger Premium suport, all other types of information will be available!. Contact me in the contact form