Dengan perkembangan CSS ketika ini telah banyak kreasi yang sanggup diciptakan hanya dengan memakai CSS. Bahkan dengan memanfaatkan CSS pula, tombol yang awalnya biasa saja sanggup dibentuk semenarik mungkin. Fungsi sebuah tombol dalam halaman web sanggup dibentuk keren dengan animasi dari CSS.
Dalam posting kali ini saya akan membahas wacana bagaimana cara memasang tombol di blogger yang dilengkapi dengan animasi gelembung yang keren hanya dengan memakai isyarat CSS. Contohnya sanggup kau lihat di halaman demo pada link berikut:
Instalasi
Baiklah pribadi saja, untuk memasang tombol menyerupai itu di blog kau pertama-tama buka dashboard blogger kamu, kemudian pilih Tema kemudian klik tombol Edit HTML. Setelah itu temukan isyarat]]></b:skin> kemudian tambahkan isyarat berikut diatasnya..button { font: 15px Calibri, Arial, sans-serif; /* A semi-transparent text shadow */ text-shadow: 1px 1px 0 rgba(255,255,255,0.4); /* Overriding the default underline styling of the links */ text-decoration: none !important; white-space: nowrap; display: inline-block; vertical-align: baseline; position: relative; cursor: pointer; padding: 10px 20px; background-repeat: no-repeat; /* The following two rules are fallbacks, in case the browser does not support multiple backgrounds. */ background-position: bottom left; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'); /* Multiple backgrounds version. The background images are defined individually in color classes */ background-position: bottom left, top right, 0 0, 0 0; background-clip: border-box; /* Applying a default border raidus of 8px */ -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; /* A 1px highlight inside of the button */ -moz-box-shadow: 0 0 1px #fff inset; -webkit-box-shadow: 0 0 1px #fff inset; box-shadow: 0 0 1px #fff inset; /* Animating the background positions with CSS3 */ /* Currently works only in Safari/Chrome */ -webkit-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; } .button:hover { /* The first rule is a fallback, in case the browser does not support multiple backgrounds */ background-position: top left; background-position: top left, bottom right, 0 0, 0 0; } .button:active { /* Moving the button 1px to the bottom when clicked */ bottom: -1px; } /* The three buttons sizes */ .button.big { font-size: 30px; } .button.medium { font-size: 18px; } .button.small { font-size: 13px; } /* A more rounded button */ .button.rounded { -moz-border-radius: 4em; -webkit-border-radius: 4em; border-radius: 4em; } /* Defining four button colors */ /* BlueButton */ .blue.button { color: #0f4b6d !important; border: 1px solid #84acc3 !important; /* A fallback background color */ background-color: #48b5f2; /* Specifying a version with gradients according to */ background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .blue.button:hover { background-color: #63c7fe; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); } /* Green Button */ .green.button { color: #345903 !important; border: 1px solid #96a37b !important; background-color: #79be1e; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317)); } .green.button:hover { background-color: #89d228; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e)); } /* Orange Button */ .orange.button { color: #693e0a !important; border: 1px solid #bea280 !important; background-color: #e38d27; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f)); } .orange.button:hover { background-color: #ec9732; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b)); } .gray.button { color: #525252 !important; border: 1px solid #a5a5a5 !important; background-color: #a9adb1; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); } .gray.button:hover { background-color: #b6bbc0; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfo-jIZh18Yf9q33O8izW4fntE8e0HOXFG7gcXLseLdWrWVefGB7flfvT7gYMmxPkFXujpevTySKBkIig5dyqoWghmznlptJDdZO2D8k1cuTuVionLe5KlRtlI1ZGOZSuZ5o3gluplUsY/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }Kemudian klik tombol Simpan. Dengan cara ini proses pemasangan isyarat CSS untuk tombol dengan animasi gelembuh telah terpasang di blog kau dan sanggup dipakai di belahan manapun di blog kamu. Akan tetapi terdapat beberapa hal yang perlu kau perhatikan biar tidak terjadi efek yang tumpang tindih.
Kode CSS Tumpang Tindih
Pastikan di blog kau tidak terdapat komponen yang memakaiclass="button", hal ini sebab dengan pemasangan isyarat CSS di atas akan mensugesti semua belahan yang memakai atribut sama. Termasuk jikalau ada yang memakai class="gray" dan sebagainya yang dipakai pada isyarat CSS di atas.Untuk mengatasi hal tersebut yang sanggup kau lakukan yaitu memodifikasi isyarat CSS di atas sebelum dipasang di blog. Yaitu dengan mengubah semua nama class yang dipakai pada CSS di atas. Misalnya semua
.button diubah menjadi .button_gelembung, serta semua class yang dipakai ditambahkan _gelembung. Sehingga akan menjadi .big_gelembung, .orange_gelembung dan sebagainya.Penggunaan
Setelah memasang isyarat CSS di blog kamu, untuk menggunakannya kau perlu mengaplikasikan pada isyarat HTML yang diletakkan sesuai keinginan. Misalnya kau ingin memasangnya di sebuah postingan, di halaman statis, atau bahkan menjadi tombol utama di homepage. Gunakanlah isyarat HTML berikut ini:<!-- Tombol Ukuran Besar --> <a href="#" class="button big blue">Judul Teks</a> <a href="#" class="button big green">Judul Teks</a> <a href="#" class="button big orange">Judul Teks</a> <a href="#" class="button big gray">Judul Teks</a> <!-- Tombol Ukuran Sedang --> <a href="#" class="button blue medium">Judul Teks</a> <a href="#" class="button green medium">Judul Teks</a> <a href="#" class="button orange medium">Judul Teks</a> <a href="#" class="button gray medium">Judul Teks</a> <!-- Tombol Ukuran Kecil --> <a href="#" class="button small blue">Judul Teks</a> <a href="#" class="button small green">Judul Teks</a> <a href="#" class="button small orange">Judul Teks</a> <a href="#" class="button small gray">Judul Teks</a> <!-- Tombol Kecil Rounded --> <a href="#" class="button small blue rounded">Judul Teks</a> <a href="#" class="button small green rounded">Judul Teks</a> <a href="#" class="button small orange rounded">Judul Teks</a> <a href="#" class="button small gray rounded">Judul Teks</a>
Penutup
Itulah pembahasan wacana cara memasang tombol animasi gelembung di Blogger. Serta bagaimana mengatasi jikalau terdapat isyarat CSS yang saling tumpang tindih di blog. Sebab beberapa template mungkin telah memakai nama class yang sama lebih dulu. Semoga goresan pena ini sanggup bermanfaat untuk kamu. Jika ada hal yang ingin disampaikan, baik berupa pertanyaan ataupun pernyataan. Sampaikan komentar terbaik kau di belahan bawah. Terima kasih dan hingga jumpa!Sumber http://www.maringngerrang.com/
