How to Add Copy Button to Pre tag in Blogger

Hi to all, in this article I am going to tell you all about how to add copy button on pre tag in your blogger easily in just few minutes by using CSS and JavaScript.

So, you need to read the below provided steps carefully and completely to get clear understanding about adding copy button to pre tag without any issue or error.

Steps to Add Copy Button on Pre tag in Blogger

Step-1: Login to Blogger

First of all you need to visit official website of blogger.

Now you need to login to your blogger website dashboard by using your login credentials.

Step-2: Backup Blogger Theme

Now after login to your blogger website dashboard, you need to backup your blogger website theme to prevent any errors or issues while saving the code. and you can easily restore your code again if any issue occurs.

You can follow below provided path to backup your blogger website theme.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Save file in safe place for future use.

Step-3: Open Blogger Theme Editor

After successful backup of your blogger website theme, then you need to open blogger theme editor to add the code.

You can follow below provided path to open blogger website theme editor.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Step-4: Adding CSS code in Theme

After visiting your blogger website theme editor, now you need to add a simple CSS code inside it.

Now copy below provided CSS code.

<style>
.pre-wrapper{background:#f5f5f5;border-radius:3px;margin:0 auto;padding:0;position:relative}
.pre-wrapper pre{direction:ltr;display:block;font-size:13px;hyphens:none;line-height:1.6em;overflow:auto;padding:39px 25px 25px;position:relative;white-space:pre}
.pre-wrapper .copy-snippet{background: #3d4bdc;border:1px solid #bbb;border-radius:3px;color:#fff;font-size:12px;font-weight:400;line-height:1.42rem;margin:0;min-width:55px;padding:0 5px;position:absolute;right:0;text-align:center;text-decoration:none;text-indent:0;top:0}
.pre-wrapper .copy-snippet:disabled{color:#fff}.pre-wrapper pre::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:10px}.pre-wrapper pre::-webkit-scrollbar{-webkit-appearance:none;height:5px;width:8px}  
</style>

Now paste the copied CSS code just above closing head tag or </head> tag.

Step-5: Adding JavaScript Code in Theme

After visiting your blogger website theme editor, now you need to add a simple JavaScript code inside it.

Now copy below provided JavaScript code.

<script>
/*<![CDATA[*/
jQuery(document).ready(function($){var a=0;$("pre").each(function(){a++,$(this).attr("data-copyid",a).wrap('<div class="pre-wrapper"/>'),$(this).parent().css("margin",$(this).css("margin")),$('<button class="copy-snippet">Copy</button>').insertAfter($(this)).data("copytarget",a)}),$("body").on("click",".copy-snippet",function(c){c.preventDefault();var b=$(this);if(($pre=$(document).find("pre[data-copyid="+b.data("copytarget")+"]")).length){var a=document.createElement("textarea");a.style.position="fixed",a.style.top=0,a.style.left=0,a.style.width="2em",a.style.height="2em",a.style.padding=0,a.style.border="none",a.style.outline="none",a.style.boxShadow="none",a.style.background="transparent",a.value=$pre.html(),document.body.appendChild(a),a.select();try{document.execCommand("copy"),b.text("Copied").prop("disabled",!0)}catch(d){b.text("FAILED: Could not copy").prop("disabled",!0)}setTimeout(function(){b.text("Copy").prop("disabled",!1)},3e3)}})});
/*]]>*/
</script>

Now paste the copied JavaScript code just above closing body tag or </body> tag.

Step-6: Saving the Theme Code

After adding the two codes inside your blogger theme editor, as provided in above steps, now you need to click on save button.

After clicking on the save button, it will take few seconds to process your complete code and after successful processing of your code, you will get a message i.e. Updated Successfully.

Note

If you get any error or issues while saving the code, then you need to restore your backup theme code again and need to repeat the same process as mentioned in above steps carefully.

If you want to change styles and colors, then you you need to modify above given CSS code and for changing colors you need to replace color codes and for color codes you can use google color picker or any third party color picker website.

Conclusion

I hope that you have understood about adding copy button on pre tag in your blogger website easily in just few minutes by using CSS and JavaScript.