Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat animation slime diblogger

views

Hello sobat ICloudzer kali ini admin akan memberikan informasi mengenai sebuah informasi bagaimana caranya membuat tampilan animasi CSS bergerak seperti slime diblogger

Info: Okay sobat ICloudzer jika sudah penasaran yuk langsung aja kita bahas bersama sama

Animation Slime

Animasi slime merupakan sebuah animation yang dibuat menggunakan kode CSS dan juga HTML, nah apbila ditampilkan maka animasi tersebut akan bergerak gerak secara perlahan seakan akan hidup, dan 100% responsif

Fungsi Animation

Fungsi animation CSS diantaranya adalah untuk membuat preloading blog ataupun hanya menampilkan animasi tersebut hanya karena keren animation css tersebut keren

Contoh Tampilan

Tidak lupa juga admin sering sering memberikan contoh tampilan secara realtime kepada pembaca, nah berikut ini adalah contoh tampilan dari animation slimenya

Cara pembuatan

Admin akan memberikan penjelasan mengenai bagaimana cara membuat animasi CSS slime tersebut, pelajari secara perlahan lahan okay

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>

.wrapperrahrah{
  text-align:center;
}
svg.rahrah{
  margin: 0 auto;
  width:67%;
  height:auto;
}

Info: Atau kamu bisa meletakkan kode CSS diatas menggukan tag kode <style>

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode html dibawah ini, kemudian kamu bisa menggunakan kode HTML tersebut sesuai keinginan kamu aja ya

<div class="wrapperrahrah">
<svg  class="rahrah" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 288 288">
<linearGradient id="PSgrad_0" x1="70.711%" x2="0%" y1="70.711%" y2="0%">
  <stop offset="0%" stop-color="rgb(248, 0, 0)" stop-opacity="1" />
  <stop offset="100%" stop-color="rgb(247,109,138)" stop-opacity="1" />
</linearGradient>
<path fill="url(#PSgrad_0)"><animate  repeatCount="indefinite" attributeName="d" dur="5s"values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z;M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8C48.9,198.6,57.8,191,51,171.3z;M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z"/>
</path>
</svg>
</div>

Info: Fungsi dari kode HTML diatas adalah untuk menampilkan funsgi dari tampilan animation CSS slime tersebut

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.