Tutorial blogging Adalah Kumpulan panduan dan tips mengenai blogger,Google Adsense,SEO,Backlink,adwords, Khusus Bagi yang ingin mendalami ilmu internet marketing

Sabtu, 04 Februari 2017

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

Cara Membuat Tombol Demo dan Download Untuk Blog Download Template Rating: 4.5 Diposkan Oleh: Angga Gilang

5 komentar:

  1. Seprtinyeee agak sulit nih gan tapi musti di coba

    BalasHapus
  2. udah saya coba... work... tapi tampilannya agak mencong sedikit yang logo downloadnya :O

    BalasHapus
  3. sangat bermanfaat gan ane sudah nyoba dan work tq gan

    BalasHapus