Cara Membuat Tombol Button Di Postingan Blog
Seperti yang kita ketahui sebagai blogger, akan terasa lebih lezat dipandang bila kita menerapkan Button Link dalam setiap postingan blog. Alih-alih memberi link eksternal banyak web memakai CSS Button Link.
Oleh alasannya ialah 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 arahan ]]></b:skin> atau </style> lalu salin dan pastekan arahan 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 arahan </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 arahan 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/
