Siang ini saya membuat postingan untuk mencoba menjawab pertanyaan dari mas Yusuf Habibillah tentang cara membuat ucapan terima kasih setelah pengunjung klik tombol download di blog kita. Di sini saya mencoba membuat thanks box ini dengan menggunakan jquery sederhana dan menggunakan CSS sederhana agar mudah dipahami.
Pada kotak ucapan terima kasih ini juga saya tambahkan atau sertakan tombol share social media seperti Facebook, Twitter, dan Google Plus. Dan untuk tombol downloadnya saya menggunakan tombol 3D sederhana yang pernah saya share sebelumnya.
Untuk ilustrasi ucapan terima kasih setelah klik tombol download bisa Anda lihat pada gambar gif di bawah ini.
Karena ini menggunakan jquery, pastikan blog Anda telah menggunakan jquery library (berapa pun versinya) seperti 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 kode <body>, jika 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 kode </body>, jika sudah ada silahkan lewati langkah ini.
Javascript Twitter
<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>
Javascript G+
<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 kode 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 kode 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="Link 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 kode # pada class thanks-link seperti kode HTML di bawah ini.
<div class="thanks-link">
<a href="#" target="_blank" title="Link Download">Link Download</a></div>
Dan terakhir, silahkan simpan jquery-nya di bawah ini di atas kode </body>
<script type='text/javascript'>
$(function() {
$('.ButtonOK').click(function () {
$('.thanks-box').fadeIn()
});
$('.close-thanks').click(function() {
$('.thanks-box').slideUp()
});
});</script>
Selesai... Selamat mencoba.