Tombol Back to Top dengan Efek Animasi Roket Meluncur

Tutorial berikut berguna untuk menghias tampilan blog menjadi lebih menarik. Kalau biasanya tombol back to top hanya berupa ikon panah, maka di artikel ini akan sangat berbeda. Kita akan menggunakan ikon roket yang diberi efek meluncur ke atas.

Baca Juga: Tombol Back to Top Smooth Scroll Hanya dengan CSS
Rocket Launch Back to Top Button Smooth Animation1. Pastikan di blog kamu sudah terpasang

Membuat Tombol Smooth Back To Top Hanya Dengan CSS

Kali ini ada satu trik sulap lagi yang hanya mengandalkan CSS. Lumayan bisa menjadi alternatif dari Javascript yang agak ribet. Untuk trik kali ini adalah membuat tombol smooth scroll back to top dengan CSS. Kalau biasanya dibuat dengan JS atau library jQuery, maka kali ini akan sangat berbeda.

Kita akan memanfaatkan property yang bernama scroll-behavior. Property CSS ini memungkinkan kita untuk

Membuat Syntax Highlighter di Blogger dengan CSS

Syntax highlighter adalah text editor yang menyoroti penulisan markup kode pada halaman web untuk mempermudah pengunjung mengenali keseluruhan kodenya. Umumnya ditemukan pada blog bertema tutorial seperti igniel.com. Selain itu dapat merapikan huruf dan membuat pengunjung dapat dengan mudah membedakan mana yang merupakan kode CSS, HTML, atau Javascript dengan tulisan biasa.

Umumnya syntax

Cara Menggunakan Google Font di Blog

@import url('https://fonts.googleapis.com/css?family=Lobster|Pacifico|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');

1. Pengenalan
2. Pilih Font
3. Tambahkan Script Ke Blog
3.1. Melalui Script Standar
3.2. Melalui Import CSS
4. Cara Menggunakan Google Font
5. Contoh Google Font

1. PengenalanPemilihan font sangat penting untuk tampilan sebuah website maupun blog. Jika

Cara Mengubah Warna dan Gaya dari Huruf dan Baris Pertama Tulisan di Blog

@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash'); #firstline::first-letter, #firstline2::first-letter {float:left; font-size:80px; font-weight:600; line-height:1; margin-right:16px;} #firstline::first-line, #firstline2::first-line {color:#cd1c1f;} #firstline2::first-letter {font-family:'Berkshire Swash', cursive;}
Apakah kamu memperhatikan ada hal berbeda dalam paragraf

Cara Membuat Progress Bar Pelangi (Gradasi Warna) Di Blog

Kalau kamu buka Instagram via website, pasti nemu garis berwarna-warni yang selalu muncul di atas dan akan hilang ketika halamannya selesai termuat sepenuhnya. Itulah yang disebut dengan progress bar gradient color Instagram.

Saya kepikiran bikin artikel ini karena kemarin baru aja bahas soal background gradient color animation CSS. Biar nyambung aja gitu, karena sama-sama membuat efek pelangi

Membuat Background Gradasi Warna Bergerak (Gradient Color Animation Pure CSS)

Belakangan ini lagi rame pemakaian background gradient color animation CSS di blog ya kalo saya liat. Kebetulan ada beberapa orang yang nanya cara bikinnya (padahal saya nggak pake). Daripada dijawab satu-satu, mending langsung dibikin tutorialnya. Caranya surprisingly simple karena hanya dibuat menggunakan CSS aja. Yap, kita nggak butuh Javascript segala karena CSS udah bisa melakukan animasi

Membuat Kotak Spoiler Keren Dengan CSS (Tanpa Javascript)

Spoiler box adalah sebuah kotak yang berfungsi menyembunyikan konten dan baru dimunculkan ketika user melakukan klik pada tombol. Umumnya spoiler box tampil dengan gaya buka / tutup, sebagian ada yang menyebutnya show / hide. Kebanyakan dibuat menggunakan Javascript atau jQuery karena lebih mudah. Tapi bisa kok membuat spoiler box buka tutup di blog cuma pake CSS aja. Kok mesti pake versi CSS?

Tombol Share Ke Media Sosial Dengan Counter

Jaman sekarang, media sosial nggak bisa dipandang sepele. Bukan sekedar tempat berkomunikasi dengan orang-orang, tapi lebih dari itu. Dia menjadi media penyebaran informasi yang cukup cepat dan efisien. Sering banget satu hal menjadi viral dan terkenal se-Indonesia (bahkan sedunia) berkat banyaknya orang yang membagikan topik tersebut di media sosialnya. Memang apasih efek bagusnya kalau blog

Mengenal Teknik Shorthand Pada CSS

Apa itu Shorthand CSS? Teknik shorthand adalah cara mempersingkat penulisan kode CSS (Cascading Style Sheets) yang memungkinkan untuk menetapkan nilai beberapa property secara bersamaan. Teknik ini dapat menghemat karakter, menghemat energi, dan tentu saja menghemat waktu. Kode jadi terlihat lebih rapi dan efisien (dan seringkali lebih mudah dibaca). Metode penulisan model shorthand dapat

Membuat Tulisan Tidak Bisa Diseleksi Untuk Mencegah Copy Paste Pure CSS

Gimana perasaan kamu kalau artikel yang sudah dibuat susah payah akhirnya didupikat orang lain? Sakit hati dan kesel kan?! Nggak sedikit dari mereka yang sadis banget, yaitu copy paste tulisan blog tanpa dimodifikasi sedikitpun. 100% sama dengan artikel aslinya. Akhirnya kamu nggak bisa berbuat banyak selain melapor pada Google dan berharap blog sang pengcopy paste terkena penalti. Kalau hal itu

Tombol Menuju Chat Langsung Ke Berbagai Messaging App Ala Igniel

Messaging App adalah aplikasi untuk bertukar pesan. Misalnya WhatsApp, Line, Telegram, Facebook Messenger, BBM, dan lain sebagainya. Kita lebih mengenalnya dengan sebutan "aplikasi chat". Penting nggak sih mencantumkan kontak yang langsung mengarah ke messaging app di blog? Sangat penting! Apalagi buat kamu yang bikin blog dengan tujuan untuk mencari uang. Entah itu jual jasa maupun jual barang

Mempercepat Blog #2 - Hapus Javascript, CSS, dan Widget Bundle Bawaan Blogger

Masalah umum yang selalu ada di sebagian besar template adalah tersisipnya Javascript, CSS, dan Widget Bundle bawaan Blogger. Sebagian besar pengguna malah nggak sadar ada script begituan. Nggak aneh, soalnya emang NGGAK ADA di pengaturan HTML. Mereka berdua nggak tertulis. Otomatis gitu lho dari Google sana. Script ini cuma bisa keliatan di source code. Buat liat source code ini, tinggal ketik

Mempercepat Blog #1 - Icon SVG Sebagai Pengganti Font Awesome

Penggunaan Font Awesome pada blog udah jadi hal yang lumrah. Apa sih Font Awesome? Dia adalah font khusus yang berfungsi sebagai icon. Jadi kamu udah nggak perlu tuh pake gambar berekstensi .jpg / .png / .gif kalau mau pasang icon di blog. Cukup sisipkan Font Awesome didalamnya. Tapi, udah pasti ada plus minusnya dong dari penggunaan Font Awesome ini.

1. Kelebihan dan Kekurangan Font Awesome

Teknik Dasar Membuat Menu Navigasi Dropdown Dengan CSS

Saya selalu pengen bikin tutorial tentang edit template, mempercantik blog, dan hal-hal lain yang berhubungan dengan tampilan antar muka / user interface. Tapi selalu berujung males, karena struktur blog setiap orang pasti berbeda. Belum tentu yang saya tulis akan berhasil 100% di template masing-masing.

Tapi kali ini saya mau coba bikin. Tutorialnya banyak beredar diluaran sih, tapi semoga

Widget Author Box ala Igniel dengan Resume Skill Singkat

Kali ini saya akan membagikan sebuah widget yang sebenarnya cukup pasaran, yaitu author box. Bedanya, author box ala Igniel ini dilengkapi dengan short resume, alias rangkuman keahlian atau skill yang dimiliki. Jadikan author box kamu nggak sekedar keren-kerenan doang, tapi sekaligus berfungsi sebagai media untuk mempromosikan diri. Terbukti dengan datangnya beberapa orang yang menyewa jasa