HOKAGE

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

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

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

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

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. .

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

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

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

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

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

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","

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 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.                                    

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

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

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

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

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

Seperti kita ketahui bahwa Google Drive memang sudah menyediakan kode embed dengan iframe, namun ada sedikit yang mengganjal untuk saya khususya jika digunakan untuk embed video. Yaitu kita harus klik 2 kali untuk memutar video dan terdapat ikon link untuk preview video ke Google Drive di kanan atas player yang cukup mengganggu tampilan player. Dengan elemen video HTML5, maka kita bisa lebih

Masih ingat cara agar related post DTE supaya support HTTPS? Nah trik untuk mengubah protokol semua gambar related post DTE menjadi CDN Staticaly ini sama seperti merubahnya menjadi support HTTPS dan sebetulnya konsepnya sama seperti javascript kemarin yang untuk menggunakan CDN Staticaly dengan mudah secara otomatis pada semua gambar. Javascript related post DTE itu tampak seperti berikut