 |
| Membuat Notifikasi Ucapan "Terima Kasih" |
Cara Membuat Notifikasi "Terima Kasih" Setelah Klik Tombol Download - pada kesempatan kali ini saya akan membagikan sebuah trik untuk mempercantik blog kalian yang suka blogging. trik ini saya dapatkan dari sebuah situs teman blogger juga yang didalam blognya tersebut banyak berbagai trik blogging keren.
Terasa kurang nikmat kalau kalian belum memberikan ucapan "Terima Kasih" kepada pembaca setia blog kalian yang telah mengunduh konten yang kalian berikan. maka dari itu saya mencoba searching di blog teman dan akhirnya menemukan trik tersebut, yang insya allah akan saya pasang juga diblog saya.
Ucapan "Terima Kasih" ini telah ditambahkan tombol sosial share seperti Google Plus, Twitter, Facebook, dan ada sedikit modifikasi 3D pada tombol downloadnya sehingga membuat lebih tampilan sederhana, rapi, dan enak dipandang. jika kalian ingin memasang di blog kalian juga silahkan simak caranya dibawah ini.
KETERANGAN :
Sebelum memulai penambahan trik ini ada baiknya kalian backup template yang sedang kalian gunakan, dan cek apakah ditemplate tersebut sudah tersedia JQuery Library, untuk versinya bebas asalkan sudah terpasang!
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Cara Pemasangan
- Silahkan kalian pasang kode Javascript SDK FB dibawah ini, dan letakkan dibawah kode <body> atau diatas </body>. Jika sudah terpasang lewatkan tahap ini.
- Kalian juga harus menambahkan script Google Plus dan Twitter, lalu letakkan script tersebut diatas </body>, tetapi jika kalian sudah memasang silahkan lewati tahap ini juga.
- Silahkan kalian salin CSS dibawah ini dan letakkan diatas ]]></b:skin> atau </style>
- Selanjutnya silahkan kalian salin kode HTML dibawah ini, dan letakkan didalam postingan kalian pada mode HTML (Bukan Compose)
- Langkah terakhir, silahkan kalian salin kode JQuery dibawah ini, dan letakkan diatas </body>
- Save Template
<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><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><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>.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;
}<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 telah saya tandai, silahkan ganti # dengan URL link download
<script type='text/javascript'>
$(function() {
$('.ButtonOK').click(function () {
$('.thanks-box').fadeIn()
});
$('.close-thanks').click(function() {
$('.thanks-box').slideUp()
});
});
</script>Selalu perhatikan langkah-langkah yang telah saya berikan, jangan sampai ada yang ketinggalan yang bisa berakibat template kalian ERROR! dan trik ini tidak dapat kalian gunakan!
Bagaimana? kalian suka? semoga saja kalian suka dengan artikel yang saya bagikan ini. jika kalian mempunyai pertanyaan seputar artikel ini silahkan tanyakan di kolom komentar dibawah artikel ini!
Mungkin sekian duku artikel dari Cara Membuat Notifikasi "Terima Kasih" Setelah Klik Tombol Download. jika ada salah² penulisan mohon dimaafkan.
Terima Kasih Atas Kunjungan & Perhatiannya.
Sumber : http://www.dibalikseo.com/2017/05/membuat-notifikasi-terima-kasih-setelah.html