Membuat Sosial Locker di Blogger

Selamat siang sahabar blogger, nah pada kesempatan ini saya akan berbagi tips bagaimana cara membuat social locker di Blogger. Fungsi social locker ini adalah untuk mengnuci link download. intinya link download tersebut tidak akan muncul kalau kita tidak share artikel tersebut ke social media kiat. tentunya social locker ini merupakan salah satu plugin dari wordpress namun kita akan membuatnya di blogger. ok lanjut nah silahkan ikuti langkah langkah di bawah ya

Silahkan terlebih dahulu masuk ke menu tema pada dasbor blogger kemudian pilih edit html. Lalu langkah selanjutnya yakni memasang kode-kode seperti yang ada di bawah. Untuk mempermudah pencarian kodenya, silahkan gunakan tombol Ctrl+F.

1. Jika belum terpasang JQuery silahkan pasang dulu script berikut dan letakan sebelum kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2. Copy paste script di bawah ini sebelum </body>

<script>//<![CDATA[
var debounce_timer;window.onscroll=function(){debounce_timer&&window.clearTimeout(debounce_timer);debounce_timer=window.setTimeout(function(){600<document.body.scrollTop||600<document.documentElement.scrollTop?(document.getElementById("bta").style.display="block",document.getElementById("shareleft").style.display="block"):(document.getElementById("bta").style.display="none",document.getElementById("shareleft").style.display="none")},100)};
// MenuSearch
function toggleSb(){var t=document.getElementById("search_box");t.classList.toggle("active")};function toggleMn(){var t=document.getElementById("mainnav");t.classList.toggle("mnactive")};function hideinfo(){document.getElementById("infoku-wrap").style.display="none"};
// ShareLeft
function efbePage(){window.open("https://www.facebook.com/sharer.php?u="+siteurl+"%3Futm_source=facebook%26utm_medium=social%26utm_campaign=sharedpost"+"&display=popup","","menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600"),showhidelock()}function twitPage(){window.open("https://twitter.com/intent/tweet?url="+siteurl+"%3Futm_source=twitter%26utm_medium=social%26utm_campaign=sharedpost"+"&text="+encodeURIComponent(document.title)+"&via=kelasexcel","","menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600"),showhidelock()}function gplusPage(){window.open("https://wa.me/?text="+encodeURIComponent(document.title)+" - "+siteurl+"%3Futm_source=whatsapp%26utm_medium=social%26utm_campaign=sharedpost","","menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600"),showhidelock()}function showhidelock(){document.getElementsByClassName("secret").length>0&&(document.getElementsByClassName("secret")[0].style.display="block",document.getElementsByClassName("secret-share")[0].style.display="none")}var siteurl=document.querySelector("link[rel='canonical']").href;
!function(){document.getElementsByClassName||(document.getElementsByClassName=function(e){for(var t,n=document.getElementsByTagName("a"),a=[],r=0;t=n[r++];)t.className==e&&(a[a.length]=t);return a});var e=document.getElementsByClassName("dmca-badge");if(e[0].getAttribute("href").indexOf("refurl")<0)for(var t=0;t<e.length;t++){var n=e[t];n.href=n.href+(-1===n.href.indexOf("?")?"?":"&")+"refurl="+document.location}}();
!function(e,n){var t,o,a,i,r,d,c="getSelection",l="removeAllRanges",s="addRange",f="parentNode",g="appendChild",m="test";e[c]&&n.addEventListener("copy",function(p){for(o=p.target;3===o.nodeType;)o=o[f];if(i=n.createElement("div"),(t=e[c]())&&t.rangeCount&&(t=t.getRangeAt(0))&&(a=t.cloneRange(),t=t.cloneContents())){for(;r=t.firstChild;)i[g](r);if(!/^(pre|code)$/i[m](o.nodeName||"")&&!/(^|s)no-attribution(s|$)/i[m](o.className||"")){var u=e.location.href;i.innerHTML+='<br><br>&copy; Kelas Excel | <a href="'+u+'">'+u+"</a>"}d=n.createRange(),n.body[g](i),d.selectNodeContents(i),(t=e[c]())[l](),t[s](d),setTimeout(function(){i[f].removeChild(i),t[l](),t[s](a)})}},!1)}(window,document);
//]]></script>

3. Tambahkan CSS tombol share sebelum kode ]]></b:skin> atau </style>

/* Share Lock */
.secret{padding:10px 0;background:#263238;line-height:normal;display:none}.secret::before{content:"**DOWNLOAD LINK**";display:block;background:#8762de;margin-bottom:1em}
.btn,.secret{text-align:center;color:#fff}
.btn{background:#ff416c;background:linear-gradient(30deg,#ff416c,#ff4b2b);display:block;max-width:140px;margin:5px auto;padding:8px 12px;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}a.btn{color:#FFEB3B;border:none;margin-bottom:-1em}a.btn:hover{color:#fff}a.btn::after{display:none!important}.btn:active,.btn:hover{background:#2196F3;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}
.secret-share{padding:20px;line-height:normal;text-align:center;border:4px ;background:transparent;}
.sharelock{display:flex;justify-content:center;margin-top:1em}
.sharelock a.fb,.sharelock a.gp,.sharelock a.tw{flex-basis:100px;margin:2px;color:#fff;border:none;padding:6px 12px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:all .3s}.sharelock a.fb{background:#516ca4;order:1}
.sharelock a.tw{background:#00baff;order:2}
.sharelock a.gp{background:#e60101;order:3}
.sharelock a.fb:hover,.sharelock a.gp:hover,
.sharelock a.tw:hover{background:#263238;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}
.sharelock a.fb:active,.sharelock a.gp:active,.sharelock a.tw:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}

4. Masukan kode HTML dibawah dalam postingan anda

<div class="secret"><a class="btn" href="https://www.blogscpot.com" rel="nofollow noopener" target="_blank">Dropbox</a><br>
<a class="btn" href="https://www.blogscpot.com/" rel="nofollow noopener" target="_blank">GDrive</a><br>
<br>
<i>*Jika link mati / tidak dapat diakses silahkan lapor via kontak yang tersedia</i></div><div class="secret-share"><b>LINK DOWNLOAD LOCKED.</b><br>
<i class='fa fa-lock' aria-hidden='true'></i>Please share to unlock files! 
<br>
<div class="sharelock"><a class="fb social-popup" data-sharetype="Facebook Unlock" href="javascript:efbePage()" rel="nofollow noopener" title="Share to Unlock | Facebook">Facebook</a><a class="tw social-popup" data-sharetype="Twitter Unlock" href="javascript:twitPage()" rel="nofollow noopener" title="Share to Unlock | Twitter">Twitter</a><a class="gp social-popup" data-sharetype="Google Unlock" href="javascript:gplusPage()" rel="nofollow noopener" title="Share to Unlock | googleplus">Google +</a></div></div>

Silahkan ganti https://www.blogscpot.com/ dengan link download anda, Pastikan pada saat membuat postingan, kode HTML ini diletakkan pada menu HTML bukan di Compose nah untuk previewnya silahkan cek di bawah :

See the Pen
Social Lock by Sheni Kirana (@sheni4)
on CodePen.

Nha kawan semoag tutorial ini bermanfaat terimakasih!

Admin

Berbagi tips tentang dunia Blogger

Facebook

WhatsApp

Instagram

Bagikan Artikel ini

Related Posts