Menyembunyikan Sesuatu di Tombol Download

Kali ini kita akan bereksperimen lagi, sama seperti social locker kita akan menyembunyikan sesuatu didalam suatu tombol. Mengerti? Jika belum silakan lihat gambar demo dibawah ini

DEMO

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>

Lalu Javascript Buttonnya

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