Cara Membuat Tombol Demo dengan Efek Warna-Warni Bergantian

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. Codding

#1. Masuk ke blogger.

#2. Pilih menu tema.

#3. Kemudian pilih edit html.

#4. Letakkan kode CSS ini tepat di atas kode ]]></b:skin> atau </style>

#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%}}

#5. kemudian pilih simpan tema.

 

2. Cara Pemasangan

#1. Pilih menu postingan. 

#2. Pilih entri baru.

#3. Jika sudah dalam postingan > pilih tab HTML > kemudian letakkan kode ini di dalamnya.

<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).

Demo

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.

Share this post