Blogger Theme Tutorial

Pada tutorial Bagian 2 , kita sudah berhasil mengisi area kanan header dengan deretan menu horizontal yang tampak premium saat diakses melalui perangkat desktop. Kita juga sengaja menyembunyikan menu tersebut pada layar smartphone agar tampilan blog tidak berantakan.

Pada tutorial sebelumnya , kita telah berhasil merombak fondasi header bawaan Blogger menjadi tata letak full-width (lebar penuh) dan menempatkan logo secara presisi di sebelah kiri. Namun, header tersebut masih menyisakan ruang kosong di sisi kanannya.

Setelah sebelumnya kita sukses membedah berbagai filosofi dan potensi visual dari kandidat logo sayembara perayaan kemerdekaan, sekarang saatnya kita masuk ke langkah praktik nyata di dasbor Blogger.

Blogging saat ini telah menjelma menjadi industri raksasa yang mengisi sebagian besar dari miliaran situs web di internet. Namun, kondisinya tidak selalu seperti ini sejak awal.

Dokumentasi komprehensif ini membahas seluruh aspek pengembangan tema (theme development) Blogger , mulai dari pemahaman arsitektur struktur dasar, teknik kustomisasi tingkat lanjut, proses pengujian, hingga optimasi performa. Panduan ini dirancang untuk memberikan pengetahuan mendalam yang Anda butuhkan untuk membangun tema Blogger kustom yang profesional dari nol.

SERP ( Search Engine Results Page atau Halaman Hasil Mesin Pencari) adalah halaman web yang dihasilkan oleh mesin pencari sebagai respons atas permintaan atau kueri dari pengguna.

Jika Anda menggunakan tema-tema klasik (lama) pada platform Blogger, terkadang jumlah postingan yang muncul di halaman utama saat diakses melalui perangkat seluler ( ?m=1 ) tidak akurat. Tampilan seluler sering kali mengabaikan batas jumlah artikel yang telah Anda tentukan di panel pengaturan utama blog.

Untuk menggunakan fitur Desainer Template bersama dengan CSS pada template blog Anda, terdapat beberapa panduan struktur yang harus diikuti. Menyiapkan Variabel Pada bagian <head> kode template, Anda wajib menyertakan sepasang tag <b:skin> ... </b:skin> . Deklarasi gaya CSS akan diletakkan di antara kedua tag tersebut, bersama dengan nama-nama variabel khusus yang mengintegrasikan desain Anda dengan halaman pengaturan Font dan Warna pada dasbor Blogger. Contoh Implementasi <head> ... <b:skin> <style type='text/css'> /* * Variable definitions: * <Variable name='bgcolor' description='Page Background Color' type='color' default='#fff'/> */ body { background: $bgcolor; margin: 0; padding: 40px 20px; } </style> </b:skin> </head> > 💡 Catatan: Kode deklarasi variabel CSS yang diapit oleh tag ko...

Bagian <body> pada tema tata letak Blogger terdiri dari beberapa bagian ( section ) dan widget. Bagian ( Section ) adalah bidang atau area dari halaman Anda, seperti bilah sisi ( sidebar ) dan footer . Widget adalah elemen halaman seperti halaman ( PageList ), blogroll , atau apa pun yang dapat Anda tambahkan dari tab "Elemen Halaman". Anda dapat menyertakan HTML apa pun yang disukai di sekitar bagian dalam tema. Bagian ( b:section ) Every section dalam tema Anda wajib memiliki tag pembuka dan penutup yang ditulis seperti ini: <b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section> Atribut Tag <b:section> id — (Wajib) Nama unik yang hanya boleh terdiri dari kombinasi huruf dan angka. class — (Opsional) Nama-nama class umum yang sering digunakan meliputi: "navbar" , "header" , "main" , "sidebar" , dan "foot...

Ada berbagai tag yang dapat Anda gunakan untuk menyertakan data tertentu dalam template. Semuanya akan diformat sebagai <data:name/> atau <data:name1.name2/> , dengan name adalah nama data tertentu yang ingin Anda gunakan. Dalam contoh name1.name2 , name2 merupakan item tertentu yang ada di dalam set data bernama name1 , misalnya photo.url . Karena tiap jenis widget menggunakan data yang berbeda, daftar utama dari semua data yang tersedia ini dibagi menjadi beberapa bagian berdasarkan elemen halaman: Data yang Tersedia secara Global Header Halaman Postingan Blog Arsip Blog Widget Profil Widget Teks/HTML/JavaScript Widget Feed Widget Gambar Widget Label Widget Daftar Widget Daftar Link Widget Logo Data yang Tersedia secara Global Informasi ini berlaku untuk seluruh halaman sehingga Anda dapat menggunakannya di mana saja (tidak terbatas pada widget tertentu). Data ini harus direferensikan sebagai bagian dari data "blog...