HTML5 – Page 3 – News Today Buffington

Membuat Popup Banner Dengan CSS Dan Timeout Javascript

May 5, 2019

—

by

in Blogger, CSS3, HTML5, Javascript, Trik, Tutorial, Widget

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…

Optimalkan Halaman Blog Dengan Link rel=”preload”

May 1, 2019

—

by

Mr Android

in AMP, Blogger, HTML5, SEO, Trik, Tutorial

Secara sederhana ini adalah tentang cara memberitahu browser untuk memuat lebih cepat sumber daya berbasis script tanpa penundaan.Selain dengan 3 poin yang sudah saya sebutkan pada postingan sebelumnya, trik yang satu ini penting untuk dilakukan untuk semakin mengoptimalkan kecepatan pemuatan halaman, khususnya untuk ponsel.Dengan ini kita memberitahu

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

Apr 30, 2019

—

by

Mr Android

in Blogger, CSS3, HTML5, Javascript, Trik, Tutorial, Widget

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…

Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript

Apr 25, 2019

—

by

Mr Android

in Blogger, CSS3, HTML5, Javascript, Trik, Tutorial

Untuk itu, untuk melangkapi tutorial yang ada di Kompi Ajaib, saya akan membagikan cara membuat fixed menu atau menu melayang dengan CSS dan Javascript.Javascript yang digunakannya pun hanya beberapa baris saja dan tidak memerlukan Jquery Library sehingga sangat ringan untuk digunakan di blog.Trik jenis ini sangat cocok untuk menu yang posisi awalnya berada di bawah…

Optimasi Halaman Dengan Mengganti GIF Animation Dengan Video

Apr 24, 2019

—

by

Mr Android

in AMP, Blogger, CSS3, HTML5, Trik, Tutorial, Widget

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…

Komponen AMP Bisa Dipakai Di Halaman Non AMP

Apr 4, 2019

—

by

Mr Android

in AMP, Blogger, HTML5, Trik

Jika Anda menggunakan blog non AMP, Anda bisa menggunakan komponen AMP jika Anda tertarik untuk menggunakannya.Seperti contohnya, jika Anda tertarik untuk mencoba menggunakan scroll to top AMP yang sudah saya share sebelumnya. Anda bisa memasang scroll to top AMP tersebut pada blog non AMP Anda.Yang penting dilakukan agar elemen AMP bisa dipasang di halaman non…

Social Media Sharing Buttons With CSS No JavaScript

Mar 26, 2019

—

by

Mr Android

in Blogger, CSS3, HTML5, Tutorial, Widget

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

Tentang Manifest.json Di Blogger

Mar 21, 2019

—

by

Mr Android

in Blogger, HTML5, SEO, Tutorial

Hal ini sama dengan shortcut URL blog pada zamannya sebelum ada ponsel, tapi sekarang masih banyak digunakan oleh blog-blog download. Biasanya blog download akan menyertakan shortcut URL di dalam file agar memudahkan pengguna menuju/masuk kembali ke blog mereka.Namun di zaman sekarang yang serba ponsel ini, sepertinya belum banyak web/blog yang menggunakan manifes ini. Itu karena…

Responsive Iframe Dengan Multi Server

Jan 19, 2019

—

by

Mr Android

in Blogger, CSS3, HTML5, Trik, Tutorial, Widget

Agar lebih jelas, silahkan coba pada demo JSFiddle berikut ini, klik tombol demo di bawah ini. Open FiddleJika 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”,”

Mengatasi Warning Webmaster Image Size Smaller Than Recommended Size

Jan 16, 2019

—

by

Mr Android

in AMP, Blogger, HTML5, Trik, Tutorial

Untuk itu saya terus menelusuri semua link yang diberikan tentang warning ini. Nah untuk memperbaikinya, kita harus menggunakan gambar yang lebih besar sesuai dengan pedoman Google.Untuk struktur data schema.org untuk tipe Article, NewsArticle, dan BlogPosting, untuk item ImageObject harus menggunakan gambar besar, setidaknya lebar gambar minimum 1200px dengan rasio 16:9, 4:3, atau 1:1.Jadi

Category: HTML5