Cara Membuat Tombol Demo dan Download Untuk Blog Download Template

Cara Membuat Tombol Demo dan Download Untuk Blog Download Template - Tombol demo dan download pada blog sangatlah mudah untuk dibuat. Namun,akan lebih baik dan keren apabila kita membuat tombol demo dan download bermaterial design. Untuk blog download template pasti kita membutuhkan tombol demo dan download,supaya tampilan menjadi keren kita harus menambahkan CSS kedalam template dan ditambahkan efek-fek.

Untuk meningkatkan kualitas situs anda,bukan hanya dengan konten yang berkualits saja(menurut saya) melainkan juga dengan meningkatkan kualitas tampilan situs kita. Ya,dengan menambahkan tombol demo dan download yang menarik tentu akan menambah kualitas tampilan situs. Bagi anda yang ingin membuat tombol demo dan download keren maka simak langkah-langkah berikut.

Membuat Tombol Demo dan Download Material Design

1, Pertama

Silakan login blogger,buka menu template → Edit HTML

2. Kedua

Salin dan pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* Angga Save 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!
Ganti kode yang berwarna merah sesuai dengan keinginan anda

3. Ketiga
Silakan tambahkan kode berikut 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>

lalu simpan template.

Untuk memanggil dan menggunakan tombol demo dan download silakan masukkan kode dibawah ini kedalam postingan dalam mode 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>

Catatan!
Ganti kode # dengan url alamat demo dan download anda

Selesai,itulha cara membuat tombol demo dan download keren material design. Semoga artikel ini bisa bermanfaat. See yu next article!

source : http://www.arlinadzgn.com/2017/01/tombol-demo-dan-download-material-ui.html