how to add safelink in any blogger template
how to create safelink in any blogger template
How to add safelink in any blog or websites
If you want to install Safelink in any blogger template and want to maximize your earnings, then for that you have to follow some steps which are given below.
Here are some 6 steps, in these steps you will come to know how to set your safelink in any blogger template.
What a lot of people do is use other URL shortener website because they don't have their own URL shortener website, so today we are going to tell you how you can create safelink in your website, that too in your main website. on the blog.
What is safelink ?
Friend, Safelink is a URL mask feature with the help of which you pass people through any of your other articles to download the files provided on your website, thereby increasing your Adsense earning and website reach
Steps to add safelink in your blogger website
1. To add SafeLink, first you have to go to the dashboard in your block, after that you have to go to the theme section and click on Edit HTML.
After that you have to find <head> tag which is found on your 3rd or 4th line.
You put this jquery script at the bottom of your <head> :
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
2. Then you have to put this css code above your </head> tag :
<style>
.wcSafeShow{position:relative;width:35px;height:35px;display:flex;margin:auto}
.safeWrap{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);z-index:999999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.panel-primary{background:#fff;text-align:center;display:block;overflow:hidden;width:100%;max-width:80%;padding:0 0 25px 0;border-radius:5px;margin:15% auto;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}.panel-body{position:relative;margin:0 25px}.panel-heading h2{background:#ff0088;color:#fff;margin:0 auto 25px auto;font-weight:400;padding:15px;font-size:20px}.panel-body input{background:rgba(0,0,0,0.04);width:100%;padding:15px;border-radius:5px;border:1px solid transparent;font-size:16px;color:#000;outline:none;text-indent:60px;transition:all .3s}.panel-body input:focus{background:#fff;color:#000;border-color:#ff0088;outline:none;box-shadow:0 0 5px rgba(0,0,0,0.1)}.panel-body .input-group-btn{position:absolute;top:0;right:0}.panel-body button{border-radius:0 5px 5px 0;background:#ff0088;color:#fff;border:0;padding:17px 52px;font-weight:500;outline:none;transition:all .3s}.panel-body button:hover,.panel-body button:focus{background:#ff0088;outline:none}#generatelink{margin:20px auto 0 auto}#generatelink button{background:#ff0088;border-radius:5px;font-size:14px;padding:14px 32px}#generatelink button:hover,#generatelink button:focus{background:#ff0088;border-radius:5px;font-size:14px}#generatelink input{background:rgba(0,0,0,0.05);text-indent:0}#generatelink input:hover,#generatelink input:focus{background:#ff0088;border-color:transparent;box-shadow:none}#generateloading{margin:20px auto 0 auto;font-size:20px;color:#ff0088;font-weight:normal}
.panel-body:before{content:'\279C';background:rgba(0,0,0,0.05);position:absolute;left:0;top:0;color:#888;padding:17px 20px;border-radius:5px 0 0 5px;border-right:1px solid transparent;transition:all .6s}.panel-body:focus-within:before{content:'\279C';background:#ff0088;color:#fff}.bt-success{display:inline-flex;align-items:center;margin:15px 15px;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#ff0088;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}.bt-success:hover{color:#ff0088;background-color:transparent;border:1px solid #ff0088}.hidden,.bt-success.hidden{display:none}.wcSafeClose{display:inline-flex;align-items:center;margin:15px auto -15px;padding:5px 15px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#ff0088;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}.copytoclipboard{margin:10px auto 5px}
#timer{margin:0 auto 20px auto;width:80px;text-align:center}.pietimer{position:relative;font-size:200px;width:1em;height:1em}.pietimer > .percent{position:absolute;top:25px;left:12px;width:3.33em;font-size:18px;text-align:center;display:none}.pietimer > .slice{position:absolute;width:1em;height:1em;clip:rect(0px,1em,1em,0.5em)}.pietimer >.slice.gt50{clip:rect(auto,auto,auto,auto)}.pietimer > .slice > .pie{border:0.06em solid #c0c0c0;position:absolute;width:80px;height:80px;clip:rect(0em,0.5em,1em,0em);border-radius:50%}.pietimer > .slice > .pie.fill{-moz-transform:rotate(180deg)!important;-webkit-transform:rotate(180deg)!important;-o-transform:rotate(180deg)!important;transform:rotate(180deg)!important}.pietimer.fill > .percent{display:none}.pietimer.fill > .slice > .pie{border:transparent;background-color:#c0c0c0;width:1em;height:1em}
.wcSafeShow svg{fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1;width:22px;height:22px}
#generateloading svg{width:22px;height:22px;fill:#ff0088}
.btn-primary svg,.darkMode .btn-primary svg{fill:none;stroke:#fff;stroke-width:1.5;width:22px;height:22px;vertical-align:-5px;margin-right:10px}
@media screen and (max-width:768px){.panel-body .input-group-btn{display:block;position:relative;overflow:hidden;margin:20px auto 0 auto}.panel-body button{border-radius:5px;width:100%}}
@media screen and (max-width:480px){.panel-primary{margin-top:30%}}
.darkMode .panel-primary{background:#2d2d30;color:yellow;}
.darkMode .panel-body input,.darkMode .panel-body input:focus{background:#2d2d30;color:#fefefe}
.darkMode .wcSafeClose{color:yellow}
</style>
If you are using JetTheme, then for that you can put it above the close header and if you are doing something else then you will have to find the class and put it there.
3. Now To generate link by clicking on safelink button ๐ก️ place it above your </header> tag
<div class='wcSafeShow'><svg viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'></path><polyline points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'></polyline></g></svg></div>
4. Then these are the two buttons that will appear at the top and bottom of the post, so at the top of <data:post.body/> paste this code:
<div id='timer'/> <div style='text-align: center'> <button class='bt-success hidden' disabled='' id='wcGetLink'> Get Link </button> </div>
And just below <data:post.body/> put this code:
<div style='text-align: center'> <button class='bt-success hidden' disabled='' id='gotolink'> Go to Link </button> </div>
5. Then paste this url generator box code above the </footer> to generate shortlink:
<div class='safeWrap hidden'> <div class='panel-primary'> <div class='panel-heading'> <h2>Generate Link</h2> </div> <div class='panel-body'> <input autocomplete='off' id='generateurl' oninvalid='this.setCustomValidity('Please Enter valid link')' placeholder='Enter your link here...' required='required' type='url'/> <span class='input-group-btn'> <button class='btn-primary' id='btngenerate' oninvalid='this.setCustomValidity('Please Enter valid link')' required='required' type='button'> <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18.865 5.1238C19.302 5.2768 19.594 5.6888 19.594 6.1518V12.9248C19.594 14.8178 18.906 16.6248 17.691 18.0248C17.08 18.7298 16.307 19.2788 15.486 19.7228L11.928 21.6448L8.364 19.7218C7.542 19.2778 6.768 18.7298 6.156 18.0238C4.94 16.6238 4.25 14.8158 4.25 12.9208V6.1518C4.25 5.6888 4.542 5.2768 4.979 5.1238L11.561 2.8108C11.795 2.7288 12.05 2.7288 12.283 2.8108L18.865 5.1238Z'/><path class='svg-c' d='M9.32251 11.9177L11.2145 13.8107L15.1125 9.91269'/></svg>Generate</button></span> <div class='hidden' id='generateloading'> <svg viewBox='0 0 50 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg></div> <div class='hidden' id='generatelink'> <input id='resulturl' onclick='this.focus();this.select()' readonly='readonly' type='text'/> <button class='copytoclipboard' data-clipboard-action='copy' data-clipboard-target='#resulturl' id='copytoclipboard'>Copy URL</button></div></div> <a class='wcSafeClose' href='javascript:void'>Close</a> </div></div>
Now the last js is to be placed above </body> tag and safelink timer time can be increased more or less than 10 seconds:
<script>
//<![CDATA[
var setTimer = 10;
var setColor = '#ff0088'; //colour of loading timer
var setText = 'Please wait...';
var setCopyUrl = 'Copy URL';
var setCopied = 'Copied URL';
function safeLDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/choipanwendy/safelink-v1.1@main/wcsafelink.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",safeLDefer,!1):window.attachEvent?window.attachEvent("onload",safeLDefer):window.onload=safeLDefer;
//]]>
</script>
Download whole safelink genretor code file
Conclusion
And in this way you can create safelink in any of your blogger template. If you liked the post then don't forget to share it with your blogger friends.
instalation vidoes guide
Last word
In this post we will provided information about how to add safelink in any blogger template, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
Thanks for this.Its work.
But i want to change the pink colour.How can i change the colour?
all colour are one hex value you can replace #ff008 to white pink yellow black red or any other hex value like #222 for dark black