Up next in 10
How to Enable Double Click to _Copy to Clipboard_ in Blogger
2K views
Jan 24, 2024
In this tutorial video, the presenter guides viewers through the process of enabling the double-click action to copy content to the clipboard in Blogger. The video likely covers step-by-step instructions on implementing this functionality, potentially involving HTML, CSS, or JavaScript code modifications within the Blogger platform. Viewers can expect practical insights into enhancing user experience by allowing visitors to easily copy text or other content with a simple double-click. Whether you're a Blogger user, web developer, or someone interested in improving interaction features on your website, this video aims to provide a helpful guide for implementing the "double-click to copy to clipboard" feature in the Blogger platform.
View Video Transcript
0:00
Hi everyone, welcome to Kito Blogging and in this video I will show you how you can add a double click to copy to clipboard functionality to your blogger website
0:08
So as you can see that when you add a long code snippet to your website, then it is difficult to highlight the text and then copy to clipboard
0:17
So you can simply double click on it and copy to your clipboard. Now you can use this code anywhere else
0:23
So let me paste it here. As you can see that the code is copied to my clipboard
0:27
So let me overwrite it here. So let me copy it again like this
0:34
So it will override my clipboard. Now let me double click here again and it will copy the content to my clipboard
0:42
Now I can paste it like this. So this is how the copy to clipboard functionality works
0:47
So let's check how you can implement this type of copy to clipboard functionality to your blogger website
0:53
And if you found this video helpful, then make sure to hit the like button
0:56
And if you are known to the channel, consider subscribing. So let's get started
1:01
So all right, now let's check how you can add this to your blogger website
1:06
So for this you need to go to your theme code here and then you have to take a backup of
1:11
your theme code. So if you are doing it in your live site, taking a backup will ensure that if you do any
1:16
mistake then you can easily restore it to the previous state. So let me click on Edit HTML here
1:25
And here you need to scroll down all. the way to the bottom. So here, let me scroll down here and here you need to search for the closing body tag
1:34
So it is generally the last two lines. So you can see that last is the closing HTML tag and above that there is the closing body tag
1:44
So you need to paste a code just above it. So let me copy the code here
1:49
So I will provide this code in the description So you can copy the code from there So let me copy this to my clipboard and let me paste it here like this
2:02
That's it. Now let's click on save here and let's add a code box to our blog post and check how you
2:09
can implement this copy to clipboard functionality in the blogger. So let me just go back here and let me just go to the blog post here
2:18
Now let's add a code box to our blog post. So I will click a new post here and I can name the title like copy to clipboard
2:32
And let's add the code box. So I will add the pre tag here and then I will add the code tag here and then I will
2:41
close the code tag here and then I will close the pre tag here
2:47
So I have added the code box here. Now let's add a code inside the code tag
2:55
So let me copy some code from here. So you can use your own HTML CSS or JavaScript code
3:01
So for this purpose, let me use this script inside the code box
3:07
So let me just copy it and let me paste it. But before that we need to parse the script because if you are using it in your code box
3:16
you have to pass the HTML CSS JavaScript before adding to the code box
3:22
So for this, what I can do is I can simply search for HTML parse tool for blogger like this
3:31
And you will see our website, Techileep. So just click on here, free HTML parse tool
3:36
So we need to paste that script here. So you have to use your own code here
3:42
Let click on parse and it will parse the HTML code Now let copy it and let paste it inside the code box here As you can see that we have added the code box
3:54
Now let me just publish this post and let me open this blog post
4:00
And as you can see that we have added a code box like this. So when I double click on it, it's not copying to my clipboard
4:06
That's because we need to assign the class inside the code box
4:10
So for this I will click on here. And here I have to assign a class here
4:16
So I will add a class like class equal to and in double code
4:21
You have to assign a class here. So let me just see this is the class, copyable code
4:27
So you need to use this class here, copyable code. So you can change this class if you want
4:34
So let me add this class, copyable code and let me close the double code
4:40
So as you can see that we have added the class here, copyable code. copyable code inside the code box
4:45
Now let me just update it. Now let me just refresh this page
4:51
As you can see that the page is refreshed, now let me double click on it and as you can
4:55
see that the code is now copied to our clipboard. So let me test it
5:00
So I will paste it here. Now let me overwrite it from here
5:06
So I will copy it. So it will override my clipboard. Then I will again go to the blog post and
5:12
double click on it and let's check it and you can see that it is copying the content inside
5:18
the code box. So what if you want to add multiple code box in the same page
5:23
So you can also do the same process. You have to add the class to all of your code box where you want this functionality
5:30
So what I can do is I will duplicate it here like this and let me delete something from here like this and let me update it So make sure to add the class to all of your code box
5:51
Class equal to copyable code like this. So let me just refresh this page and here you can see that this is our second code box
6:01
So let me copy the first code box first and then I will paste it here
6:07
And then I will go to the website and double click on it and I will paste it here like this
6:15
So this is how you can add multiple code box and the copy to clipboard functionality will still work
6:20
like this. So it is a very easy way to add a code box like this
6:26
And you can also add a text inside the code box to show if it is double click to copy to
6:32
clip or functionality is added in the code box or not. So for this I can do one thing I will right click on it and I will click on inspect
6:40
Now I will find the code here and I will expand it here
6:46
Let's click on before and let's check the content here. So let me edit the content here so I will type like double click to copy
7:05
like this let's hit enter and I will close it here and as you can see that the text is shown
7:11
here double click to copy so user will know that he can double click and copy all the code like this
7:18
and it will also show a notice like this so this is how you can add a copy to clipboard functionality
7:25
to your code box so if you have any doubt regarding this then you can ask me in the comment section
7:30
and if you found this video helpful makes you hit the like button and i will see you in the
7:35
Next one, bye-bye
#Clip Art & Animated GIFs