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.
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>.
6. Sekarang untuk menerapkan kode di atas, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose).
Artikel Pencarian Terkait:
Apakah Tombol dapat dikreasikan dengan bagus?
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