Duit Blog Cara Menciptakan Tombol Demo Dan Unduh Material Design Di Blog

Selamat tiba di Bloggerkil. Dalam artikel kali ini aku akan memperlihatkan sedikit panduan mengenai Cara menciptakan tombol demo dan unduh material design di blog dengan effect ripple yang akan sangat menarik untuk blog sobat. dengan tampilan material design ini tentunya akan terlihat keren dan juga dengan adanya effect ripple ini maka setiap tombol demo dan unduh di tekan akan muncul Effect Ripple yang sangat menawan. Untuk teman yang memiliki blog download, misal menyerupai unduh template, game, video, film, lagu, dll dan dengan adanya tombol ini yang akan sangat cocok untuk di pasang di blog apapun dan manapun.

Cara menciptakan tombol demo dan unduh material design

Cara menciptakan tombol demo dan unduh material design

● Masuk ke Blog sobat

● Masuk ke Template kemudian pilih Edit HTML

● Cari isyarat ]]></b:skin> atau </style> untuk mempermudah pencarian teman tekan tombol CTRL+F pada keyboard sobat

● Copy Kode berikut ini lalu Paste tepat diatas isyarat ]]></b:skin> atau </style>

.ripplelink{border:1px solid rgba(0,0,0,0.12)}

.btn, .btn-large {

text-decoration: none;

color: #000;

background-color:#eeff41 !important;

text-align: center;

letter-spacing: .5px;

-webkit-transition: .2s ease-out;

-moz-transition: .2s ease-out;

-o-transition: .2s ease-out;

-ms-transition: .2s ease-out;

transition: .2s ease-out;

cursor: pointer;

}

.btn:hover, .btn-large:hover {

background: #08a7ef !important;

}.btn i{margin-left:0}

.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover {

-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);

-moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);

box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);

}

.btn, .btn-large, .btn-flat {

border: none;

border-radius: 5px;

display: inline-block;

height: 36px;

line-height: 36px;

outline: 0;

padding: 0 2rem;

text-transform: uppercase;

vertical-align: middle;

-webkit-tap-highlight-color: transparent;

}

● Kemudian Copy kode berikut dan Paste tepat diatas tag </body>

<script>$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});</script>

● Masuk ke sajian postingan selanjutnya Buat Entri dan Copy kode berikut lalu Paste di dalam Mode HTML bukan Compose

<div style="text-align: center;"><a class="btn ripplelink" href="URL" title="Duit Blog Cara Membuat Tombol Demo Dan Unduh Material Design Di Blog"><i class="fa fa-download"></i> Download</a><a class="btn ripplelink" href="URL" title="Duit Blog Cara Membuat Tombol Demo Dan Unduh Material Design Di Blog">Demo <i class="fa fa-paper-plane-o"></i></a></div>

Cara menciptakan tombol demo dan unduh material design

Catatan:

● Ganti URL dengan URL Tujuan sobat.

● Mengganti warna tombol cukup cari isyarat #eeff41 di dalam kode CSS diatas

Oke sobat, cukup sekian artikel kali ini supaya artikel ini dapat menciptakan teman bahagia jikalau apa yang teman butuhkan ada disini dan supaya bermanfaat untuk teman semua.