How to Create Organic Safelink for Blogger & WordPress

Tasin
13 Aug, 2024

 In the digital age, securing your website's links is more important than ever. Whether you're using Blogger or WordPress, creating an organic Safelink can help protect your content, enhance your site's security, and improve your SEO performance. 

Create Organic Safelink for Blogger & WordPress


This guide will walk you through the step-by-step process of setting up an organic Safelink for both platforms, ensuring that your website remains safe and your links are optimized for search engines. Whether you're a beginner or a seasoned webmaster, this comprehensive tutorial will provide the insights you need to get started.

How to install Safelink

Simply follow the instructions below to install Safelink on your website. 

Video Tutorial Related to This Topic

If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.

Step 1: Log in to your Blogger Dashboard and go to Theme > Customize > Edit HTML.

Step 2: Now press Ctrl + F and search for the </body> tag. Then copy the following code and paste it before the </body> tag inside your template. And replace the marked part with your domain. 

<script>/*<![CDATA[*/
const config = {
postsArray: ['post1.html', 'post2.html', 'post3.html'], 
googleRedirectURL: 'https://www.google.com/search?q=site:YourWebsite.com', 
countdownSeconds: 30, //set timer
};
/*]]>*/</script>

<script src='https://cdn.jsdelivr.net/gh/7AS1N/safelink/script.min.js'/>

Step 3: Now again search for <data:post.body/> tag. There could be more than one of this code, so you have to find the right one. Otherwise, it will not work.

Step 4: Paste the following code before the <data:post.body/> code. 

<div id="countdown" style="display: none;">
  <div class='safelink-countdown'></div>
  <div class="sky-note">
    <div class='safelink-header'>
      <p class='pcustom' align='center'>Scroll Down and click on <span class='pscustom'>Continue</span> button for destination </p>
    </div>
    <div align='center' class='safelink-footer'>
      <div class="aScrD">
        <svg class="counterline" viewBox="0 0 24 24">
          <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
          <polyline points="23 3 12 14 9 11"></polyline>
        </svg>Congrats! Link is Generated
      </div>
    </div>
  </div>
</div>

Step 5: Paste the following code after the <data:post.body/> code. Replace the marked part with your website name. 

<div id="continueButtonMessage" style="display: none;flex-direction: column;align-items: center;" class="sky-note">
  <p class='pcustom' style="font-size: 1.3em;margin-bottom: -10px !important;" align='center'>Clicking on the <span class='pscustom'>Continue</span> button will redirect you to the Google search page. Click our site, <span class='pscustom'>Site_Name_Here</span>, from the first search result to get your link. </p>
  <button class="bubbly-button" id="continueButton" style="display: none;">Continue</button>
</div>

Step 6: Now search for the <body> tag and paste the following code after it. 

<div id="countdown2" style="display: none;">
  <div class='safelink-countdown'></div>
  <div class="sky-note">
    <div class='safelink-header'>
      <p class='pcustom' align='center'>Scroll Down and click on <span class='pscustom'>Go to Link</span> button for destination </p>
    </div>
    <div align='center' class='safelink-footer'>
      <div class="aScrD">
        <svg class="counterline" viewBox="0 0 24 24">
          <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
          <polyline points="23 3 12 14 9 11"></polyline>
        </svg>Congrats! Link is Generated
      </div>
    </div>
  </div>
</div>

Step 7: Copy and paste the following code before the </body> tag. 

<div align='center'>
  <button class="bubbly-button" id="continueButton2" style="display: none;">Go to Link</button>
</div>

How to add Safelink to your post

Just add the below code inside your post and it will work as a Safelink. Remember to replace target_url_here with your actual download link or destination link. 

<a href="#" data-url="target_url_here" class="redirectLink">DOWNLOAD</a>

How to convert the Safelink URL to a button

If you want to convert the Safelink to a button then follow the steps below.

Step 1: If your template default button class then you can just add the name of this class inside the class="redirectLink"

If you are using Plus UI template then just add button to this class so that it looks like class="redirectLink button"

If you are using Jettheme then it should looks like class="redirectLink btn jt-btn-primary mb-2 me-2"

Step 2: You can also use a Custom button. For that again go to Theme > Customize > Edit HTML and search for the ]]></b:skin> tag and paste the following code before it. And the add the dl-button inside the class so that it looks like class="redirectLink dl-button" 

.dl-button {
	font-family: Helvetica,Arial,sans-serif;
	display: inline-block;
	font-size: 1em;
	padding: 1em 2em;
	margin-top: 30px;
	-webkit-appearance: none;
	appearance: none;
	background-color: #0d6efd;
	color: #fff;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	position: relative
}

If you need any help then feel free to join our Telegram group.

Conclusion

Creating an organic Safelink for your Blogger or WordPress website is a crucial step in safeguarding your content and optimizing your site's performance. By following the steps outlined in this guide, you can ensure that your links are secure, your users' experience is enhanced, and your SEO rankings improve.

If you have any questions or need further assistance, feel free to reach out or join our community for more tips and support.

Previous Post
No Comment
Add Comment
comment url