Hey you are also here to know about this please make sure you understand that this post is only for educational purpose. I do not promote this act. This post is for people who want to learn and try things out like me
If you are a user of free blogger templates like those from third-party designers such as Sora templates, Piki templates, Jago design, Igniel, and others, you would see the credit "designed by... created by...".
Leaving these credits intact acknowledges the creator's effort and supports their continued development. But removing the footer credit from a Blogger template can give your blog a more personalized touch.
It's essential to understand how the credit protection works and the various methods to customize your footer.
In this post, I'll explore different ways to remove footer credits on a custom third party template while ensuring your blog remains functional and stylish.
First, you should know the purpose of the credit and the reason why its there in your template.
Important Purposes of Footer Credits
It acknowledges the effort and creativity of the template creator. They invest time and skill to develop templates that others can use for free.
By leaving the credits intact, you're supporting the creator's work and encouraging them to continue providing free resources and possibly improve existing ones.
It fosters a culture of sharing and community within the design and development community. When you use a free template and leave the credits, you contribute to this ethos. - The Emissionhex space knows this well
For the creator, having their credits on templates can lead to exposure to a wider audience. It can also serve as a form of networking, as others may see their work and reach out for collaborations or paid projects. I know of most template creators today all because of their credits.
Some free templates come with licenses that require you to keep the credits intact as part of the usage agreement. Removing credits could violate these terms and lead to legal issues. Always keep this in mind because you this is a responsibility.
Back to the post on how to remove footer credit.
Disclaimer:
Before we proceed, it's important to note that some free templates come with licenses that require you to keep the footer credits intact. Removing them without permission may violate these terms and lead to legal issues or restrict your request for support and update. Always check the terms of use for your template and consider reaching out to the template creator for guidance if needed.
Now we proceed make sure you have a backup of your template.
How to Identify Footer Credit Protection:
The footer credit in many templates is often protected to ensure proper attribution. Here's how to identify if your footer credit is protected:
1. Search for the Attribution URL:
Look for the URL mentioned in the footer credit. This URL typically leads to the author's website. e.g soratemplates.com
2. Check Script Tags: Sometimes, the URL may be inserted within a <script> tag to prevent easy removal.
Methods to Remove Footer Credit:
Method 1- Direct Removal from HTML:
The most straightforward method is to locate the footer credit code in your HTML template and remove it manually.
This involves finding the HTML code responsible for displaying the footer credit link and deleting or commenting it out.
In most cases, when you remove the footer credit html from the template, your site begins to redirect to the designer website. This is because of a protection java script implemented in the template. Restore your template backup and try another method.
Method 2 - Remove Script Tag:
This is also a direct approach if the url is located within a <script> tag, you can remove the entire script to eliminate the footer credit.
Locate the <script> tag containing the URL and delete it from your template.
This solution is always guaranteed to work out but sometimes most designers add core scripts which allows the site to run smoothly with the javascript. So when you remove the script, your site won't function well.
Method 3 - Use CSS to Hide:
You can use CSS to hide the footer credit by setting its display property to none or by applying other hiding techniques like setting opacity to 0, visibility to hidden, or positioning it off-screen.
CSS Display Property: ( Not Solid )
If the footer credit is styled with CSS, you can hide it using the display: none; property.
Find the CSS selector for the footer credit and add display: none; to its style.
Adjust Opacity and Font Size: ( Flawless )
To make the footer credit invisible you can adjust its opacity or font size.
Set opacity: 0; or font-size: 0; to hide the credit while keeping it in the DOM.
Here is the Implementation
style='font-size:1px; opacity:0; pointer-events: none;'
Notice how the style is added before the class attribute.
Important Note:Using this method, the content is still part of the HTML and will be indexed by search engines. But the text and any elements within the footer credit will not be visible to users viewing the page.
Update:
Method 4 - Removing via JavaScript:This JavaScript is the last way to remove footer credit with no problems at all. When this javascript is used, your site would run well with no redirection even if you remove the credit html.
This is a script that override any protection or redirection scripts, you can use the following JavaScript code. This script will ensure that the footer credit is removed, and it will also disable any redirection attempts made by other JavaScript code: It even counters the code I shared to protect template credit.
<script>
//<![CDATA[
(function(){function h(a){var b=document.querySelector(a);b&&b.parentNode.removeChild(b)}var c=["#footer-credit",".footer-credit","footer.credit","div[style*=\"footer\"]"];/* You should confirm change or add your template credit selector here */c.forEach(h);var d=new MutationObserver(function(a){a.forEach(function(a){a.addedNodes.forEach(function(a){1===a.nodeType&&c.forEach(function(b){(a.matches(b)||a.querySelector(b))&&h(b)})})})});d.observe(document.body,{childList:!0,subtree:!0,attributes:!0,characterData:!0});window.addEventListener("load",function(){c.forEach(h)});var e=window.setTimeout;window.setTimeout=function(a,b){if("function"==typeof a){var d=function(){try{a()}catch(b){console.error(b)}c.forEach(h)};return e(d,b)}return e(a,b)};setInterval(function(){c.forEach(h)},500)})();
//]]>
</script>Instructions
Confirm or add your site template custom selectors in the marked part as needed.
Place this script within the <head> section or before the closing </body> tag.
Conclusion:
Customizing your Blogger template by removing the footer credit can give your blog a unique look. However, it's important to respect the original author's work whenever possible.
By understanding the methods mentioned above, you can tailor your blog's footer to match your style while keeping it clean and professional.
Happy blogging 👀
