Source Code Animasi Ikon Sosial Media Menggunakan HTML Dan CSS

Source Code Animasi Ikon Sosial Media Menggunakan HTML Dan CSS
Daftar Isi Artikel

Asalamualaikum Wr Wb..
Salam Sejahtera untuk kita, Salam Hijau Hitam Untuk Sobat Hijau Hitam, Salam Kode untuk Sahabat Kodetani. :).
khusus hari ini saya ingin membagikan source code animasi lagi untuk temen temen kodetani.

Animasi kali ini adalah animasi ikon social media.
ikon social media ini biasanya terdapat di website ataupun blog. kegunaannya adalah untuk mengeshere atau membagikan tautan websita maupun blogger ke teman-teman terdekat yang ada di sosial media seperti facebook, twiter, google plus, linkedin dan masih banyak lagi.

nah.. adapun langkah awal untuk membuat animasi ikon sosial media tersebut adalah seperti biasa. yaitu membuat file index.html dan file style.css.
dimana file ini berfungsi sebagai bahasa program untuk memanggil atau menampilkan hasil dari source code yang ada di dalam file tersebut.

caranya yaitu masukan source code yang sudah saya sediakan kedalam masing-masing file. conroh : source code HTML ke dalam index.html. dan source code CSS kedalam file style.css lalu simpan di dalam satu folder. setelah itu jalankan file index.html di browser teman-teman dan lihat hasilnya.

Berikut adalah source codenya :
See the Pen animasi sosial by Yusuf Syahmuda BatuBara (@yusuf-syahmuda-batubara) on CodePen.

Selamat mencoba :)
silahkan berkreasi dengan memodifikasinya.

Salam k0detani :)
Ini Link
By Ini Link

Surat Al-Hujurat ayat 6 : يَا أَيُّهَا الَّذِينَ آمَنُوا إِنْ جَاءَكُمْ فَاسِقٌ بِنَبَإٍ فَتَبَيَّنُوا أَنْ تُصِيبُوا قَوْمًا بِجَهَالَةٍ فَتُصْبِحُوا عَلَى مَا فَعَلْتُمْ نَادِمِينَ "Wahai orang-orang yang beriman, jika datang seorang yang fasik kepadamu membawa berita, maka tangguhkanlah (hingga kamu mengetahui kebenarannya) agar tidak menyebabkan kaum berada dalam kebodohan (kehancuran) sehingga kamu menyesal terhadap apa yang kamu lakukan".

Subscribe

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>