 |
| Membuat tombol download |
CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD
Balik lagi di Infoterlengkap.com. Seperti judul yang sudah kita lihat bersama, kita akan membagikan tutorial terkait cara menciptakan tombol demo dan download. Mungkin bagi sebagian blogger, tutorial yang akan kita sampaikan ini bukan sesuatu hal yang gres lagi. Hanya saja, bagi sebagian yang lainnya, mungkin tutorial ini sangat mempunyai kegunaan bagi mereka yang gres terjun di dunia blogging, khususnya mereka yang mempunyai blog download.
Artikel kita kali ini, didukung oleh script , yang diberi sedikit animasi ripple (gelombang). Sehingga akan muncul kesan yang lebih kasatmata sebagai wujud dari tombol demo atau download itu sendiri. Adapun mengenai step by step penginstalan script, ikuti selengkapnya dibawah ini.
CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD
1. Masuklah kedalam dashboard blogger anda. Pilih sajian Tema - Edit HTML.
2. Setelah masuk kedalam halaman script tema, cari kode ]]></b:skin> atau </style>. Lalu letakkan script code dibawah ini, sempurna diatas kode ]]></b:skin> atau </style>.
2. Setelah masuk kedalam halaman script tema, cari kode ]]></b:skin> atau </style>. Lalu letakkan script code dibawah ini, sempurna diatas kode ]]></b:skin> atau </style>.
/* Arlina Design Material Button */ #wrap{margin:20px auto;text-align:center} #wrap a{text-decoration:none} .tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s} .tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)} .tombolripple.tsatu{background:#ffb3d1} .tombolripple.tdua{background:#b3ff99} .tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#ffff4d} .tombolripple.tdua:hover,.tombolripple.tdua:active{background:#66ffff} svg{position:absolute;top:0;left:0;width:100%;height:100%} circle{fill:rgba(255,255,255,0.07)} .ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)} .teffect{display:block;position:absolute;pointer-events:none;border radius:50%;transform:scale(0);background:#fff;opacity:0.5} .teffect.animate{animation:ripple-effect 0.5s linear} @keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}} @-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
Untuk tombol, warna dan fungsi, dapat anda sesuaikan dengan harapan anda.
3. Tambahkan script dibawah ini untuk memperlihatkan dampak ripple/gelombang. Letakkan sempurna diatas isyarat </body>.
<script type='text/javascript'> //<![CDATA[ !function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery); //]]> </script>
4. Setelah berhasil meletakkan script ripple diatas </body>, waktunya memanggil tombol demo dan download dengan script singkat dibawah ini. Letakkan script pada halaman atau entri dimana anda ingin menampilkan tombol demo dan download. Ingat, setting pada mode HTML dikala meletakkan script pemanggil.
<div id="wrap"> <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a> <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a> </div>
Ganti tanda pagar # dengan link tujuan anda.
5. Selesai, lihat hasil tutorial ini disini
CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD
Itu saja tutorial singkat dan sederhana kita kali ini terkait cara menciptakan tombol demo dan download di blog. Semoga bermanfaat. Jangan lupa, update terus wawasan dan pengetahuanmu setiap hari hanya di Infoterlengkap.com. Sebab kami akan selalu hadirkan yang terbaru setiap harinya, hanya untuk anda. Ingat konten bermanfaat, ingat Infoterlengkap.com. Assalamu'alaikum.
CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD
Infoterlengkap.com
3 April 2019
Rabu
Advertisement