Cara Membuat Tombol Demo dengan Efek Warna-Warni Bergantian

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

#1. Masuk ke blogger.
#2. Pilih menu tema.
#3. Kemudian pilih edit html.
Menu Tema Di Blogger
#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.
Menu Postingan di Blogger
#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 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.

Perkenalkan nama aku andolvin yuki, nama panggilan aku dolvin. Aku adalah seorang pria yang cinta kedamaian, yang suka berbagi dan mencari informasi. Keahlian blogging aku yaitu redesign template, buat template, toturial blogging dan editing. Kalau mau bertanya dan berkomentar di blog ini aku persilahkan, tapi gak boleh SPAM yahh. Arigatou. Terima kasih.



Emoticon