Ucapan Terima Kasih Setelah Klik Tombol Download

Ucapan Terima Kasih Setelah Klik Tombol Download

Bola Hero Gawai

Ucapan Terima Kasih Setelah Klik Tombol Download

Siang ini saya membuat postingan untuk mencoba menjawab pertanyaan dari salah satu sahabat Kompi Ajaib 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.

Ucapan Terima Kasih Setelah Klik Tombol Download

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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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'>&#10006;</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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

47 Comments Add Comment

Kalau klik tombol sosial muncul ucapan terimakasih bagus juga ya?

Balas

Mungkin bisa juga mas :) coba dimodif aja :)

Balas

makin cakep aja mas :-d

Balas

ternyata kodenya tidak terlalu rumit ..cocok banget nih sama harapan ane :-bd ,,,,
=D makasih kang...

Balas

Menarik yah Kang Adhy, jadi kesanya jika hendak mendownload
Di wajibkan mengklik, like tombol sosial dulu baru muncul link
Downloadnya, tapi lumayan juga script nya cukup banyak :)

Balas

ijin copy mas, sapa tau saya membutuhkannya

Balas

panjaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaang ya mas @@,

Balas

sangat berarti ya kang buat blog yang menyediakan download, dan jelas tampak cantik :)

Balas

Hehehe iya kang :)

Balas

Makasih mas :)

Balas

iya mas syukur kalau cocok :)
Sama-sama mas :)

Balas

Silahkan mas :)

Balas

Di sini enggak diwajibkan juga sih kang soalnya link downloadnya juga enggak disembunyikan. Cuman sebagai alternatif lain untuk tombol download.

Balas

Silahkan mas :)

Balas

kreaktif benar mas, ada2 aja idenya :)

Balas

iya lumayan sih mas tapi sebenarnya jika kode CSSnya dikompress akan kelihatan sedikit, itu karena css nya disusun ke bawah.

Balas

Iya mas sebagai alternatif lain untuk tombol download :)

Balas

untuk tombol yang lainnya bisa juga ya mas
misalnya untuk tombol/ikon somsed

Balas

Hehehehe iya sis :) itu semua berkat sahabat-sahabat KA juga :)

Balas

Bisa juga mas, tinggal dimodif dan kreatif :)

Balas

kang, nih saya mau nanya. Saya kan pake template kompi males, tapi setelah edit-edit kok jadi kesamping gini ya?
http://s13.postimg.org/saxjh4ron/error.png
tolong dong kang. Maaf OOT :D

Balas

Widih keren kang atuh pake efek toggle, seperti pada artikel ini ya kang.
http://www.kompiajaib.com/2013/12/membuat-dialog-box-dengan-penambahan.html
http://www.kompiajaib.com/2013/12/beberapa-jenis-efek-toggle-dengan-jquery.html

Balas

oiya bagaimana dengan pertanyaan saya di OOT itu ya Mas ? Terimakasih atas jawabannya Mas Adhy

Balas

ada bagian dalam yang hilang sepertinya. saya juga pakai template kompi males

Balas

kayak nya mantap nih :)

Balas

Keren Kang, boleh juga nich di coba... kebetulan blog saya juga sering share download. tapi kalo di smartphone gmana Kang normal apa ngagak?

Balas

harus diamankan dulu ini kang besar kemungkinan akan saya coba di blog baru saya
terima kasih tutorialnya kang Adhy

Balas

Atuh mantap ini mah kang ... kalau kreatif segala sesuatu juga bisa menarik

Balas

Betul mas sepertinya ada kode yang kehapus.

Balas

Betul kang :) saya menggunakan dari tutorial yang telah ada agar mudah dipelajari :)

Balas

Silahkan dicoba mas :)

Balas

Thanks Mr. Akat Suki :)

Balas

Sudah saya coba pake Evercoss A7s kang, trik ini berjalan normal :)

Balas

Sama-sama kang :) silhkan dicoba :)

Balas

Betul kang :) intinya harus kreatif :)

Balas

gan. ane pernah donlod suatu file. tapi sebelum dikasih linknya, harus post di facebook / tweet di facebook. itu gimana caranya gan?

Balas

maksud ane tweet di twitter :v

Balas

Itu sudah dishare oleh kang Ismet :) coba cari di kang Ismet mas :)

Balas

saya ingat-ingat dulu mas adhy supaya besok jika memerlukan saya tinggal search di blog mas adhy

Balas

ini maksudnya biar loadingnya lebih cepat dan simple ya
Soalnya trik ini sudah ada :-d

Balas

Silahkan mas :)

Balas

Maksudnya loading apa ya mas?
Ini hanya alternatif lain cara membuat tombol download dengan disertai ucapan terima kasih :)

Balas

keren, bisa saya coba neh di blog... :) ma kasih tutorialnya bang Kompi...! :)

Balas

Mantep Ijin Nyoba Kang . .

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×