Gia Huy

Trang chủ
Blogger

Trình tạo SafeLink với bài viết ngẫu nhiên trên Blogger

Tạo tool get link chuyển hướng liên kết ngoài trên Blogger
·

Xin chào các bạn, nhân dịp này mình sẽ chia sẻ cách tạo safelink trên blog chính bằng một bài viết + trình tạo ngẫu nhiên.

Khác với safelink mà tôi sẽ chia sẻ ở đây, safelink không tự động mã hóa tất cả các url trên blog của bạn nên bằng cách sử dụng một trình tạo thủ công và các bài viết tự động ngẫu nhiên.

Vì vậy bạn không cần tạo một trang hoặc bài đăng đặc biệt cho safelink, vì nó tự động ngẫu nhiên hóa tất cả các bài đăng trên blog của bạn.

Trình tạo SafeLink với bài viết ngẫu nhiên trên Blogger
Trình tạo SafeLink với bài viết ngẫu nhiên trên Blogger

Script này mình đã tối ưu để dễ chỉnh sửa và không gây gánh nặng cho blog vì mình đã nén và sử dụng defer js, cách cài đặt cũng khá dễ dàng, không phức tạp chỉ cần copy-paste đoạn mã html css là được. hoàn tất.

Tạo SafeLink với bài viết ngẫu nhiên

Chú ý
Trước khi bắt đầu, hãy đảm bảo rằng bạn đã sao lưu mẫu đề phòng có điều gì đó không mong muốn xảy ra.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Hãy kiểm tra mẫu của bạn đã được cài đặt jQuery, nếu bạn chưa có bạn có thể sao chép mã bên dưới và đặt nó phía trên mã </head> hoặc &lt;!--</head>--&gt;&lt;/head&gt;

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

Bước 6: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

/* CSS Safelink change color search code #9c27b0 */
.ghSafeShow{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:#9c27b0;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:#9c27b0;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:#9c27b0;color:#fff;border:0;padding:17px 52px;font-weight:500;outline:none;transition:all .3s}.panel-body button:hover,.panel-body button:focus{background:#9c27b0;outline:none}#generatelink{margin:20px auto 0 auto}#generatelink button{background:#9c27b0;border-radius:5px;font-size:14px;padding:14px 32px}#generatelink button:hover,#generatelink button:focus{background:#9c27b0;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:#9c27b0;border-color:transparent;box-shadow:none}#generateloading{margin:20px auto 0 auto;font-size:20px;color:#9c27b0;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:#9c27b0;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:#9c27b0;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em}.bt-success:hover{color:#9c27b0;background-color:transparent;border:1px solid #9c27b0}.hidden,.bt-success.hidden{display:none}.ghSafeClose{display:inline-flex;align-items:center;margin:15px auto -15px;padding:5px 15px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#9c27b0;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}
.ghSafeShow 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:#9c27b0}
.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 dark mode 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 .ghSafeClose{color:#fefefe}

Bước 7: Đặt mã biểu tượng safelink này ở nơi bạn muốn, bạn có thể nhóm nó trong phần tiêu đề biểu tượng.

Nếu bạn sử dụng mẫu Median UI, bạn có thể đặt nó sau mã <!--[ Profile button ]-->, bỏ qua mã </b:if> đầu tiên để không bị chèn thẻ trang chủ có điều kiện.

<div class='ghSafeShow'><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'/><polyline points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'/></g></svg></div>

Bước 8: Tiếp tục tìm mã <data:post.body/> thường có nhiều hơn 1 mã, tùy thuộc vào mẫu bạn đang sử dụng chỉ cần tìm mã trong bài đăng nhập hoặc bài viết Thử nếu bạn không biết chỉ cần thử 1 1 nếu sai vị trí, liên kết an toàn sẽ không chạy, nếu mẫu Median UI chỉ có 1 mã như vậy.

<!-- Đặt mã này phía trên mã <data:post.body/> -->
  <div id='timer'/>
<div style='text-align: center'>
  <button class='bt-success hidden' disabled='' id='ghGetLink'>
    Get Link
  </button>
</div>
                                    
<!-- Đặt mã này phía dưới mã <data:post.body/> -->
<div style='text-align: center'>
  <button class='bt-success hidden' disabled='' id='gotolink'>
    Go to Link
  </button>
</div>

Bước 9: Và hãy thêm html sau ngay bên trên vào thẻ footer, miễn sao ở bất kỳ đâu miễn là nó vẫn nằm trong thẻ body, theo tôi nên đặt nó phía trên footer để làm cho nó gọn gàng hơn.

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

Bước 10: Tiếp tục hãy thêm JavaScript sau ngay bên trên vào thẻ </body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

Bạn có thể chỉnh sửa phần mà tôi đã đánh dấu nếu cần hoặc bạn có thể để nguyên.

<script>
//<![CDATA[
/* SafeLink settings */
var setTimer = 10; // Seconds time
var setColor = '#9c27b0'; // Color loading timer
var setText = 'Please wait...'; // Message on button
var setCopyUrl = 'Copy URL'; // Copy generator
var setCopied = 'Copied URL'; // Copied generator

function safeLDefer(){var d=document.createElement("script");d.src="https://cdn.giahuy.net/widget/ghSafeLink.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",safeLDefer,!1):window.attachEvent?window.attachEvent("onload",safeLDefer):window.onload=safeLDefer;
//]]> 
</script>

Trên đây là hướng dẫn trình tạo SafeLink với bài viết ngẫu nhiên trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Copyright © www.wendycode.com

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.