HOKAGE

Seperti kita ketahui bahwa kini kecepatan loading blog atau skor "hijau" pagespeed insight dijadikan faktor rangking di zaman index mobile sekarang ini oleh Google. Untuk memenuhi faktor rangkin itu, maka template Kompi Flexible saya update agar mendapatkan skor "hijau" di pagespeed dan lighthouse. Update kali ini merupakan update besar, bukan hanya loading blog saja yang ditingkatkan, tetapi

Bagi yang suka mengutak-ngatik kode template blog, tentu saja sudah tidak asing dengan inspect element. Tapi bagi sebagian Blogger lainnya, masih belum mengerti tentang inspect element dan cara menggunakannya. Dengan inspect element, kita bisa dengan mudah melihat kode web, mengetahui elemen-elemen yang ada di web baik untuk HTML maupun CSS. Dan dengan itu, kita bisa mengetahui dengan mudah

Seperti pada postingan saya sebelumnya tentang solusi iklan auto ads di tengah artikel blog, dengan menggunakan tag p untuk paragraf di dalam postingan blog, maka ini akan mempermudah auto ads menyisipkan iklan di dalam postingan di antara paragraf. Dengan ini kita tidak perlu lagi menggunakan script untuk menyisipkan iklan di dalam postingan, sehingga kita bisa meminimalkan penggunaan script

Biasanya kode all-head-content ditempatkan di bawah title tag blog. Jika Anda mengikuti postingan tentang cara membuat tema custom blogger dari dasar, maka Anda akan menemukan kode all-head-content lebih jelas dan juga dapat mengetahuan kode apa saja yang dihasilkan dari kode all-head-content. All-head-content Blogger ini penampakannya seperti berikut ini.

Dengan ini kita akan membuat tema custom sederhana dan selanjutnya terserah Anda untuk mengembangkannya lebih lanjut agar sesuai dengan desain yang Anda inginkan. Kemarin kita berhasil membuat blog dengan lebar penuh baik di desktop maupun ponsel, dan kini kita akan mengatur lebar blog pada tampilan desktop. Tambahkan kode berikut di bawah kode Dan tambahkan

Setelah kemarin kita berhasil membuat sebuah custom template, tetapi tampilan dan lainnya masih sangat sederhana. Untuk itu diperlukan tindakan lanjutan, salah satunya yang akan kita lakukan sekarang adalah merubah dan membuat header blogger menjadi dinamis sehingga menjadi lebih SEO friendly. Secara default, header blogger menggunakan tag H1 untuk semua halaman. Dan akan menjadi masalah jika

Contents Mulai Belajar Membuat Tema Kustom Blogger Dari Awal Membuat Halo Dunia Mulai Membuat Postingan Blog Kode-kode Tema Blogger Membuat Header Blog Membuat Sidebar Blog Membuat Footer Blog Membuat Style Untuk Tampilan Blog Menampilkan Konten Head Default Blogger Merapihkan Tampilan Tata Letak Tindakan Lanjutan Belajar Membuat Tema Kustom Blogger Dari Awal

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

Kalau kita cek semua URL yang diindeks, meski diblokir oleh robots.txt ini adalah semua halaman Search yaitu untuk halaman Search Label dan untuk halaman navigasi postingan lama. Seperti yang ditunjukan bahwa halaman-halaman tersebut diindeks, meski diblokir oleh robots.txt. Itu karena blogger menggunakan robots.txt seperti berikut: User-agent: Mediapartners-Google Disallow: User-agent: *

Setelah sebelumnya kita menerapkan script ld-json schema.org blogposting untuk halaman postingan dan halaman static, kini kita memasang script ld-json schema.org untuk halaman homepage blog. Script ld-json untuk homepage ini saya ambil contoh dari web amp.dev dan saya gabungkan dengan schema website untuk sitelink searchbox. Silahkan simpan kode berikut di atas kode

Data terstruktur yang valid dan sesuai ini penting untuk SEO. Karena jenis data terstruktur ini ada banyak, membuat blogger seperti saya menjadi bingung untuk menentukan data terstruktur yang tepat untuk jenis blog. Padahal ini cukup mudah untuk menentukan schema.org yang tepat untuk blog yaitu BlogPosting. Namun karena tidak banyak yang menuliskan cara menerapkannya pada blogspot, maka ini

Sebenarnya untuk mengatasi masalah Defer offscreen images dan Serve images in next-gen formats ini sudah ada solusinya. Namun karena keduanya perlu penanganan khusus dalam menyimpan kode HTML untuk gambar, maka banyak blogger yang mengabaikannya dengan alasan "ribet". Padahal untuk edit gambar untuk mengikuti kedua cara tadi cukup mudah, namun karena "malas" maka hal tersebut jadi "susah".

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

Di awal saya mulai berkarya membuat karya tulis, saya sering membaca blog-blog besar yang ada di internet untuk media saya belajar, salah satunya yaitu blog kompiajaib milik pak Adhy Suryadi. Dari blog kompiajaib, saya belajar tentang tutorial, trik, dan widget blogger dan juga tentang SEO. Karena saya termasuk salah satu pengunjung setia blog pak Adhy, saya penasaran dengan template

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

Error The value provided for item.id must be a valid URL ini menunjukan bahwa URL tidak terdeteksi. URL harus menggunakan tag ID agar terdeteksi dan merupakan bagian dari sebuah item breadcrumb. Berikut gambar untuk error pada breadcrumb yang menggunakan Schema.org, The value provided for item.id must be a valid URL. Kode breadcrumb dengan Schema.org yang error ini biasanya seperti berikut

Keberadaan Auto ads ini bertujuan untuk semakin memudahkan para publisher menyimpan iklan di blog, dan tentunya juga untuk meningkatkan penghasilan publisher adsense. Cukup menyimpan kode auto ads, maka kita tidak perlu repot-repot menyimpan kode iklan satu per satu. Dengan auto ads, Adsense dapat membaca struktur blog dan kemudian menempatkan iklan di tempat-tempat yang potensial. Jika

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