Tak terasa, bulan ramadhan telah kembali tiba, padahal rasanya baru kemarin saja melaluinya. Dan alhamdulillah, akhirnya tahun ini kita masih dapat dipertemukan kembali dengannya dalam keadaan penuh kebaikan. Meskipun mungkin ada beberapa perbedaan antara ramadhan di tahun ini dengan ramadhan di tahun sebelumnya, seperti misalnya bertemu bulan ramadhan di perantauan, merasakan ramadhan dengan orang yang baru dipertemukan, atau mungkin tak lagi menjalankan ibadah ramadhan dengan orang yang dulu selalu mengingatkan, apapun perbedaan yang dirasakan, semoga itu tak mengurangi antusias dan kekhusyukan dalam menjalankan ibadah di ramadhan tahun ini (amin...).

NgeShare - Bukber


Yossshaaa! Pada kesempatan kali ini, saya akan membagikan tutorial mengenai cara memasang efek hover rubberBand di icon sidebar blog. Oh, iya, btw, apa itu efek hover rubberBand? Oke, efek hover rubberBand itu merupakan efek yang dapat mengubah warna sekaligus dapat menimbulkan efek memantul pada suatu objek atau elemen di blog atau website. Untuk lebih jelasnya mengenai efek hover ini, mungkin alangkah baiknya kamu melihat terlebih dahulu contohnya dengan menekan tombol result di bawah ini.


Oke, bagaimana? Sudah paham kan mengenai efek hover ini? Bila sudah dan mungkin kamu tertarik untuk memasang efek hover ini di sidebar blogmu, maka kamu dapat mengikuti tutorial saya kali ini. Baik, tanpa perlu basa basi lagi, simak tutorialnya di bawah ini.

Cara Memasang Efek Hover RubberBand di Icon Sidebar Blog


Sebelum kamu dapat memasang efek hover ini, pastikan kamu telah memasang icon dari FontAwesome pada judul siderbar blogmu. Jika belum, kamu dapat memasangnya terlebih dahulu seperti yang saya lakukan pada tutorial saya yang berjudul Cara Memasang Icon di Samping Judul Widget Blog.

Oke, kalau kamu sudah memasang icon pada judul sidebar blogmu, kamu dapat mulai memasang efek hover ini dengan langkah pertama, yaitu mengcopy kode di bawah ini.
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: 1;
transition:all .6s

Lalu pastekan atau letakkan kode tersebut di dalam kode elemen  sidebar h2:after  atau   sidebar h2:before , contoh pemasangannya seperti di bawah ini.
.sidebar h2:after{content:'\f005';
font-family:fontawesome;
font-size:1.2rem;
font-weight:normal;
float:right;
margin:0 0 0 15px;
color:#a4b0be;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: 1;
transition:all .6s}

Setelah itu, kamu buat kode pemanggil hover untuk  sidebar h2:after  atau  sidebar h2:before tersebut. Kode pemanggil hover tersebut dapat kamu buat seperti contoh kode di bawah ini.
.sidebar:hover h2:after{
color:#f1c40f;
animation:rubberBand 1s}

Jika kamu telah selesai membuat kode pemanggil hover untuk  sidebar h2:after  atau  sidebar h2:before , maka langkah selanjutnya yang harus kamu lakukan adalah mengcopy kode di bawah ini.
/* -------------------------------
ANIMATION
----------------------------------*/
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

Kemudian, kamu pastekan atau letakkan kode tersebut di bawah kode  <style> .

Jika sudah, maka kamu dapat melakukan langkah terakhir dalam tutorial ini, yaitu dengan menekan tombol “Simpan” pada fitur Edit HTML template blogmu, dan lihat hasilnya.

Baik, sekiranya itu tutorial dari saya kali ini. Seperti biasa, bila kamu memiliki pertanyaan atau saran yang ingin kamu sampaikan kepada saya terkait tutorial ini ataupun blog ini, kamu dapat menyampaikannya dengan menuliskannya di kolom komentar diqsqus yang terletak di bawah tutorial ini. Semoga bermanfaat ya!

NgeShare - Memasang Efek Hover RubberBand di Icon Sidebar Blog


Pada kesempatan kali ini, saya ingin membagikan tutorial mengenai cara memasang font Google Sans di blog. Bila kamu sedang memiliki keinginan untuk mempercantik tampilan blogmu, barangkali font ini dapat kamu gunakan sebagai referensi. Oke, tanpa banyak basa basi, langsung saja ikuti langkahnya berikut ini.

NgeShare - Memasang Font Google Sans di Blog


Beberapa waktu yang lalu saya mendapat notifikasi dari WPS Office tentang update baru dari aplikasinya. Yah, mumpung paketan internet sedang memadai, saya akhirnya memutuskan untuk mengunduh update terbaru dari aplikasi tersebut. Alhasil, WPS Office yang sebelumnya terpasang di Lubuntu saya, yaitu versi 10.1.0.6758 (tahun 2016) telah berganti menjadi versi 11.1.0.8392 (tahun 2019). Dari update baru ini, saya melihat adanya beberapa perubahan maupun perbaikan, yang pertama jelas sangat mencolok perubahannya adalah pada tampilan atau skin barunya yang menurut saya lebih smooth dari versi sebelumnya, kemudian adanya menu “Special Features” yang memungkinkan pengguna untuk mengubah ekstensi dokumennya menjadi ekstensi pdf, telah support dengan gambar berekstensi SVG, adanya perbaikan bug pada cloud dokumen, SmartArt yang telah didukung dengan 97 jenis penyisipan dan pengeditan gambar, dan masih banyak lagi (selengkapnya bisa kamu lihat di sini).

NgeShare - Update WPS Office 2019

NgeShare - Pergi


SVG (Scalable Vector Graphics) merupakan format gambar yang menggunakan XML sebagai dasar untuk membentuk gambar vektor dua dimensi. Proyek yang telah dikembangkan oleh W3C (Word Wide Web Consortium) sejak tahun 1999 ini, memiliki ukuran yang lebih kecil dan dapat dikompresi bila dibandingkan dengan format gambar JPEG dan GIF. Selain itu, SVG memiliki sifat yang scalable atau dapat diresizing.

NgeShare - Memasang Icon SVG di Posting Blog


Whisper of The Heart (耳をすませば), sebuah film animasi bergenre romantis dari Jepang yang dibuat oleh “Studio Ghibli”. Film yang pertama kali dirilis pada tahun 1995 ini, menceritakan tentang kehidupan seorang gadis SMP bernama “Shizuku Tsukishima”. Pada suatu ketika, ia bertemu dengan seorang pemuda bernama “Seiji Amasawa” yang tak lain adalah teman sekolahnya. Pertemuan keduanya yang disebabkan oleh kegemaran Shizuku, yaitu membaca buku membuat mereka pada akhirnya saling jatuh cinta dan memotivasi keduanya untuk saling mendukung dalam meraih cita-citanya. Ya, cita-citanya, Seiji yang bercita-cita ingin menjadi seorang pengrajin biola, sedangkan Shizuku yang bercita-cita ingin menulis novel.

NgeShare - Quote Film Whisper of The Heart