tips blogging dan tutorial desain blog

Tutorial Membuat Sosial Media DropDown Dengan HTML, CSS, & JQuery - ShareItCare Blog

Dedi
by Dedi 19:12
Hallo guys, balik lagi nih ke tutorial desain untuk blog ataupun web ^-^
Sorry juga nih, akhir-akhir ini aku jarang update blog ini karena lagi sibuk kerjaan lain :"(

Disini aku akan share koding desain sosial media dropdown yang responsif dan tampilannya elegan, hanya menggunakan HTML, CSS, & JQuery seperti judul diatas.

Oke deh, gak usah berlama-lama langsung aja ke inti pembahasannya :v

Disini kita buat dulu script HTML nya seperti dibawah ini.. save name Index.html



Saya rasa gak perlu dijelasin lagi kalian sudah paham untuk script HTML diatas kan? :v
Untuk class="sm-menu" ganti # dengan link sosial media kalian :)
Itu semua adalah kode dasar html yang mudah banget dipelajari, untuk tag script yang ada dibawah itu saya menggunakan function seperti kode java biasa ..

Tampilan awalnya akan seperti ini

Selanjutnya tinggal kita masuk ke script CSS nya.. save name style.css



Untuk script CSS ini seperti pada umumnya untuk membuat desain menjadi elegan dan JQuery serta Font yang berbeda saya gunakan agar tampilan lebih dinamis.

Tampilan akhirnya akan seperti ini
Jika kalian ingin melihat script JQuery bisa kalian lihat di cloud yang sudah di link-kan.
Diatas saya juga menggunakan script Font yang berbeda dengan cloud yang sudah di link-kan juga, saya langsung menggunakan cloud untuk memperpendek script :v

Saya menggunakan cloud JQuery dan FontAwesome, bisa kalian cek disitus resminya yaa ^-^
Bagi yang mau download source code nya saya kasih juga kok [Ngoding Kok Copy/Paste] :v

Download
Script SosialMediaDropDown.rar
Size : 1.25 KB




Sampai sini dulu share saya hari ini, semoga bermanfaat bagi temen-temen ya, jangan lupa share juga ke temen-temen kalian :v

Note: Jika ada penulisan script yang salah atau ada yang ingin ditambahkan bisa kok dikolom komentar, jika ada link broken juga bisa lapor di kolom komentar ^-^

Post a Comment

7 Comments

  1. SlankngeanApril 29, 2019 at 11:43 PM

    Mantep bang,,,makasih ilmunya

    ReplyDelete
    Replies
    1. DediApril 30, 2019 at 7:42 AM

      Jangan lupa share ke temen-temen abang juga ya ^-^

      Delete
  2. SlankngeanApril 30, 2019 at 7:17 AM

    Di scrpnya fadetogle fungsinya untuk apa??

    ReplyDelete
  3. DediApril 30, 2019 at 7:38 AM

    Metode FadeToggle() digunakan untuk memunculkan efek FadeIn() dan FadeOut() pada elemen yang sudah ditentukan, jika script diatas saya menggunakannya untuk efek klik pada elemen .sm-menu
    Syntaxnya akan seperti ini, $(selector).fadeToggle(speed, easing, callback)

    ReplyDelete
  4. SlankngeanApril 30, 2019 at 10:19 AM

    Kalo fastnya?

    ReplyDelete
    Replies
    1. DediApril 30, 2019 at 11:03 AM

      Speed: Opsional. Untuk menentukan kecepatan efek, memiliki value sebagai berikut.

      milidetik (contoh: 1000, 2000, dst).
      "slow"
      "fast"

      Easing: Opsional. Untuk menentukan kecepatan animasi pada titik tertentu, value default yang digunakan adalah "swing". Memiliki value sebagai berikut.

      "swing" bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah.
      "linear" bergerak dalam kecepatan konstan.

      Callback: Opsional. Fungsi yang akan dieksekusi setelah metode toggle(), fadeToggle() ataupun slideToggle() sudah selesai berjalan.

      Jika masih belum paham untuk PENGGUNAAN JQUERY TOGGLE, FADETOGGLE DAN SLIDETOGGLE next saya akan buatkan artikelnya ^-^

      Delete
  5. SlankngeanApril 30, 2019 at 9:12 PM

    Uh she up,,,ditunggu bang

    ReplyDelete

Boleh share, Boleh copy, tapi jangan lupa sertakan nama blognya ya ^-^