Cara Membuat Tombol Button Di Postingan Blog - Hallo sahabat ndelet.com, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tombol Button Di Postingan Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blog, Artikel lain-lain, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Tombol Button Di Postingan Blog
link : Cara Membuat Tombol Button Di Postingan Blog

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.

Demikianlah Artikel

Sekianlah artikel kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel dengan alamat link