HOKAGE

Untuk itu, kita gunakan skin blogger hanya untuk halaman layout, sehingga tidak akan menyebabkan error validasi HTML5 ataupun AMP HTML. Skin Blogger Apa sih skin blogger itu? Skin blogger adalah sebuah tag untuk CSS custom blogger dengan kode dan penampakannya pada HTML menjadi

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

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

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

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

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 AMP yaitu menyimpan librari ini

Sebenarnya hal ini (URL amp=1) sudah saya coba cukup lama pada blog Bloggue.web.id dan tidak langsung membagikan update template Kompi Minimalis AMP. Saya harus coba dulu penggunaan URL amp=1 ini, melihat kemungkinan error atau notice tentang AMP di Google Search Console. Dan ternyata sampai saat ini tidak ada notice error pada AMP di console. Untuk itu kini saya bagikan sebagai update template

Oleh karena itu, untuk kesabarannya menunggu update tema Kompi Ajaib AMP HTML, saya kasihkan TEMA YANG SEKARANG DIGUNAKAN. Ya... tema yang sekarang digunakan di Kompi Ajaib ini. DEMO Lha... katanya gak dijual kang? Tadinya iya, tema yang digunakan sekarang ini tidak akan saya jual meski saya tahu ada yang clonning dan menjualnya. Tapi setelah dipikir cukup lama dan saat ini saya belum ada

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

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.                                    

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

Dan postingan kali ini saya buat untuk menjawab pertanyaan pengguna Template dengan AMP hanya di URL mobile, khususnya Template AMP dari Kompi Ajaib yaitu cara menyimpan iklan Adsense di sidebar blog AMP. Untuk menyimpan iklan Adsense di sidebar blog AMP, silahkan copy kode berikut ini dan simpan di antara widget di sidebar melalui EDIT HTML.          

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

Mengupload video di Blogger ini sangat mudah, yang jelas harus disiapkan file videonya misal dengan format MP4. Silahkan klik ikon upload video di bar atas di editor postngan pada mode compose seperti gambar berikut. Silahkan upload video Anda. Setelah proses upload video selesai, silahkan alihkan editor post ke mode HTML untuk mendapatkan kode videonya. Biasanya kodenya akan tampak seperti

Sebenarnya saya sebelumnya sudah membuat tab panel dengan jquery namun tentu saja tidak bisa digunakan pada amp html. Kemudian saya kembali membuat tab panel hanya dengan CSS saja agar bisa digunakan oleh blog amp dan non amp. Dan kini kita akan membuat tab panel khusus untuk blog amp dengan amp-selector. Kita juga akan menambahkan fungsi read more pada content tab panel dengan memanfaatkan

Tool chat ini saya temukan dari tlk.io, penggunaannya cukup simple dan tidak perlu mendaftar. Anda hanya perlu membuat channel maka ruang chatting pun telah siap digunakan. Anda tinggal membagikan URL ruang chat Anda ke teman Anda untuk bergabung di dalam ruang chat. Dan widget chat dari talk.io ini pun bisa di-embed di dalam web atau blog. Untuk itu kini saya buatkan widget chat dari tlk.io

Untuk memperbaiki item data terstruktur tidak ada atau tidak valid (Missing or invalid structured data item) pada halaman AMP ini, kita harus merubah struktur data yang sudah ada menjadi sesuai anjuran AMP. Yang pertama dilakukan adalah menghapus semua elemen schema.org seperti atau mirip seperti berikut ini. itemprop='mainContentOfPage' itemscope='itemscope' itemtype='https://schema.org/...

Widget recent comments Disqus berfungsi untuk menampilkan komentar Disqus terbaru sehingga ini akan lebih memudahkan untuk mengelola komentarnya. Admin blog akan menjadi lebih mudah untuk menjawab pertanyaan-pertanyaan yang diajukan pengunjung pada kolom komentar. Tinggal klik maka akan masuk ke halamannya. Nah kali ini saya akan membagikan sebuah widget recent comments Disqus untuk blog AMP

Tentu saja ini menjadi sebuah kabar gembira untuk pengguna AMP HTML dengan adanya share button AddThis. Karena dengan ini kini kita bisa menampilkan counter atau jumlah sharing sosial media dengan desain yang eye catching. Share button AddThis pun memberikan kemudahan untuk kustomisasi tombol-tombol share sosmed apa saja yang ingin ditampilkan, termasuk dengan warna, bentuk, dan lainnya. Nah

Karena seperti kita ketahui bahwa gambar dengan format WebP sebagaimana dianjurkan oleh Google dapat mempercepat proses pemuatan gambar oleh browser sehingga halaman menjadi lebih ringan ketika diakses. Untuk itu kita perlu mengakali penggunaan thumbnail Youtube dengan menggunakan format WebP. Seperti telah kita ketahui bahwa kita bisa mendapatkan thumbnail Youtube dengan mudah dengan format