How to make a Random Posts Safelink on Main Blog | How to add Safelink on the main blog With Random Post Generator

So you are searching How to make a Random Posts Safelink on Main Blog. I have a the method to add Safelink on the main blog With Random Post Generator.

By using your own safelink, you dont have to be dependent on other shortening websites.

Benefits of adding This Safelink in a Blog

Maintenance of the bounce rate of the website.
Additional Income from the ad source.
Using Random Post as a safelink instead of using any single safelink page.
Easy to generate and use it anywhere
You can use the generated links outside of the websites also
Increase engagement of other posts of the website

What is a Safelink?

Safelink are the extended form the original links. Safelink are made to protect the original links from directly getting open.

Suppose you provided a link of the product in your website. User came to your website and opened the link and went back. This will affect the bounce rate of the article.

But instead of providing the original link directly you can provide the safelink. Then for getting the original link the user has to wait for sometime. For that time your ads on the website can load up and you will have a higher chance of making profits.

Making a Random Posts Safelink

Making a Random Posts Safelink is super easy. You just need to follow the simple steps carefully.

I have divided the process into 2 different parts.

Setting up the Safelink Functional Codes
In this, we will setting up the functionality of the safelink, that is how the safelink will work in the website. We will be using HTML, CSS, JavaScript and jQuery.
Creating the Safelink Generator Page
Here we will create a page from where you can generate the safelink of the original links.

Setting the Functional Codes

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Press CTRL + F and search of <data:post.body/>

Step 6: Paste the below code above the <data:post.body/>

<div id='timer'/>
<div style='text-align: center'>
<button class='bt-success hidden' disabled='' id='wcGetLink'>
Get Link
</button>
</div>

Step 7: Paste the below code below the <data:post.body/>

<div style='text-align: center;padding-top:20px;'>
<button class='bt-success hidden' disabled='' id='gotolink'>
Go to Link
</button>
</div>

Step 8: Press CTRL + F and search of ]]></b:skin> or </style>

Step 9: Paste the below given code above ]]></b:skin> or </style>

/* Safelink CSS by DracWound */
  
.wcSafeShow{position:relative;width:35px;height:35px;display:flex;margin:-5px -20px -18px}
.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:#f1f1f1;text-align:center;display:block;overflow:hidden;width:100%;max-width:100%;padding:0 0 25px 0;border-radius:5px;margin:5% 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:#204ecf;color:#fff;margin:0 auto 25px auto;font-weight:400;padding:15px;font-size:20px}
.panel-heading p{opacity:0}
.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:#204ecf;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:#204ecf;color:#fff;border:0;padding:17px 52px;font-weight:500;outline:none;transition:all .3s}
.panel-body button:hover,.panel-body button:focus{background:#204ecf;outline:none}
#generatelink{margin:20px auto 0 auto}
#generatelink button{background:3204ecf;border-radius:5px;font-size:14px;padding:14px 32px}
#generatelink button:hover,#generatelink button:focus{background:#204ecf;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:#204ecf;border-color:transparent;box-shadow:none}
#generateloading{margin:20px auto 0 auto;font-size:20px;color:#204ecf;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:#204ecf;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:#204ecf;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}
.bt-success:hover{color:#204ecf;background-color:transparent;border:1px solid #204ecf}
.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:#204ecf;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:1em;height:1em;clip:rect(0em,0.5em,1em,0em);border-radius:0.5em}
.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:#204ecf}
.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%}}
.drkM .panel-primary{background:#2d2d30;color:#fefefe}
.drkM .panel-body input,.drkM .panel-body input:focus{background:#2d2d30;color:#fefefe}
.drkM .wcSafeClose{color:#fefefe}

Step 10: Press CTRL + F and search of </head>

Step 11: Paste the JQuery script above </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Step 12: Press CTRL + F and search of </body>

Step 13: Paste the below given JavaScript code above </body>

<script>
//<![CDATA[
var setTimer = 10;
var setColor = '#204ecf';
var setText = 'Please wait...';
var setCopyUrl = 'Copy URL';
var setCopied = 'URL Copied';

// global script version 1.1 open source code
document.addEventListener ("DOMContentLoaded", globalscript);
function globalscript() {let script = document.createElement('script');script.defer = true;
script.src = "https://cdn.jsdelivr.net/gh/choipanwendy/safelink-v1.1@main/wcsafelink.js";
document.body.append(script);};
//]]> 
</script>

Change 10 with your desired time of the safelink

Change #204ecf with your desired theme color of the safelink

Step 14: Save the changes by clicking on this icon

Now your safelink functional coding is done. Now you have to create a page from where you will Generator your Links.

Creating the Safelink Generator Page

Step 15: Now come back to Theme and go to Pages.

Step 16: Create New Page.

Step 17: Switch to HTML View mode from Compose View

Step 18: Paste the below given code in the HTML View of the Page.

<div ><!--class='safeWrap '-->
<div class='panel-primary'>
<div class='panel-heading'>
<h2>Generate Link</h2>
  <p>Safelink by <a href='https://dracwoundhelps.blogspot.com' rel='dofollow' target='_blank'>DracWound Helps</a></p>
</div>
<div class='panel-body'>
<input autocomplete='off' id='generateurl' oninvalid='this.setCustomValidity(&apos;Please Enter valid link&apos;)' placeholder='Enter your link here...' required='required' type='url'/>
<span class='input-group-btn'>
<button class='btn-primary' id='btngenerate' oninvalid='this.setCustomValidity(&apos;Please Enter valid link&apos;)' 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>

Step 19: Publish the page and don't forget to complete the SEO tasks

Step 20: Your Safelink is ready to be used.

View the Safelink page. And check whether the safelink is working or not.

Points to Remember

Your website must have at least one article for the safelink to work.
You have to manually generate the external links and paste it in your articles as it does not automatically detects the external link of the website.
Carefully follow the steps as there is a chance that you might make mistakes in placing the codes.

Conclusion

This is all about adding the Random Posts Safelink on Main Blog. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

Search This Blog

DracWound Helps