• ABOUT
  • PRIVACY POLICY
  • DISCLAIMER
  • CONTACT
Thursday, January 5, 2023
Gxfreee
No Result
View All Result
  • Home
  • Recent Post
  • Blogger Template
  • WordPress Plugin
  • Premium Apk
  • Home
  • Recent Post
  • Blogger Template
  • WordPress Plugin
  • Premium Apk
No Result
View All Result
Gxfreee
No Result
View All Result

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

Mohan by Mohan
December 24, 2022
in Blogger Script
0 0
0
Code Box With copy to Clipboard Button
0
SHARES
557
VIEWS
Share on FacebookShare on Twitter
Contents Show
1 READ ALSO
2 100+ Dofollow Backlink Site List 2021 Free
3 How To Install Floating Banner Ads With Responsive Close Buttons
4 Advantage Code Box With Copy Clipboard Button
4.1 DEMO
5 Improve User Experience
6 Code Box With Copy to Clipboard Button
7 How to Add Code Box With Copy to Clipboard Button in Blogger
8 Conclusion

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.

READ ALSO

100+ Dofollow Backlink Site List 2021 Free

How To Install Floating Banner Ads With Responsive Close Buttons

Advantage Code Box With Copy Clipboard Button

DEMO

Click here to view Demo

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.
Code Box With copy Clipboard Button
<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 copy to Clipboard Button
/* 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.

Code Box With copy to Clipboard Button
<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.

Code Box With copy to Clipboard Button
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

Related Posts

Dofollow Backlink Site List
Blogger Template

100+ Dofollow Backlink Site List 2021 Free

December 24, 2022
Floating Banner Ads
Blogger Script

How To Install Floating Banner Ads With Responsive Close Buttons

December 24, 2022
Remove Mobile View m=1 in Blogger
Blogger Template

How to Remove Mobile View m=1 in Blogger Blogspot? for Free

December 24, 2022
Blogger Password Protected Download Button
Blogger Script

[2021] Free Premium New Blogger Password Protected Download Button Script

December 24, 2022
Online Rubik Cube Game
Blogger Template

3D-Online Rubik Cube Game New Blogger Template

December 24, 2022
email subscription for blogger
Blogger Script

#1 Add Advanced Stylish Email Subscription for Blogger

December 24, 2022
Next Post

[Bollywood] Tamil Movie Download Site List 2021

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

POPULAR NEWS

god of war 2 ppsspp iso file download

Download God of War 2 PPSSPP ISO file download Highly Compressed[190MB]

December 24, 2022
God Hand

[79MB] Free Download God Hand PPSSPP ISO Highly Compressed

December 24, 2022
Download God Of War 4

Download God Of War 4 PPSSPP ISO Highly Compressed

December 24, 2022
Dragon Ball Z Budokai Tenkaichi 3 PPSSPP ISO

Dragon Ball Z Budokai Tenkaichi 3 PPSSPP ISO Highly Compressed Free

December 24, 2022
God Of War 3 ISO

Download God Of War 3 PPSSPP ISO Android Highly Compressed

December 24, 2022
  • ABOUT
  • PRIVACY POLICY
  • DISCLAIMER
  • CONTACT

© 2022 Gxfreee - Gxfreee.com is a Knowledge Store.

No Result
View All Result
  • Home
  • Recent Post
  • Blogger Template
  • WordPress Plugin
  • Premium Apk

© 2022 Gxfreee - Gxfreee.com is a Knowledge Store.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In