Double Popup Banner Dengan CSS Dan Timeout Javascript

Sebelumnya saya sudah membagikan cara membuat popup banner dengan CSS Dan Timeout Javascript. Nah, kini saya membuat double popup banner yaitu popup ini berisi 2 buah banner dengan ditampilkan satu per satu.
Klik pada banner pertama akan memunculkan banner kedua. Saya rasa ini masih termasuk wajar, namun jika lebih dari dua banner mungkin dapat membuat kesal pengunjung.
Double popup banner ini

Membuat Particle Animation Dengan Canvas Pada AMP HTML

Padahal dengan kreatifitas dan imajinasi, kita bisa membuat halaman AMP menjadi aktraktif dan tidak kalah menarik dengan halaman web biasa yang menggunakan javascript atau jquery.
Salah satu elemen yang bisa membuat halaman web menjadi menarik dan aktraktif adalah membuat particle animation dengan canvas. Saya kadang suka main-main dengan cursor ketika menjumpai sebuah halaman dengan particle

Shrink Header on Scroll Hanya Dengan CSS Tanpa Javascript

Umumnya shrink header ini dibuat dengan CSS dan Javascript, namun kali ini kita akan membuatnya hanya dengan CSS saja tanpa Javascript.
Di sini kita akan menggunakan trik seperti pada announcement bar dengan sticky header yang sebelumnya sudah saya posting.
Kita akan membuat header tampak tinggi sebelum halaman di-scroll dan menjadi lebih pendek ketika halaman di-scroll seperti animasi di bawah

Membuat Announcement Bar Dengan Header Sticky

Umumnya announcement bar ini diletakan di paling atas pada blog dengan warna yang lebih mencolok agar mendapat perhatian pengunjung.
Kalimat yang digunakan pun biasanya tidak terlalu panjang, hanya beberapa kata namun jelas sehingga pengunjung menjadi penasaran untuk mengetahuinya lebih lanjut dengan mengklik tautannya.
Nah, kali ini kita akan membuat announcement bar dan digabung dengan sticky

Horizontal Menu Dan Mobile Full Vertical Menu Dengan CSS Saja

Tutorial ini direquest oleh sahabat Kompi Ajaib beberapa waktu yang lalu, namun baru bisa saya buatkan sekarang ini.
Jika Anda sedang belajar utak-atik template atau sedang belajar membuat template sendiri, silahkan dicoba menu horizontal ini dan silahkan ikuti langkah-langkahnya berikut ini.





1. Kode CSS Menu Horizontal
Silahkan copy kode CSS berikut dan paste di style blog Anda.

.

Menambahkan Widget Label Blogger Pada Amp-sidebar

Dan beragam cara untuk menampilkan widget label ini, dan yang paling biasa adalah menyimpan widget label di sidebar atau footer blog.
Nah kali ini kita akan menyimpan atau menambahkan widget label blogger ini pada amp-sidebar bagi blog yang menggunakan AMP HTML.
Amp-sidebar ini biasa digunakan sebagai show hide menu pada blog AMP. Dan widget label ini akan ditambahkan pada menu amp-sidebar ini

Membuat Popup Banner Dengan CSS Dan Timeout Javascript

Popup banner ini akan muncul setelah pengunjung beberapa detik membuka halaman, jadi ada waktu jeda kemunculannya setiap membuka atau merefresh halaman.
Dan tentu saja popup banner ini mudah ditutup untuk melanjutkan membaca konten dengan klik di luar banner atau pada tombol close.

Dan dengan ini kita dapat menambah penghasilan dari blog dengan menyediakan slot iklan popup banner. Banyak

Membuat Sticky Header Hide on Scroll Down dan Show on Scroll Up

Berbeda dengan tutorial sebelumnya yang membuat sticky pada menu yang berada di bawah header, kali ini kita akan memberikan efek show hide pada header yang sudah melayang. Untuk itu saya mencari cara yang hanya menggunakan CSS dan javascript, dan berikut caranya.
Jadi pada situasi awalnya, header sudah melayang dan menempel di sisi atas halaman seperti gambar berikut:

Pada header tersebut bisa

Optimasi Halaman Dengan Mengganti GIF Animation Dengan Video

Mengapa video bisa menggantikan GIF Animation untuk optimasi kecepatan loading halaman?
Karena pada dasarnya GIF Animation dan video memiliki konsep yang sama yaitu gambar bergerak. Namun di sisi lain, format video bisa memiliki size yang lebih kecil dari GIF Animation.
Berikut ini saya memilik 2 file GIF dan video dari konten yang sama dari GIPHY. File video memiliki ukuran yang jauh lebih

Social Media Sharing Buttons With CSS No JavaScript

Sebenarnya saya sudah nyaman dengan tombol AddThis yang terbilang praktis dalam menggunakannya dan memiliki counter serta lebih banyak mendukung sosial media. Namun ada beberapa hal yang membuat saya berpikir untuk membuat sendiri social media sharing button ini.
Pertama, jika saya membuat sendiri social media sharing button dengan CSS tanpa javascript, maka saya dapat mengurangi penggunaan js

Responsive Iframe Dengan Multi Server

Agar lebih jelas, silahkan coba pada demo JSFiddle berikut ini, klik tombol demo di bawah ini.




Open Fiddle
Jika Anda ingin mencobanya, silahkan ikuti langkah berikut ini:
Silahkan tambahkan CSS berikut pada style blog Anda.

.div-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","

Custom Search Engine Adsense Sesuai Label Post Atau Keyword Dalam Postingan Blog

Jawabannya tentu saja bisa. Kita bisa mengedit custom search engine agar iklan yang ditampilkan sesuai dengan label post atau bisa dengan target keyword tertentu (sebaiknya dengan keyword yang masih berhubungan dengan niche blog) dan kita menampilkannya di dalam postingan blog.
Tentu saja dengan ini kita tidak tergantung pada pengunjung yang melakukan pencarian agar melihat atau mengklik iklan