How to Add HTML Code Box In Blogger Post With Copy To ClipBoard Script Setup
Hey, guys welcome to the blogs of S . B Tech, So these days we tend to ar back with a surprising script in blogger which is How To Add HTML Code Box In Blogger Post With Copy To ClipBoard Button Script Setup.
So here during this Blogger Website, we are going to find out how to set up an internet site that is HTML Code Box In Blogger Post With Copy To ClipBoard Button Script. For Blogger. when finishing web site setup it's necessary to try to to the SEO setting, as SEO can assist your website to rank.
So below are the steps for setup a website in blogger, follow them and begin Earning from your tool website.
How To Add HTML Code Box In Blogger Post With Copy To ClipBoard Button Script Setup
Follow The Instructions: -
Step 1: Login To Blogger Account Through Gmail.
Step 2: produce web blog Name.
Step 3: opt for Your Preferred Domain name. And Save it.
Step 4: 1st of all visit your Blogger Dashboard.
Step 5: Go To Theme, And Select Edit Html.
Step 6: Then Click Anywhere of Theme And Press "Ctrl + F".
Step 7: Search This Code - ' </body> '.
Copy This Code And Pest It Just Before '</body> ' Tag's
<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>Click Save Theme
Step 8 : Again Click Anywhere Of Theme And Press " Ctrl + F " . And Search - ']]></b:skin> ' Or '<b:skin><![CDATA]' .
Find Any One of Them And Pest This Following Code Just Before ']]></b:skin> ' Or '<b:skin><![CDATA]' Tag .
Manually Copy This Code: -
/* Code Box With Clipboard Button by gxfreee (gxfreee.com) */
.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;
}Click Save Theme
Step 9: Now Go Back To Post Section.
Now We Find How To Add HTML Code Box In Blogger Post With Copy To ClipBoard Button.
i ) Select New Post.
ii ) Give Post Title.
iii ) Give Heading For Your Post.
iv) Now Open Html <> View .
v ) Then Pest This Following Code.
Manually Copy This Code: -
<br>
<div class="c-box" id="content"><pre><code>Paste Your Code this area only</code></pre>
</div>
<div class="r1">
<button class="cbtn" data-clipboard-target="#content">Click Here To Copy</button>
</div>
<br>Before Placing Your Code, Please Go To This Website And Convert Your Code. And Copy Converted Code And Pest This Section.
Html Converter Website -" https://htmltoxmlconverter.apkpuree.xyz/ " Type In Google.
Step 10. Publish Your Post.
View Your Blog. Your Post Almost Ready. If Any Quarry, Please Contact Us.
Follow This: -
* HOW TO CONNECT CUSTOM DOMAIN IN BLOGGER - Click Here
* Advance Online Age Calculator Script For Blogger - Click Here
* Advance Disclaimer Generator Tool Script - Click Here
* Create Advance Download Timer Button Script - Click Here
* Stylish Html Code Box Script - Click Here
0 Comments