How To Add HTML Code Box In Blogger Post With Copy To ClipBoard Button Script Setup

 How to Add HTML Code Box In Blogger Post With Copy To ClipBoard Script Setup

How To Add HTML Code Box In Blogger Post With Copy To ClipBoard Button 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>



Then Place Your Post HTML Code In the " Paste Your Code this area only " Section.


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


Horoscope Live Widget Script                                  - Click Here


IPL Live Score Widget Script In Your 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


PLEASE SHARE THIS ARTICLE ON YOUR SOCIAL MEDIA PLATFORM TO KNOW OTHERS. IF YOU HAVE ANY QUERY PLEASE WRITE IN COMMENT BOX ........... THANK YOU FOR YOUR SUPPORT.


Post a Comment

0 Comments