How to Create Organic Safelink for Blogger & WordPress
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.
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.
Your website must be indexed on Google or it will not work.
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.