Cara Membuat Tombol Button Di Postingan Blog

GAWARIBLOG-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 enak dipandang jika kita menerapkan Button Link dalam setiap postingan blog. Alih-alih memberi link eksternal banyak web menggunakan CSS Button Link.

Oleh karena itu kamu sebagai blogger setidaknya harus tau tentang style button link ini. Selain menggunakan 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 kode ]]></b:skin> atau </style> kemudian salin dan pastekan kode CSS berikut tepat 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 kode </body> dan pastekan Script berikut tepat 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 kamu menggunakan kode html dibawah ini.

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

Ingat! Harus menggunakan mode HTML bukan Compose.

Penutup

Demikian lah tutorial Cara Membuat Tombol Button Di Postingan Blog. Bagaimana cukup mudah kan?
Yuk coba terapkan tutorial ini pada blog kalian masing-masing.
Jika ada yang ingin ditanyakan silahkan tinggalkan komentar dibawah.