Pada kesempatan kali ini aku akan membagikan tutorial cara memasang tombol demo pada blog dengan tampilan efek gradien warna atau dengan tampilan efek warna warni. Bagi sobat yang sangat suka mempercantik tampilan blog, mungkin ini adalah artikel yang tepat. Namun harus diperhatikan, saat membuat atau memasang efek di blog, kita harus mengkonversinya dulu, agar efek yang sobat pasang tidak terlalu membebani blog sobat.
Cara mengconvertnya gimana bang?
Tenang sobat, aku udah sediain toolsnya. Jika sobat ingin mengkonversinya kedalam bentuk HTML klik disini, dan jika sobat ingin mengkonversinya kedalam bentuk CSS klik disini. Perlu diketahui bahwa kode atau teks yang kita konversi, tidak mengurangi kualitas efek blog. Konversi ini dilakukan hanya agar si template yang sobat gunakan mengerti kode yang sobat masukkan. Nah, jika sobat ingin langsung membuatnya, silahkan ikuti panduan langkah-langkahnya dibawah ini.
1. Coddingnya
#1. Masuk ke blogger.#2. Pilih menu tema.
#3. Kemudian pilih edit html.
#dmgradient {margin:5px auto;text-align:center;}
a.dmg {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite;letter-spacing:.5px;padding:10px 100px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #202d3a;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}2. Cara Memasangnya
#1. Pilih menu postingan.#2. Pilih entri baru.
<div id="dmgradient"><a class="dmg" href="#">DEMO</a></div>| Nama | Keterangan |
|---|---|
| # | Ubah dengan alamat link yang sobat inginkan. |
| DEMO | Ubah dengan kata-kata yang sobat inginkan (misalnya result atau download). |
Baca juga : nilai kualitas artikel postingan kamu dengan memasang kode ini! caranya klik disini!Oh iyah, sebelumnya di konversi dulu yah kode CSSnya, biar efeknya semakin lebih bagus. Kalau mau dibiarin gitu aja kodenya, gak apa-apa. Tapi nanti akan mempengaruhi kecepatan blog walau cuma 1%. itu aja sih menurut aku. Terima kasih hehehe.
