How To Hide Powered by Blogger Footer Attribution from Your Blog

Hello! Welcome to Tech Ankur.

In today's article I am going to tell you how to add beautiful code frame with copy, share and downloading links in blogger/website.

Benefits of Download Button

1. In this code box, you will get a separate copy button to copy it in one click.
2. There will also be a special button in the code box to download in one click.
3. Along with this, you will also get a separate option to open the code given in a separate page in one click.
4. It is mobile friendly, user friendly and SEO friendly that's why it makes it the best.

You can see the demo here⤵

View Demo

Install Code Frame in Blogger

To add code frame in blogger, I am providing you 2 codes, with the help of which we have to create this code box

1. First of all login to Blogger and click on theme and click on edit html.
2. Remember that you must take a backup of your blogger theme before editing it.

Now search the

code by pressing cntrl+F and copy and paste it just above this code by double clicking on the below code. At last save the theme.

Now you have to go back to the theme and click on Customize. Now click on advance and click on add CSS and copy all the code given below, paste it in add CSS and save it.

/* Code Box by Tech Ankur*/ .pre{background:#f6f6f6;color:#2f3337;direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto} 

.prepre{margin:0;color:inherit;background:inherit;display:block;position:relative;font-size:13px;line-height:1.6em;border-radius:3px;padding:30px 20px 20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} 

.pre.adv{border-radius:10px}

.pre.adv::before{display:none}.pre:not(.str) .prCd{display:none}.pre.str .prTl{display:none;}.pre.adv pre{padding-top:60px}.preM{position:absolute;top:0;right:0;left:0;width:100%;background: rgba(0,0,0,.04);padding:10px 10px 10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;z-index:2}.preT{font-size:12px;font-family: var(--fontC);line-height:1rem;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:10px;}

.preA{display:flex;gap:8px;white-space:nowrap;}.preA button{outline:none;border:none;width:30px;height:30px;background:#d9d9d9;padding:0;margin:0;border-radius:50%;transition:border-radius .2s ease;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}

.preA button:hover{border-radius:40%;}.preA button >svg{width:18px;height:18px;stroke:none;fill:#2e2e2e;transition: all .5s ease;}

.pre.cpd .prCp svg, .pre.pnd .prDl svg, .pre.dwn .prDl svg{animation: jiggle 1s}

.pre.cpd .prCp svg .a,.pre:not(.cpd) .prCp svg .b{opacity:0}.pre.dwn .prDl svg .a, 

.pre.pnd .prDl svg .a,.pre:not(.pnd) .prDl svg .b,.pre:not(.dwn) .prDl svg .c{opacity:0}@keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%

{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%

{transform:rotate(-26deg)}100%{transform:rotate(0)}}@-webkit-keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%

{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}

You can change highlighted texts as you want in the code box!

How to put Code Frame in blogger post

To place the code frame in a blogger post/page, copy and save the code given below. Now wherever you want to place this code box, paste this code there and paste your code in place of <!– Code –> and put it in the blog post/page.

Now the code frame of the beautiful copy download button has been installed in your blogger post / page.

Important Information:

1. Data-text is the type of code, e.g. CSS, HTML or JavaScript
2. Data-file is the download name of File
3. Data-lang is the format of the file, for example: .css, .js, .html, .txt .
4. If it is not changed it will remember the default which is .txt
5. Data-download is to show download button true or false
6. Data-copy is to show copy button true or false
7. Data-view is to show preview button true or false
8. Data-download,data-copy, data-view these three changes are not necessary.
9. Enter your code here
10. If you write direct html code here it won't do a work. You need to use
11. Html Parser to change the html code

Conclusion

Hope the article How to Create a Code Box with a Beautiful Copy and Download Code Button for Blogger will be useful for you, if you have any doubt or facing any issue while installing it then you can contact me in comment. Can ask, share with you gunmen, thanks for visiting, have a nice day!

That's done!

If you encounter any problem, do not hesitate to contact us

Copyright: @Tech Ankur

Go to Link