Cara Menciptakan Tombol Button Di Postingan Blog

-Halo teman-teman kali ini saya akan membagikan tutorial tentang Cara Membuat Tombol Button Di Postingan Blog. Tutorial kali ini juga saya dapatkan dari web El Creative Academy.

Cara Membuat Tombol Button Di Postingan Blog

Seperti yang kita ketahui sebagai blogger, akan terasa lebih lezat dipandang kalau kita menerapkan Button Link dalam setiap postingan blog. Alih-alih memberi link eksternal banyak web memakai CSS Button Link.

Oleh alasannya yaitu itu kau sebagai blogger setidaknya harus tau wacana style button link ini. Selain memakai material design CSS Button Link ini sangat User Friendly.

Tanpa Berlama-lama yuk kita ikuti langkah-langkah dibawah ini.

Cara Memasang Tombol Button Link di Blogger

1. Langkah pertama, masuk ke akun Blogger, pilih Theme (Tema) > Edit HTML.
2. Kedua, cari isyarat ]]></b:skin> atau </style> lalu salin dan pastekan isyarat CSS berikut sempurna diatas/di dalamnya:

Versi Asli

.elcreative-md-button-ripple {     background-color: #1a73e8;     color: #ffffff;     border: none;     border-radius: .25rem;     -webkit-box-sizing: border-box;     box-sizing: border-box;     min-height: 2.25rem;     min-width: 5.5rem;     outline: 0;     padding: 7px 15px;     position: relative;     -webkit-transition: background .4s cubic-bezier(.25,.8,.25,1);     -o-transition: background .4s cubic-bezier(.25,.8,.25,1);     transition: background .4s cubic-bezier(.25,.8,.25,1);     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     cursor: pointer;     text-align: center;     white-space: nowrap;     display: -webkit-inline-box;     display: -ms-inline-flexbox;     display: inline-flex;     -webkit-box-align: center;     -ms-flex-align: center;     align-items: center;     -webkit-box-pack: center;     -ms-flex-pack: center;     justify-content: center;     text-decoration: none; }  .elcreative-md-button-ripple:hover {     background-color: #125bbb;     color: #ffffff; }  .elcreative-md-button-ripple:active {     -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 2px 6px 2px rgba(60, 64, 67, .15);     box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 2px 6px 2px rgba(60, 64, 67, .15); }  .elcreative-ripple-effect {     position:relative;     overflow:hidden;     -webkit-transform:translatez(0) }  .elc-ripple-effect {     display:block;     position:absolute;     pointer-events:none;     border-radius:50%;     -webkit-transform:scale(0);     -ms-transform:scale(0);     transform:scale(0);     background:#fff;     opacity:0.4 }  .elc-ripple-effect.animate {     -webkit-animation:elcreative-ripple-effect 0.4s linear;     animation:elcreative-ripple-effect 0.4s linear }  @keyframes elcreative-ripple-effect{     100%{         opacity:0;         -webkit-transform:scale(2.4);         transform:scale(2.4)     } }  @-webkit-keyframes elcreative-ripple-effect{     100%{         opacity:0;         -webkit-transform:scale(2.4);         transform:scale(2.4)     } } 

Versi Kompress

.elcreative-md-button-ripple{background-color:#1a73e8;color:#fff;border:none;border-radius:.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:2.25rem;min-width:5.5rem;outline:0;padding:7px 15px;position:relative;-webkit-transition:background .4s cubic-bezier(.25,.8,.25,1);-o-transition:background .4s cubic-bezier(.25,.8,.25,1);transition:background .4s cubic-bezier(.25,.8,.25,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-align:center;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none}.elcreative-md-button-ripple:hover{background-color:#125bbb;color:#fff}.elcreative-md-button-ripple:active{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.30),0 2px 6px 2px rgba(60,64,67,.15);box-shadow:0 1px 2px 0 rgba(60,64,67,.30),0 2px 6px 2px rgba(60,64,67,.15)}.elcreative-ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}.elc-ripple-effect{display:block;position:absolute;pointer-events:none;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);background:#fff;opacity:.4}.elc-ripple-effect.animate{-webkit-animation:elcreative-ripple-effect 0.4s linear;animation:elcreative-ripple-effect 0.4s linear}@keyframes elcreative-ripple-effect{100%{opacity:0;-webkit-transform:scale(2.4);transform:scale(2.4)}}@-webkit-keyframes elcreative-ripple-effect{100%{opacity:0;-webkit-transform:scale(2.4);transform:scale(2.4)}} 

3. Ketiga, cari isyarat </body> dan pastekan Script berikut sempurna diatasnya:

Versi Asli 

<script type="text/javascript">     //<[CDATA[     !function(e) {         e(".elcreative-ripple-effect").click(function(c) {             var a = e(this);             0 === a.find(".elc-ripple-effect").length && a.append("<span class='elc-ripple-effect'></span>");             var b = a.find(".elc-ripple-effect");             if (b.removeClass("animate"), !b.height() && !b.width()) {                 var d = Math.max(a.outerWidth(), a.outerHeight());                 b.css({height:d, width:d});             }             d = c.pageX - a.offset().left - b.width() / 2;             c = c.pageY - a.offset().top - b.height() / 2;             b.css({top:c + "px", left:d + "px"}).addClass("animate");         });     }(jQuery);     //]]> </script> 

Versi Kompress

<script type="text/javascript"> //<[CDATA[ !function(e){e(".elcreative-ripple-effect").click(function(c){var a=e(this);0===a.find(".elc-ripple-effect").length&&a.append("<span class='elc-ripple-effect'></span>");var b=a.find(".elc-ripple-effect");if(b.removeClass("animate"),!b.height()&&!b.width()){var d=Math.max(a.outerWidth(),a.outerHeight());b.css({height:d,width:d})} d=c.pageX-a.offset().left-b.width()/2;c=c.pageY-a.offset().top-b.height()/2;b.css({top:c+"px",left:d+"px"}).addClass("animate")})}(jQuery); //]]> </script> 

Catatan: Sebelum memasangnya, pastikan Template Blogger yang kalian gunakan telah terpasang jQuery.

4. Terakhir klik simpan tema.

Cara Menerapkan Button Link Pada Postingan Blog

Untuk menerapkan nya didalam sebuah postingan blog kau memakai isyarat html dibawah ini.

<a class="elcreative-md-button-ripple elcreative-ripple-effect" href="#">NAMA TOMBOL</a>

Ingat! Harus memakai mode HTML bukan Compose.

Penutup

Demikian lah tutorial Cara Membuat Tombol Button Di Postingan Blog. Bagaimana cukup gampang kan?
Yuk coba terapkan tutorial ini pada blog kalian masing-masing.
Jika ada yang ingin ditanyakan silahkan tinggalkan komentar dibawah.
Sumber https://gawarii.blogspot.com/

Berbagi :