membuat safelink di blog utama dengan random post + generator di semua template blog

 Hay gays , jumpa dan lagi bersama saya. Kali ini saya akan membuat sebuah safelink blog yang bisa di gunakan pada semua template blog kalian. Karena memang banyak sekali template blog di luaran sana yang mungkin bagus, namun tidak ada fiture safelink di dalam nya. Oleh karena itu kali ini saya akan membahas tentang cara membuat safelink di blog utama dengan random post + generator di semua template blog.


Mungkin bagi yang sudah pernah pasang template safelink akan mengira bahwa ini adalah template, oh tentu tidak kawan ini bukan template, namun sebuah kode. Jadi kalian bisa memasang kode ini di semua template entah itu berbayar atau bahkan gratisan semua bisa di pasang safelink semacam ini. 

Bisa juga nih di jadikan sebagai penghasilan, apalagi kalian tau sendiri lah penghasilan dari blog safelink itu 2x lipat lebih banyak dari blog biasa. 



Source code ini saya dapet dari bang wendycode , dan beliau mengatakan bahwa kode ini lebih aman di banding code safelink pada umumnya, bahkan premium sekalipun, kenapa bisa? Hehe untuk jawabannya sendiri saya kurang tau, yang jelas template premium lebih rawan kena teguran google.

membuat safelink di blog utama dengan random post + generator di semua template blog


Pertama yang harus kalian perlukan adalah blog , terserah mau pake template apa, template default bawaan blogger pun bisa.

Langkah selanjutnya adalah, masuk ke dalam tema, dan klik menu edit HTML.
Salin kode ini:

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

dan letakan di atas code

</head>&lt;!--</head>--&gt;&lt;/head&gt;

Jika sudah lanjut dengan menyalin code css ini dan letahkan di atas </style> atau ]]></b:skin>

/* CSS Safelink ubah warna cari kode #f89000 */
.wcSafeShow{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}.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:#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}
.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:#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 sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .panel-primary{background:#2d2d30;color:#fefefe}
.darkMode .panel-body input,.darkMode .panel-body input:focus{background:#2d2d30;color:#fefefe}
.darkMode .wcSafeClose{color:#fefefe}


Jika sudah, sekarang tinggal proses pemasangan atau peletakan icon safelink yang nantinya akan di jadikan sebagai tombol yang akan menampilkan generator safelink nya.

Salin kode ini


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

Dan letakan di mana saja, bisa di header, footer atau menu.

Jika sudah, selanjutnya tinggal membuat tombol timer dan get link.
Pertama , cari code <data:post.body/> jika di dalam template kamu ada lebih dari 1 kode, maka pilih saja yang paling akhir.

Jika sudah ketemu, langsung saja masukan script ini tepat di atas dan di bawah code <data:post.body/>

<!-- letakkan di atas kode <data:post.body/> -->
<div id='timer'/> <div style='text-align: center'> <button class='bt-success hidden' disabled='' id='wcGetLink'> Get Link </button> </div>

<!-- letakkan di bawah kode <data:post.body/> -->

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

Nah sampai sini tutorial nya sudah hampir selesai, karena semua segmen sudah terpasang dan sudah bisa di gunakan, namun masih ada 1 lagi proses terakhir, yaitu pemasangan generator nya.

Untuk cara memasangnya kalian bisa salin kode di bawah ini

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

Dan masukan code itu tepat di atas code </footer> atau </body> ,sebenarnya di mana saja bebas ya! Tapi karena agar lebih rapi dan nyaman di gunakan, alangkah baiknya di taruh di bagian bawah saja. Nah mungkin cuma segitu saja yang bisa saya bagikan, jika ada kekurangan atau salah penuturan , silahkan komentar saja.

Next Post Previous Post
No Comment
Add Comment
comment url