Text Code Box With Click to Copy Button - Copy to Clipboard in Blogger

Text and Code Box With Click to Copy Button | Copy to Clipboard in Blogger https://youtu.be/5eWyPKNwUiY

✅ Steps to add Text and Code Box With Click to Copy Button | Copy to Clipboard in Blogger

- First of all, open the blog post,

- we provide this post link in the video description.

- copy this j s code.

- now, go to your blogger dashboard.

- click on theme.

- click on customize.

- click on edit html.

- now simply click anywhere in the theme code.

- now, press control f on your keyboard.

- now, you can see the search box.

- simply type close head tag

- Press Enter.

- now, you can see close head tag.

- simply paste js code above this close head tag.

- click on save.

- now go back to the post.

- copy this script code.

- head over to edit template page.

- now we need to paste the JS script code above close body tag

- to find a close body tag.

- simply click anywhere in the theme code.

- now, press control f on your keyboard.

- now, you can see search box.

- simply type close body tag

- Press Enter.

- now, you can see close body tag.

- simply paste js script code above this close body tag.

- click on save.

- now go back to the post.

- copy this CSS code.

- over to Blogger dashboard.

- click on layout.

- click on Theme Designer.

- Click on Advanced.

- Now select "ADD CSS" from the drop down menu.

- Now Paste the CSS Code.

- click on Save.

- now go back to the post.

- head over to html code.

- now, in this code, you can see $ sign.

- simply remove $ sign, and add Left Pointing Angle Bracket.

- now copy this code.

- now paste this code in the post where you want to add copy to clipboard.

- open the post,

- go to html view.

- now paste the code.

- now, in this code, you can see this tag,

- simply remove this & add your text or code, which you want to place in clipboard.

- now, we need to give a unique tag for this copy to clipboard.

- to add a unique tag, you can see this text, simply remove it and add your own unique tag for this copy to clipboard.

- make sure, these two tags are the same, to work this clipboard.

- Please Note, Where ever you create new different copy to clipboard, you must use different unique tag.

- Change the rows number to increase or decrease clipboard height.

- now, Update the post.

- we successfully added copy to clipboard.

- it's also responsive by device.

- when we click on click to copy, it will copy clipboard text & code.

- now, if you want to customize this text area or the copy button

- then simply go to your blogger dashboard.

- click on theme.

- click on customize.

- click on edit html.

- now simply click anywhere in the theme code.

- now, press control f on your keyboard.

- now, you can see search box.

- simply type .copyarea

- now, you can see CSS for text area & copy button.

- if you want to change text area background color, then change this hex code.

- now, if you want to change copy button color, then change this hex code.

- change this hex code if you want to change copy button hover effect color.

- once you done, click on save.

- now, if you want to make Gradient copy button.

- then go back to the post.

- copy this CSS code.

- head over to edit template page.

- search for .copyarea

- go to button dot Click To Copy Button.

- now, remove this background tag and paste the CSS gradient background tag.

- now, simply remove first color tag & add your first color.

- remove second color tag & add your second color.

- once you done, click on save.

- now, we need to change the hover color for the copy button.

- for that, go back to the post.

- copy this CSS code.

- head over to edit template page.

- go to button .ClickToCopyButtonhover

- now, remove this background tag and paste CSS for Gradient Color on Hover.

- now, simply remove second color tag & add your second color.

- remove first color tag & add your first color.

- once you done, click on save.

- we successfully added copy to clipboard in blogger with gradient button.

- Done.

1. Copy This JS Code and Paste it Above close Head Tag in Blogger Theme file

2. Copy This script Code and Paste it Above close Body Tag in Blogger Theme file

3. Copy This CSS and Paste it in Blogger Theme file

Go to: Blogger Dashboard -> Layout -> Theme Designer -> Advanced -> Add CSS

/*-------Click-to-copy-------*/
    .copyarea {
        display: flex;
        position: relative;
        width: 100%;
        height: auto;
    }
    
    
    .copyarea textarea {
        width: 100%;
        box-sizing: border-box;
        border: none;
        padding-top: 34px;
        padding-bottom: 34px;
        padding-right: 11px;
        padding-left: 11px;
        background: #f5f6f7;
    }
    
    
    .copyarea textarea:focus-visible {
        outline: -webkit-focus-ring-color auto 0px;
    }
    
    
    button.ClickToCopyButton {
       width: 30%;
       height: auto;
       position: absolute;
       top: 0;
       right: 0;
       border: none;
       padding-top: 5px;
       padding-bottom: 5px;
       color: #fff;    
       background: #0066ff;
    }
    
    
    button.ClickToCopyButton:hover {
       background: #000;
    }
    
    
    @media screen and (max-width: 500px)
         {button.ClickToCopyButton {
              width: 100%;
    }}
    
    
    /*----xx------------Click-to-copy-------------xxxx---*/

4. Copy This Code and Paste it in Your Post
You Must Give Unique Tag for Every Different Copy to Clipboard
Remove $ sign from Following code and Add (Left-Pointing Angle Bracket Symbol)

5. CSS for Gradient Color on Copy to Click Button

6. CSS For Hover Gradient Color on Copy to Click Button

7 Comments

Latestjob notificationAugust 8, 2021 at 7:44 AM
Can we use this code in WordPress?
S David PrinceSeptember 23, 2022 at 4:33 AM
See the readers can tamper with what is inputed in the box. They can mistakenly or willing press backspace on their keyboard to delete some words how can this be fixed
LAWBOL.inApril 8, 2023 at 9:56 PM
When I go to Theme Designer -> Advanced , the Add CSS option is not displayed.
AdamsJuly 11, 2024 at 3:36 PM
Goood i removed design by but still it is on footer
Yeshopy.comSeptember 18, 2024 at 10:35 PM
Shopping continues to be a vital aspect of daily life, adapting to consumer needs and trends. E-commerce has revolutionized convenience, offering global bios7.bin access, while brick-and-mortar stores provide personalized experiences. This hybrid model enhances customer satisfaction, keeping shopping relevant and dynamic.