Ucapan Terima Kasih Sehabis Klik Tombol Download
Siang ini aku menciptakan postingan untuk mencoba menjawab pertanyaan dari salah satu sahabat Kompi Ajaib perihal cara menciptakan ucapan terima kasih sesudah pengunjung klik tombol download di blog kita. Di sini aku mencoba menciptakan thanks box ini dengan memakai jquery sederhana dan memakai CSS sederhana biar gampang dipahami.
Pada kotak ucapan terima kasih ini juga aku tambahkan atau sertakan tombol share social media menyerupai Facebook, Twitter, dan Google Plus. Dan untuk tombol downloadnya aku memakai tombol 3D sederhana yang pernah aku share sebelumnya.
Untuk ilustrasi ucapan terima kasih sesudah klik tombol download dapat Anda lihat pada gambar gif di bawah ini.
Karena ini memakai jquery, pastikan blog Anda telah memakai jquery library (berapa pun versinya) menyerupai di bawah ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> Kemudian silahkan tambahkan javascript SDK FB di bawah ini dan simpan di bawah instruksi <body>, jikalau sudah ada silahkan lewati langkah ini.
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Kemudian tambahkan juga javascript untuk tombol Tweet dan G+ di bawah ini dan simpan di atas instruksi </body>, jikalau sudah ada silahkan lewati langkah ini.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Kemudian silahkan gunakan instruksi CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>
.download-box{
width:400px;
height:200px;
position:relative;
margin:0 auto;
padding:0;
}
.ButtonOK {
box-shadow: 3px 4px 0px 0px #1564ad;
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
background-color:#79bbff;
border-radius:5px;
border:1px solid #337bc4;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
font-weight:bold;
padding:12px 44px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
position:absolute;
top:33%;
left:33%;
}
.ButtonOK:hover {
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
}
.ButtonOK:active {
box-shadow: 1px 1px 0px 0px #1564ad;
position:relative;
top:33.5%;
left:33.5%;
}
.thanks-box{
position:absolute;
top:0;
left:0;
width:360px;
height:160px;
margin:0 auto;
padding:20px;
background:#fff;
border:1px solid #ddd;
color:#333;
font-size:14px;
text-align:center;
line-height: 1.6em;
box-shadow: 3px 3px 5px 0px #ddd;
display:none;
}
.thanks-link a{
font-size:16px;
font-weight:700;
color:red;
line-height: 3em;
}
.close-thanks{
position:absolute;
font-size:18px;
color:#333;
width:45px;
text-align:center;
top:0;
right:-12px;
padding:0;
cursor:pointer
}
.close-thanks:hover{
color:red;
}
.share-link{
margin:10px auto 0;
display:inline-block;
}
Dan gunakan instruksi HTML di bawah ini dalam postingan Anda.
<div class="download-box">
<div class="ButtonOK">button</div>
<div class="thanks-box">
Terima Kasih sudah mendownload di situs kami.<br/>
Untuk mendownload silahkan klik link di bawah ini:
<div class="thanks-link">
<a href="#" target="_blank" title="Ucapan Terima Kasih Setelah Klik Tombol Download">Link Download</a></div>
Jangan lupa bagikan ini:<br/>
<div class="share-link">
<div style='margin-right:20px;margin-top:-2px;float:left;'>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</div>
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
</div>
<div style='float:left;'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
</div>
<div class='close-thanks' title='Close'>✖</div>
</div>
</div>
Untuk menyimpan link download Anda, silahkan ganti instruksi # pada class thanks-link menyerupai instruksi HTML di bawah ini.
<div class="thanks-link">
<a href="#" target="_blank" title="Ucapan Terima Kasih Setelah Klik Tombol Download">Link Download</a></div>
Dan terakhir, silahkan simpan jquery-nya di bawah ini di atas instruksi </body>
<script type='text/javascript'>
$(function() {
$('.ButtonOK').click(function () {
$('.thanks-box').fadeIn()
});
$('.close-thanks').click(function() {
$('.thanks-box').slideUp()
});
});
</script>
Selesai... Selamat mencoba.
Sumber https://www.kompiajaib.com/
0 Response to "Ucapan Terima Kasih Sehabis Klik Tombol Download"
Posting Komentar