Postingan ini yaitu lanjutan dari sebelumnya yaitu Membuat Tombol Demo dan Unduh Di Dalam Postingan Blog disitu dibahas bagaimana membuat tombol Demo dan Unduh bagi yang mempunyai Blog Unduh atau sejenisnya bagi yang belum pernah mencobanya dapat melihatnya DISINI.
Setelah kita membuat tombol tombol tersebut rasanya kurang pas jikalau 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 menyerupai 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 teman yang mau mencoba membuat Membuat Notifikasi Terima Kasih Setelah Unduh mari disimak berikut ini.
Sebelum memulainya pastikan sudah memasang jquery library untuk versinya bebas menyerupai dibawah ini.
Langkah Pertama
Silahkan teman pasang arahan javascript SDK FB dibawah ini dan letakkan dibawah arahan <body>, jikalau di blog sudah terpasang silahkan lewati langkah ini.
Langkah Ke Dua
Silahkan teman tambahkan juga arahan javascript untuk tombol Google Plus dan Twitter lalu letakkan arahan javascript diatas arahan </body>, sama menyerupai diatas jikalau sudah pernah memasangnya silahkan lewati langkah ini.
Kode JavaScript Google Plus
Kode JavaScript Twitter
Langkah Ke Tiga
Silahkan teman salin arahan CSS ini lalu letakkan diatas arahan ]]></b:skin> atau di arahan </style>
Langkah Ke Empat
Silahkan salin arahan HTML ini lalu letakkan di dalam Postingan pada mode HTML
Perhatikan kode # yang ditandai silahkan teman rubah dengan URL link Download
Langkah Ke Lima
Silahkan teman salin arahan Jquery ini lalu letakkan di atas arahan </body>
Perhatikan tiap arahan yang dipasang harus sesuai dan selesai, Selamat Mencoba.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Langkah Pertama
Silahkan teman pasang arahan javascript SDK FB dibawah ini dan letakkan dibawah arahan <body>, jikalau 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 = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>Langkah Ke Dua
Silahkan teman tambahkan juga arahan javascript untuk tombol Google Plus dan Twitter lalu letakkan arahan javascript diatas arahan </body>, sama menyerupai diatas jikalau 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 teman salin arahan CSS ini lalu letakkan diatas arahan ]]></b:skin> atau di arahan </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 arahan 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'>✖</div> </div> </div>Perhatikan kode # yang ditandai silahkan teman rubah dengan URL link Download
Langkah Ke Lima
Silahkan teman salin arahan Jquery ini lalu letakkan di atas arahan </body>
<script type='text/javascript'> $(function() { $('.ButtonOK').click(function () { $('.thanks-box').fadeIn() }); $('.close-thanks').click(function() { $('.thanks-box').slideUp() }); }); </script> RESULT
Perhatikan tiap arahan yang dipasang harus sesuai dan selesai, Selamat Mencoba.
Comments