Home / Tips Blogger / Tutorialh Membuat Tombol Demo dan Download Material Design

Tutorialh Membuat Tombol Demo dan Download Material Design

Tutorialh Membuat Tombol Demo dan Download Material Design 1

Sebagaimana yang kamu ketahui, saat ini Material Design sangat di sukai oleh para blogger. Material Design saat ini sudah menjadi tren di kalangan blogger.
Banyak blogger yang berlomba-lomba menerapkan tampilan blog seperti Material Design. kali ini admin ingin memberi sedikit info tentang cara menciptakan tombol menu Download dan Demo Material Design.

Membuat Tombol Demo dan Download Material Design .

1. Pertama Buka Blogger > Klik tombol Edit HTML > Template Editor > Tambahkan CSS di bawah ini sebelum 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:#e67e22} .tombolripple.tdua{background:#3498db} .tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541} .tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3} 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)}}

Catatan:
Untuk warna tombol dan fungsi lainnya silakan di rubah sesuai ke inginan.

2. Kemudian tambahkan kode jQuery ini sebelum 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>
 

Catatan:
Kode jQuery berfungsi untuk memunculkan efek Ripple pada tombol.
kemudian simpan template.

Sekarang untuk kode pemanggilnya, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose)

 <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>
 

Tambahkan link tujuan pada kode yang ditandai.
Saya rasa sampai di sini sudah cukup mudah untuk di pahami dan di terapkan.

Baca :  Penyebab Pengunjung Blog Berkurang Saat Ganti Template

About Erzed