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

Widget Recent Post Untuk AMP Dengan Next Prev

Widget Recent Post Untuk AMP Dengan Next Prev yang dimaksud adalah seperti pada demo berikut:







Demo

Untuk menyimpan widget recent post ini di sidebar blog AMP, silahkan copy kode berikut ini dan simpan di antara widget di sidebar melalui EDIT HTML.


         
           
              <

Membuat Tombol Chat Whatsapp Melayang Di Blog Dengan SVG

Tombol ini saya buat dengan 2 versi yaitu menampilkan ikon dengan CSS dan menampilkan ikon dengan HTML. Tentu saja keduanya menggunakan ikon SVG.


1. Ikon dengan CSS
Dengan ini maka kode HTML menjadi lebih simpel karena tidak menggunakan kode HTML ikon SVG.

Simpan kode HTML berikut di atas kode

Cara Embed Chatango Pada Blog AMP HTML

Jika Anda ingin mencoba embed Chatango pada blog AMP Anda, silahkan ikuti langkah-langkahnya berikut ini.

Yang pertama dilakukan adalah silahkan buat chat group Chatango pada akun Chatango Anda. Untuk Embed as silahkan pilih Box dan hilangkan centang pada Full width ticker on mobile. Untuk Size silahkan pilih Responsive.

Untuk warna dan lainnya silahkan sesuaikan dengan selera Anda. Kemudian

Membuat Multi Server Video Pada Fluid Player File m3u8

Seperti pada postingan saya sebelumnya tentang cara embed file m3u8, kita bisa menggunakan plugin FluidPlayer untuk memutar video HLS m3u8. Dan ada sahabat Kompi yang menanyakan cara membuat multi server pada player m3u8 ini.

Untuk itu sebelum ini saya sudah melakukan beberapa percobaan untuk mencoba mengganti source video dengan javascript, namun gagal. Dan kemudian saya melihat ada fitur

Membuat Permalink Dengan Tombol Copy To Clipboard Untuk Blog AMP

Permalink dengan tombol Copy to clipboard untuk blog AMP ini bisa disimpan di dalam postingan, misalnya di bawah postingan.

Ini menggunakan amp-iframe, menjalankan JS kustom yang dimuat di latar belakang dengan tombol placeholder yang tetap terlihat.

Untuk demonya silahkan coba di JSFiddle berikut ini. Silakan klik ikon Copy to clipboard untuk menyalin permalink-nya.





Open Fiddle

Cara Embed File m3u8 Dengan Responsive Video HTML5

Kita bisa mengunakan plugin yang support HLS yang gratis yaitu plugin Fluid Player. Dengan ini kita bisa melakukan kustom video HTML5.

Jika Anda memiliki file m3u8 dan ingin menampilkannya di blog untuk ditonton secara online, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan simpan kode berikut ini di atas kode