May 31, 2017

Membuat Notifikasi Terima Kasih Setelah Download

notifikasi download

Postingan ini adalah lanjutan dari sebelumnya yaitu Membuat Tombol Demo dan Download Di Dalam Postingan Blog disitu dibahas bagaimana membuat tombol Demo dan Download bagi yang mempunyai Blog Download atau sejenisnya bagi yang belum pernah mencobanya dapat melihatnya DISINI. 

Setelah kita membuat tombol tombol tersebut rasanya kurang pas jika tidak ada Ucapan terima kasih untuk pengunjung setia blog yang sudah mendownload apa yang di tawarkan dari blog, nah untuk itu postingan kali ini akan membahas Cara Membuat Notifikasi Terima Kasih Setelah Download.

Nantinya di Kotak ucapan terima kasih ini kita tambahkan tombol sosial share juga seperti Google Plus, Twitter dan Facebook dan ada sedikit kreasi di tombol downloadnya menggunakan 3D yang sederhana sehingga tampilannya jadi lebih rapih dan enak dipandang. Bagi sobat yang mau mencoba membuat Membuat Notifikasi Terima Kasih Setelah Download mari disimak berikut ini.

Sebelum memulainya pastikan sudah memasang jquery library untuk versinya bebas seperti dibawah ini.

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

Langkah Pertama
Silahkan sobat pasang kode javascript SDK FB dibawah ini dan letakkan dibawah kode <body>, jika di blog sudah terpasang 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>


Langkah Ke Dua
Silahkan sobat tambahkan juga kode javascript untuk tombol Google Plus dan Twitter lalu letakkan kode javascript diatas kode </body>, sama seperti diatas jika sudah pernah memasangnya silahkan lewati langkah ini.

Kode JavaScript Google Plus

<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>


Kode 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>


Langkah Ke Tiga
Silahkan sobat salin kode CSS ini lalu letakkan diatas kode ]]></b:skin> atau di kode </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;
}


Langkah Ke Empat
Silahkan salin kode HTML ini lalu letakkan di dalam Postingan pada mode HTML

<div class="download-box">
<div class="ButtonOK">button</div>
    <div class="thanks-box">
        Terima Kasih sudah mendownload.<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>

Perhatikan kode # yang ditandai silahkan sobat rubah dengan URL link Download


Langkah Ke Lima
Silahkan sobat salin kode Jquery ini lalu letakkan di atas kode </body>

<script type='text/javascript'>
$(function() { 
    $('.ButtonOK').click(function () {
    $('.thanks-box').fadeIn()
});
    $('.close-thanks').click(function() {
    $('.thanks-box').slideUp()
});
 });
</script>

RESULT


Perhatikan tiap kode yang dipasang harus sesuai dan selesai, Selamat Mencoba.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.