HOKAGE

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

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

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

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

Mode fullscreen umumnya dipakai pada sebuah embed, misalnya embed sebuah video. Namun kali ini kita akan membuat mode fullscreen untuk sebuah halaman web. Namun kita tidak bisa membuat fullscreen otomatis ketika halaman dibuka, karena saat ini browser akan mengabaikannya. Jadi fullscreen ini harus ada keterlibatan user dengan aksi mengklik sebuah tombol fullscreen, mudahnya dengan menekan

Scroll indicator ini mungkin mirip dengan loading indicator yang sama-sama disimpan di atas blog dan persentasinya ditunjukan dengan warna yang akan semakin bergeser ke kanan jika halaman terus discroll ke bawah dan bergeser ke kiri jika halaman discroll ke atas. Scroll indicator ini menggunakan javascript, hanya beberapa baris javascript dan tidak memerlukan Jquery Library karena ini pure

body tag adalah tag terluar dari sebuah struktur HTML sebuah halaman web, dan HTML tag adalah tag terluar dari sebuah halaman web. Untuk itu, menambahkan class pada body maupun html dapat mempermudah melakukan tindakan pada elemen-elemen yang ada di dalamnya. Menambahkan class pada body maupun html tag lazimnya dapat dilakukan dengan 2 situasi, yaitu dengan onscroll dan onclick event.

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

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 header. Artinya, posisi

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

Hal itulah yang sekarang saya coba pada blog Kompi Ajaib ini. Demi tampilan yang sederhana dan bersih, saya menghilangkan scroll bar. Jika Anda menggunakan browser Firefox atau Chrome, maka Anda tidak akan melihat scroll bar pada postingan maupun pada sidebar. Namun keduanya tetap bisa digulirkan. Menghilangkan scroll bar ini tentu saja masih menjadi pro dan kontra, tetapi saat ini kita tidak

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