How To Install Syntax Highlighter With Copy Button On Blogger Website? [Script 2]]

Friends, today's topic is how to apply Blogger Code Box With Copy to Clipboard Button because if you have a website on your blogger and there you provide any kind of html or any script code to your visitor then if we use that code normally. If you paste it there, then it does not look good.

You must have also seen some blogs where you get to see a box and in that box they provide their code but the old box which was used in blogger did not have any option of copy to clipboard whereas you have to use wordpress. There are many types of plugins available in this, with the help of which you can add Code Box With Copy to Clipboard Button in your post, which is also nice to see.

But in today's post, I am going to tell you how you can add the same type of Blogger Code Box With Copy to Clipboard Button to your blogger's website so that any of your visitors can click on the copy button. Can copy the code in 1 click.

So friends, to add Blogger Code Box With Copy to Clipboard Button, you have to follow some steps :-

1. First of all you have to log in to your blogger and go to the theme section, after that you have to open your theme's coding by clicking on edit html, after that you have to press CTL+F and you have to add  in your theme. You have to search </body> and just above it you have to paste the code given below.

<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 this you have to search ]]></b:skin> or <b:skin><![CDATA[ and just above it you have to pest the code given below.

/* Code Box With Clipboard Button by Code Store 360 */ .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. Now you have to save your theme and come back to your blogger's dashboard.

4. Now after this you have to open your post in which you want to add this Blogger Code Box With Copy to Clipboard Button and you have to open your post in html view and where you want to provide your code There you have to paste the code given below.

<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>

5. Now in this code where Paste Your Code this area only is written, instead you have to paste your code which you want to provide in your post, after that you have to publish your post, friends, we have done our The box has been added to your post.

All Done......