 |
Cara membuat tombol demo dan download – Balik lagi di watpedia. Seperti judul yang sudah kita lihat bersama, kita akan membagikan tutorial ini. Mungkin bagi sebagian blogger, tutorial yang akan kita sampaikan ini bukan sesuatu hal yang baru lagi. Hanya saja, bagi sebagian yang lainnya, mungkin tutorial ini sangat berguna bagi mereka yang baru terjun di dunia blogging, khususnya mereka yang memiliki blog download.
Artikel kita kali ini, didukung oleh script arlinadzgn.com, yang diberi sedikit animasi ripple (gelombang). Sehingga akan muncul kesan yang lebih nyata 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 menu Tema – Edit HTML.
2. Setelah masuk kedalam halaman script tema, cari kode ]]></b:skin> atau </style>. Lalu letakkan script code dibawah ini, tepat 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, bisa anda sesuaikan dengan keinginan anda.
3. Tambahkan script dibawah ini untuk memberikan efek ripple/gelombang. Letakkan tepat diatas kode </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 . Ingat, setting pada mode HTML saat 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,
Itu saja tutorial singkat dan sederhana kita kali ini terkait cara membuat tombol demo dan download di blog. Semoga bermanfaat. Jangan lupa, update terus wawasan dan pengetahuanmu setiap hari hanya di watpedia. Sebab kami akan selalu hadirkan yang terbaru setiap harinya, hanya untuk anda. Ingat konten bermanfaat, ingat watpedia. Assalamu’alaikum.