Cerita Sebelum Pulang.

Cara Menambahkan Link Sumber Otomatis di Blogger

Postingan ini telah tayang di sadhi.web.id dengan judul NgeShare - Cara Menambahkan Link Sumber Otomatis di Blogger, Klik untuk baca: https://www.sadhi.web.id/2024/01/ngeshare-cara-menambahkan-link-sumber.html.

Hmmm...rasa-rasanya sudah cukup lama saya tidak menuliskan sesuatu di blog ini. Yah, mohon maklum, karena rutinitas sebagai seorang freelancer sekaligus jobseeker, membuat saya sejenak vakum dari blog ini (ceileh). Namun, mumpung hari ini sedang tidak ada deadline maupun jadwal wawancara kerja, dan juga ada sedikit bahan untuk ditulis, maka saya menyempatkan waktu untuk mengupdate artikel di blog ini.

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.

• Result

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.

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.

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.

Yosh! Pada kesempatan kali ini, saya akan membagikan tutorial tentang cara memasang emoji di judul artikel blog.

Oke, pada kesempatan kali ini, saya akan membagikan tutorial mengenai cara memasang tombol reaksi di blog. Tutorial ini nantinya akan menghasilkan tombol reaksi seperti gambar di atas. Oh, iya, tombol reaksi yang akan saya gunakan pada tutorial ini berasal dari ShareThis, so tutorial kali ini lebih tepatnya mengenai cara memasang tombol reaksi dari sharethis di blog (hehehe...). Oke, tanpa perlu panjang lebar, kita simak tutorial, yuk!

Mumpung lagi dapat inspirasi nih, pada kesempatan ini saya akan membagikan tutorial tentang cara memasang Google Maps di posting blog. Tutorial ini seperti yang pernah saya aplikasikan di posting/ artikel saya yang berjudul NgeShare - Dolan Jilid 2 "Candi Cetho", tahap demi tahap sama persis dengan yang ada di tutorial ini tanpa imbuhan apapun, hehehe.... Kalau ada yang penasaran tentang caranya, ya bisalah menyempatkan diri untuk melihat tutorial berikut ini. :)

Ini nih yang lagi ngetrend-ngetrendnya di blogger, yaitu tampilan menu navigasi yang kalau setiap kali blog di scroll ke bawah, pasti menu navigasinya akan tetap muncul atau melayang. Berkat blogwalking ke blog atau website sana sini yang menampilkan menu navigasinya seperti itu, saya jadi kepengen untuk mencobanya juga di blog saya ini. Dan alhamdulillah akhirnya berhasil dan tampilan blog menjadi lebih dinamis (kalau menurut saya). Bisa dilihat kan kalau menu navigasi di blog saya ini selalu ada dan melayang kalau setiap kali discroll ke bawah, hehehe...

Oke-oke, saya akan dengan senang hati membagikan cara mudahnya.

Suatu hari, gue lagi mampir ke sebuah blog. Blog seorang penulis yang tulisan-tulisanya keren (menurut gue), yang seorang anak basket yang katanya gak digandrungi, yang nama akun twitternya @landakgaul, yang juga salah satu admin di Nyunyudotcom. Pasti kamu udah tau kan itu siapa? "Dara Prayoga", ya itulah namanya. Dia juga salah satu penulis favorit gue.

Kalau setelah ganti template blog, apa sih yang kamu lakuin? Langsung bikin artikel, atau langsung matiin komputer kamu? Hehehe...

Kalau gue sih masih stand by sama HTML template yang baru aja gue terapin ke blog gue. Lha kok gitu? Iya gitu soalnya setiap kali gue ganti template, biasanya gue selalu menjumpai 3 hal yang menurut gue cukup mengganggu tampilan blog gue. Apa saja sih? Nih di bawah ini gue kasih listnya.