Up next in 10
Copy to Clipboard Button using HTML, CSS & JavaScript _ Code Box _ Blogger Tutorial
2K views
Jan 26, 2024
This tutorial video demonstrates how to implement a "Copy to Clipboard" button on a Blogger website using HTML, CSS, and JavaScript. The tutorial focuses on creating a user-friendly code box with syntax highlighting, making it visually appealing for blog readers. By following the step-by-step instructions, viewers will gain insights into the integration of HTML, CSS, and JavaScript to enhance the functionality of their Blogger platform, allowing users to easily copy code snippets with a single click. This concise guide aims to make the implementation of a "Copy to Clipboard" feature accessible for bloggers, providing a seamless experience for their audience.
View Video Transcript
0:00
Hello everyone, welcome to Key to Blogging and in this video I will show you how you can
0:03
add a copy to clipboard button to your blogger website. So as you can see whenever someone click on this button, it will copy the whole code inside the box
0:12
to the clipboard and I can paste it in notepad file so let me just open a new notepad file
0:18
and I will paste it like this. And this is fully responsive so let me just click on inspect element
0:27
And as you can see this is how it looks in mobile device. So let's check how you can add the copy to clipboard button to your blogger website
0:36
And before that if you are new to this channel then consider subscribing to blogging for
0:40
more upcoming videos like this. And if this content is helpful to you, then hit the like button
0:48
So first of all you have to go to your blogger dashboard and click on new post
0:53
Now you have to switch to the HTML view from here and I have to copy a code like this
0:59
So I will copy the whole code from here and I will paste the code here
1:08
Now you have to change the heading so the heading is like HTML and here you have to add the code
1:16
So let me just copy some HTML code from here. So I will copy the HTML code from here and I have to pass the HTML code using a HTML parse tool
1:29
So I will paste it and I will copy the HTML code like this and I will go to the post editor and here I have to add the code between the pre So let me just select this and I will paste it like this
1:47
Now let me just publish this blog post. Now let me just view the blog post from here and as you can see the HTML code is added
1:59
in our blog post and if you want to add more code box in your blog post then you have to copy
2:05
then you have to copy the code. So let me just open the blog post and I have to copy this code from here
2:16
And I will click on Enter and I will paste it again
2:20
And here I can change the heading. So let me just change the heading to like CSS and here I have to change the ID to copy to
2:32
then here I have to change the ID to copy 2. Then I will change the code 1 to code 2 and here I have to change the code 2
2:44
Now let me just copy a CSS code from here. So let me just copy the code from here and I will change the code in the pre-section
3:02
Now let me just update this. Now refresh this page. And as you can see the CSS code box is added and when I click on the copy to clipboard button it will copy the CSS code So let me just open a new NotepFed file and I will paste the CSS code here and let me just
3:29
copy the HTML code and I will paste the HTML code here
3:36
So in this way you can add multiple code box in your blogger website
3:40
So you just need to change the ID in the HTML code
3:45
So you have to change the copy to and code 2. Now you can further customize the code box like you can change the background color of this
3:55
button or you can change the box shadow effect. So for this let me just click on inspect element and let me just select the button here
4:05
So I will select the button and I can change the button background color like this
4:11
And you can also change the padding or the alignment. And let me just select the whole code box and I can change the box shadow effect
4:22
So for this I will copy a box shadow effect from here
4:27
So let me just copy the box shadow effect 29 and I will go to front end and I will add the
4:34
box shadow effect. And as you can see the box shadow effect is changed
4:41
So we just need to search for this CSS class. So, here you have to find the box shadow effect
4:50
So just replace the box shadow code with the new code. So in this way you can further customize the code box according to your website And you can also change the background color something like that
5:08
So let's change it to yellow. So I hope you got the idea how to add the code box in your blogger website and if you have
5:20
any doubt regarding this then you can ask me in the comment section
5:24
And if you found this content helpful, then make sure to hit the website
5:28
like button and if you don't want to add the code multiple time in the blog post then you can simply
5:34
add this code in the theme editor so for this i will select from this code and i will
5:42
cod this code from here so you just need to add the HTML code in the blog post
5:48
so let me just update this now i will go to theme editor and i will click on edit
5:58
It HTML. Now search for closing body tag and you have to paste that code just above the closing body
6:06
tag and click on save. Now let's go to the blog post and click on refresh
6:13
And here as you can see the code box are still working and you don't need to paste the code
6:19
again and again in the blog post. So you just need to add the HTML code like this in your blog post and you can place the CSS
6:27
and JavaScript code in the theme editor. So I hope you got the idea how to add a code box to your blogger website
6:35
And if this content is helpful to you, then make sure to hit the like button and do
6:39
subscribe Key to Blogging for more upcoming videos like this. Thank you