Cara Membuat Tombol Demo dengan Efek Warna-Warni

Cara Membuat Tombol Demo dengan Efek Warna-Warni
Cara membuat tombol demo dengan efek warna-warni - 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 kak?
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 agar blog sobat memahami semua kode html dalam waktu singkat. 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.
Cara Membuat Tombol Demo dengan Efek Warna-Warni
#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 Memasangnya

#1. Pilih menu postingan. 
#2. Pilih entri baru.
Cara Membuat Tombol Demo dengan Efek Warna-Warni
#3. Jika sudah dalam postingan > pilih tab HTML > kemudian letakkan kode ini di dalamnya.
<div id="dmgradient"><a class="dmg" href="#">DEMO</a></div>
NamaKeterangan
#Ubah dengan alamat link yang sobat inginkan.
DEMOUbah dengan kata-kata yang sobat inginkan (misalnya result atau download).

Baca juga : nilai kualitas artikel didalam blog kamu dengan memasang kode ini! mudah kok, silahkan dibaca yah.
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.
Tampilkan Komentar


EmoticonEmoticon