Cara Membuat Tombol Demo dan Download pada blog

Cara Membuat Tombol Demo dan Download pada blog

Hai semua... Apa kabar?? kali ini detik tutor akan membahas tentang bagaimana cara membuat tombol demo dan download pada blog, Pasti kalian sering banget melihat dong tombol tombol seperti ini, Tombol yang simple unik dan juga menarik dilihat, tombol ini berfungsi sebagai tombol mempermudah seseorang saat mengunjungi blog kita saat ingin download maupun demo konten yang akan kita buat.. Nah penasara? pengen taua caranya? yuk simak dibawah..

Cara Membuat Tombol Demo dan Download pada blog

1. Login ke akun bloger kamu

2. langsung menuju ke Tema kemudian edit HTML

3. Kemudian tambahkan kode ini sebelum kode ]]></b:skin> Atau </style>

* 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)}}

kemudian kamu bisa setting ukuran maupun warna seperti yang kamu inginkan.. tinggal ganti yang di blok warna kuning

Kemudian tambahkan kode 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>


Kemudian kamu tinggal simpan template kamu
Sekarang untuk kode pemanggilnya, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML 
<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  "#" dengan tujuan link kamu
selesai dan lihat hasilnya..


Oke itu tadi tutorial gimana caranya membuat tombol demo dan download pada blog kita, Gimana? gampang kan? yups terimakasih sudah berkunjung.. jangan lupa share ya..

Advertisement