How to make a Random Posts Safelink on Main Blog + generator

How to make a Random Posts Safelink on Main Blog + generator

Hello to everyone, on this occasion I will share how to create a safelink on the main blog with a random post + generator

most of the safelink tutorials on the main blogs circulating on the internet encrypt all the urls on the blog so that every time you move pages you have to go through safelink first.

I think safelink like that is too much, yes, visitors have to go through safelink every time they switch pages, maybe people will be lazy to visit our blog again.

While the circulating safelink template, whether it's a free or paid version, I think there are still shortcomings, because it can be affected by invalid traffic from Google Adsense.

different from safelink which I will share here, safelink does not automatically encrypt all urls on your blog so manually using a generator and automatically random posts .

so you don't need to create a special page or post for safelink, because it automatically randomizes all posts on your blog.

here I disclaim first this script is not 100% made by me, this script is the result of my modification from the inspection source https://safesmart-url.blogspot.com I don't know who the original author is, because many of these templates share it and change the designer's name.

I have optimized this script so that it is easy to edit and does not burden the blog because I have compressed it and used defer js, and the installation method is also quite easy, not complicated, just need to copy-paste the css html javascript is complete.

for the demo, you can click the safelink icon above the header of this blog, and I'm also not sure whether to continue installing it because this blog is not a download blog, ok for those of you who want to try it, let's see how below.

DEMO Url DEMO Generator

Creating Safelinks on the Main Blog Random Post + Generator

a note
before starting it would be nice to back up your template first to avoid things that you don't want.

make sure your template has jQuery installed, if you don't already have one, you can copy the code below and place it above the code </head> or <!--</head>--></head>

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

further copy the css below and place it above the code ]]></b:skin>

/* CSS Safelink change color look for code #f89000 */
  .bgSafeShow{position:relative;width:35px;height:35px;display:flex;margin:auto} /* atur margin untuk mengubah posisi icon */
  .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:#f89000;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:#f89000;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:#f89000;color:#fff;border:0;padding:17px 52px;font-weight:500;outline:none;transition:all .3s}.panel-body button:hover,.panel-body button:focus{background:#f89000;outline:none}#generatelink{margin:20px auto 0 auto}#generatelink button{background:#f89000;border-radius:5px;font-size:14px;padding:14px 32px}#generatelink button:hover,#generatelink button:focus{background:#f89000;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:#f89000;border-color:transparent;box-shadow:none}#generateloading{margin:20px auto 0 auto;font-size:20px;color:#f89000;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:#f89000;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:#f89000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}.bt-success:hover{color:#f89000;background-color:transparent;border:1px solid #f89000}.hidden,.bt-success.hidden{display:none}.bgSafeClose{display:inline-flex;align-items:center;margin:15px auto -15px;padding:5px 15px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#f89000;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}
  .bgSafeShow 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:#f89000}
  .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%}}
    
  /* CSS darkmode adjust the class if different or delete this section */
  .darkMode .panel-primary{background:#2d2d30;color:#fefefe}
  .darkMode .panel-body input,.darkMode .panel-body input:focus{background:#2d2d30;color:#fefefe}
  .darkMode .bgSafeClose{color:#fefefe}

and put this safelink icon code where you want, you can group it in the icon header section.

if you use the median-ui v1.5 template, you can put it after the <!--[ Profile button ]--> code, skip the first </b:if> code so that it doesn't get pinched by the conditional homepage tag.

<div class='bgSafeShow'><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>

continue looking for the code <data:post.body/> usually there are more than 1 code, depending on the template you are using just look for the one in post-entry or postEntry if you don't know just try 1 1 if in the wrong place the safelink won't run, if median-ui template there is only 1 such code.

If you have found it please follow the instructions below

  <!-- put it above the code <data:post.body/> -->
  
  <div id='timer'/>
  <div style='text-align: center'>
  <button class='bt-success hidden' disabled='' id='bgGetLink'>
  Get Link
  </button>
  </div>
  
  <!-- put below code <data:post.body/> -->
  
  <div style='text-align: center'>
  <button class='bt-success hidden' disabled='' id='gotolink'>
  Go to Link
  </button>
  </div>

then put the code below above the footer code , it's actually free anywhere as long as it's still in the body tag, I personally prefer to put it above the footer to make it neater.

<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(&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='bgSafeClose' href='javascript:void'>Close</a>
  </div></div>

and finally copy the javascript below and place it above the code </body> or <!--</body>--></body> if you have don't forget to click save.

You can edit the part that I marked as needed or you can leave it alone.

<script>
  //<![CDATA[
  /* Arrangement safeLink */
  var setTimer = 10; //seconds time
  var setColor = '#f89000'; //color loading timer
  var setText = 'Please wait...'; //message on button
  var setCopyUrl = 'Copy URL'; // copy generator
  var setCopied = 'URL Copied'; //copy generator
  
  // global script version 1.1 open source code
  function safeLDefer(){var d=document.createElement("script");d.src="https://raw.githack.com/IRFANSHAHMARWAT/blogger-store-safelink/main/bgsafelink.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",safeLDefer,!1):window.attachEvent?window.attachEvent("onload",safeLDefer):window.onload=safeLDefer;
  //]]> 
  </script>

ok so that 's how to make a safelink on the main blog with a random post + generator, hopefully it's useful and thank you for visiting.

Thanks for reading: How to make a Random Posts Safelink on Main Blog + generator, Sorry, my English is bad:)