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.
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.
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
Kode JavaScript Twitter
Langkah Ke Tiga
Silahkan sobat salin kode CSS ini lalu letakkan diatas kode ]]></b:skin> atau di kode </style>
Langkah Ke Empat
Silahkan salin kode HTML ini lalu letakkan di dalam Postingan pada mode HTML
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>
Perhatikan tiap kode 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 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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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'>✖</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.
EmoticonEmoticon