Membuat Tampilan Tombol Berwarna Warni

Tampilan dalam penyajian sebuah postingan atau artikel adalah hal yang paling penting dalam bidang SEO, alasanya karena dari segi tampilan, pengunjung pun akan senang dannyaman ketika berkunjung di halaman postingan Anda. Dengan begitu pengunjung akan sering mengunjungi halaman yang telah Anda buat bahkan pengunjung tersebut kemungkinan besar akan berlangganan di Blog Anda atau wesbite Anda.

Apakah Tombol dapat dikreasikan dengan bagus?


Membuat Tampilan Tombol Berwarna Warni

Untuk jawaban dari pertanyaan di atas cukup simple yakni bisa. karena hanya dengan meenggunakan sebuah HTML CSS Anda dapat mengkreasikanya sesuka hati. Tidak cukup hanya warna dasar atau hanya warna itu - itu saja, Anda dapat merubahnya atau mengkreasikannya dengan menambah beberapa warna dalam tampilan tombol tersebut.

Yang perlu Anda lakukan untuk Membuat Tampilan Tombol Berwarna Warni sebagai berikut:
1. Login Blogger.com.
2. Cari kode </style> pada Tema > Edit HTML.
3. Copas (copy-paste) kode di bawah ini sebelum kode </style>.
.btn-demo {
  background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
  background-size: 500% 500%;
  -webkit-animation: ignielGradient 12s ease infinite;
  -moz-animation: ignielGradient 12s ease infinite;
  animation: ignielGradient 12s ease infinite;
  width: 100%;
  color: #fff;
  border-radius: 8px;
  padding: 8px;
  border: none;
  margin:8px;
}
.btn-download {
  background: linear-gradient(45deg, #d2527f, #f89406, #f22613, #26a65b, #5868ec, #f54e80, #f7ca18);
  background-size: 500% 500%;
  -webkit-animation: ignielGradient 12s ease infinite;
  -moz-animation: ignielGradient 12s ease infinite;
  animation: ignielGradient 12s ease infinite;
  width: 100%;
  color: #fff;
  border-radius: 8px;
  padding: 8px;
  border: none;
  margin:8px;
}
@-webkit-keyframes ignielGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes ignielGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes ignielGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
5. Bila sudah memasang style di atas pada Tema > Edit HTML, sekarang simpan tema Anda.
6. Sekarang untuk menerapkan kode di atas, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose).
<button class="btn-demo">Demo</button>
<button class="btn-download">Download</button>

Result:


Artikel Pencarian Terkait:
  • #Membuat Tombol Berwarna Warni
  • Membuat Tampilan Tombol Berwarna Warni
  • Tombol Berwarna Warni
  • Berwarna Warni
  • HTML
  • CSS
  • #Stylesheet
  • #Link
  • #Blogger
  • #Blogspot
  • #Website
  • #HTML
  • #CSS

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Membuat Safelink Random Post di Blog Utama Paling Mudah

Gambar
Safelink Random Post di Blog Utama ini tidak membutuhkan bantuan template orang lain, melainkan menggunakan template pribadi kita masin-masing atau bahkan template favorite kita. Kali ini meneruskan postingan dari yang sebelumnya yakni " Cara Membuat Safelink di Blog Utama Paling Lengkap dan Sangat Mudah ", pada postingan tersebut sangat lengkap sekali, karena terdapat gambar - gambar pada langkahnya dengan tujuan untuk mempermudah mempraktikan. Untuk cara kali ini beda, yakni link safelink yang dituju adalah random post atau postingan acak. Manfaat yang didapatkan selain kita berhasil membuat Blog Utama memiliki halaman Safelink yakni sebagai berikut. Link safelink yang dituju tidak hanya satu halaman saja melainkan secara Random Post / Postingan Acak Tidak ribet untuk membuat scriptnya Script disederhanakan sedemikian mungkin Mudah untuk dipraktikan Tidak menggunakan berbagai macam CSS yang membuat kita bingung Kita menjadi tahu fungsi script dari jalanya Safelink Untuk apa...
Baca selengkapnya

Cara Menghindari Konten Salinan dengan Baik dan Benar

Gambar
Apakah kalian tahu, bahwa konten Kalian hasil salinan atau bukan? disengaja dan tidak disengaja bisa saja terjadi pada Blog Kalian. Bagaimana tidak, banyak para Blogger diluar sana yang berbondong - bondong membuat artikel yang memungkin tulisan mereka sama walaupun tidak disengaja. Artikel ini tidak mengajari Kalian untuk berbuat curang dengan membuat konten salinan yang aman dan sebagainya, akan tetapi hal itu bisa dilakukan selama Kalian tahu caranya. Merasa kasihan dengan mereka para Blogger yang telah membuat artikel dengan susah payah lalu di Copy begitu saja tanpa ijin. Akan lebih baiknya lagi selain menampilkan sumber yang di cari di berbagai website yang Kalian kunjungi, hendahlak untuk mengganti kata - kata yang bertujuan sama dengan maksud menghindari konten salinan. Berikut ini contoh yang baik dan benar untuk mengbuat konten atau artikel dengan Mencantumkan sumber ilmu yang didapatkan. Mengbuat Konten atau Artikel dengan Mencantumkan Sumber "Banyak Para Blogger membua...
Baca selengkapnya

112 TPS di Riau akan melakukan pengulangan Coblosan dan Lanjutan

Gambar
WESTERNBLOG.XYZ - Bawaslu Riau merekomendasikan bahwa ada 112 tempat pemungutan suara yang akan melakukan pemungutan suara ulang (PSU) dan pemilihan lebih lanjut. Ini dilakukan karena masalah di lapangan. "Kami sudah menyampaikan ini ke KPU Riau. Ini karena banyaknya laporan yang kami terima dari publik saat pemilihan 17 April 2019," kata Ketua Bawaslu Riau, Rusidi Rusdan Lubis. Rusidi menjelaskan rekomendasi PSU dan melanjutkan setelah partainya memverifikasi dan mengumpulkan hasil data pemantauan di TPS di Riau. Hasil pengawasan ini kemudian ditinjau dan dibahas dua hari setelah pemungutan suara. "Diskusi dilakukan secara komprehensif dengan merekapitulasi peristiwa dan masalah khusus yang terjadi di semua TPS di Riau," kata Rusidi. Menurut Rusdi, berdasarkan hasil pengumpulan masalah, ditemukan bahwa 26 tempat pemungutan suara akan dilakukan oleh PSU dan 86 tempat pemungutan suara dilaksanakan dengan pemilihan lebih lanjut. "(Sebanyak) 26 tempat pemungutan ...
Baca selengkapnya