Cara Membuat Tombol Share untuk Membuka Link Download

Cara membuat tombol share to unlock link download - Hai sahabat risalahku.com kali ini saya akan berbagi sedikit pengalaman bagaimana langkah membuat tombol share artikel dulu sebelum mendapatkan link download. Kira-kira contohnya seperti ini:

Sebagai orang yang aktif di internet, tentu kamu pernah menemukan link download yang terkunci atau disembunyikan, kita baru bisa melihat dan mendapatkan link setelah membagikan artikelnya. Lalu bagaimana cara membuatnya?

Sebagai seorang blogger yang cukup sering membagikan link download file, saya juga tertarik dengan adanya tombol ini maka secara tidak langsung mereka akan membantu memperkenalkan artikel / situs saya. Adanya cara seperti ini maka keduanya sama-sama diuntungkan, yaitu mereka mendapat file apa yang mereka cari dan situs saya juga semakin sering dibagikan melalui media sosial.

Dropbox
GDrive
*Jika link mati / tidak dapat diakses silahkan lapor via kontak yang tersedia

LINK DOWNLOAD TERKUNCI.
Silahkan SHARE untuk membuka kunci!

FacebookTwitterWhatsapp

Berikut Langkah Membuat Tombol Share Membuka Link Download

Supaya lebih mudah memahami langkah membuat tombol share untuk membuka link download, silahkan langsung mempraktikkan langkah demi langkah di bawah ini:

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. Tambahkan Framework jQuery sebelum kode </head>

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

Jika pada template anda sudah ada jQuery di atas berapapun versinya maka tidak usah menambahkannya.

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>

Script di atas merupakan kode pemanggil untuk menampilkan atau menyembunyikan popup setelah tombol share di klik. Tanpa kode ini maka fungsi membuka link download tidak akan berfungsi.

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:#607D8B;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 solid #3F51B5;background:#FF9800;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}
.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:#01E675;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)}

Kode CSS di atas adalah kode untuk memperindah tampilan tombol share, mulai dari lebar, warna, serta efek tombol share. Kamu bisa mengedit dan menyesuaikan sesuai selera.

4. Gunakan HTML ini di dalam postingan

<div class="secret"><a class="btn" href="https://rebrand.ly/" rel="nofollow noopener" target="_blank">Dropbox</a><br>
<a class="btn" href="https://rebrand.ly/" 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 TERKUNCI.</b><br>
Silahkan SHARE untuk membuka kunci!<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="Whatsapp Unlock" href="javascript:gplusPage()" rel="nofollow noopener" title="Share to Unlock | Whatsapp">Whatsapp</a></div></div>

Jika pada template anda sudah ada jQuery di atas berapapun versinya maka tidak usah menambahkannya. Kode HTML di atas merupakan kode pemanggil seluruh kode-kode yang sudah dipasang pada template sebelumnya. Pastikan pada saat membuat postingan, kode HTML ini diletakkan pada menu HTML bukan di Compose. Ganti https://rebrand.ly/ dengan link download yang ingin dibagikan.

Lihat juga:

• Cara Membuat Banyak Blockquote Keren Di Dalam Satu Postingan
• Kumpulan Blockquote Tampilan Keren Terbaru Dan Cara Membuatnya
• Cara Membuat Widget Melayang Pada Sidebar Blog

Demo Tampilan Tombol Share untuk Membuka Link Download

Jika seluruh kode-kode di atas sudah terpasang dengan benar, maka kurang lebih tampilannya akan tampak seperti gambar di bawah ini:

Setelah salah satu tombol share media sosial tersebut di klik, maka link download akan terbuka dan tampil seperti gambar di bawah ini:

Demikian tentang Cara Membuat Tombol Share untuk Membuka Link Download di blogger yang bisa saya bagikan. Kamu bisa lebih mempercantik tampilan sesuai keinginan. Mohon maaf jika ada yang salah dan semoga bermanfaat. Amin....