Banyak orang berhenti di langkah pertama karena istilahnya asing: gadget, bagian, kode. Padahal semuanya sederhana. Materi ini mengenalkan peta Blogger dan satu cara memasang kode yang Anda pakai di seluruh panduan.
Dalam Materi Ini
- 1Istilah yang wajib diketahui
- 2Cara memasang kode: lima langkah
- 3Anatomi sebuah kode
- 4Empat aturan emas menulis kode
- 5Peta lokasi: kode dipasang di mana
Istilah yang Wajib Diketahui
| Istilah | Artinya | Bayangkan seperti |
|---|---|---|
| Tata Letak (Layout) | Halaman pengaturan di Blogger. Buka dari menu kiri Blogger lalu klik Tata Letak. | Denah rumah |
| Bagian (section) | Kotak bernama di Tata Letak, misalnya Featured Posts atau Sidebar. | Ruangan di rumah |
| Gadget | Isi yang Anda tambahkan ke sebuah bagian. Di panduan ini selalu memakai gadget HTML/JavaScript. | Perabot di ruangan |
| Shortcode (kode) | Tulisan singkat berawalan kurung kurawal dan tanda dolar. Template mengubahnya menjadi tampilan. | Remote kontrol |
| Label | Kategori artikel di Blogger. Nama label di kode harus sama persis. | Rak buku |
| Modul | Fitur tambahan (hero, WhatsApp, proteksi, Next Post lanjutan). Butuh kode lisensi aktif. | Aksesori tambahan |
IntisariAnda tidak perlu menulis program. Pekerjaan Anda hanya menemukan bagian yang tepat di Tata Letak, menambahkan gadget, lalu menempel kode yang sudah disediakan.
Cara Memasang Kode: Lima Langkah
Lima langkah ini berlaku untuk hampir semua kode di panduan.
- Buka blogger.com, pilih blog Anda, lalu klik Tata Letak di menu kiri.
- Cari bagian sesuai nama yang disebut di materi (misalnya Featured Posts).
- Klik Tambahkan gadget di bagian itu, lalu pilih HTML/JavaScript. Bila gadget sudah ada, klik ikon pensil (Edit).
- Isi Judul bila diminta, tempel kode di kolom Konten, lalu klik Simpan.
- Buka blog Anda dan tekan Ctrl+F5 (di HP, tutup tab lalu buka lagi). Bila belum berubah, tunggu satu menit dan coba lagi.
Anatomi Sebuah Kode
Semua kode di panduan punya pola yang sama. Setelah paham polanya, kode apa pun terasa familiar.
Empat Aturan Emas Menulis Kode
- Pakai satu kode per gadget. Jangan dicampur.
- Tulis persis seperti contoh, termasuk huruf besar kecil:
{getPosts}memakai huruf P besar. - Tiap pengaturan berbentuk
$nama={nilai}, dipisah spasi. Nilainya tidak boleh memuat$,=, atau}. $labelharus sama persis dengan nama label di Blogger. Label yang salah menampilkan tulisan Error: No Results Found.
CatatanYang paling sering membuat pemula gagal adalah salah tempat: gadget dipasang di bagian yang salah, atau memakai tipe gadget selain HTML/JavaScript. Periksa dua hal itu lebih dulu bila kode tidak muncul.
Peta Lokasi: Kode Dipasang di Mana
Simpan tabel ini. Anda akan sering kembali ke sini.
| Nama bagian | Tipe gadget | Maks. gadget | Untuk kode |
|---|---|---|---|
| Header Menu | Daftar Link | 1 | menu turun (mega, tabs) |
| Ticker News | HTML/JavaScript | 1 | ticker |
| Featured Posts | HTML/JavaScript | 1 | Featured atau Hero |
| Kartu Berita 3 Kolom | HTML/JavaScript | 4 | blok beranda (grid) |
| Content Section 1 dan 2 | HTML/JavaScript | bebas | blok beranda |
| Sidebar | HTML/JavaScript, Daftar Link | bebas | daftar artikel, ikon sosial, Mailchimp, iklan |
| Footer Left, Center, Right | HTML/JavaScript, Daftar Link | 3 per kolom | daftar artikel, ikon sosial, WhatsApp, proteksi |
| Related Posts | HTML/JavaScript | 1 | artikel terkait |
| Post ADS 1, 2, 3 | HTML/JavaScript | 1 per bagian | iklan di artikel |
| Header ADS, Footer ADS | HTML/JavaScript | 3 per bagian | iklan |
| Konfigurasi AdSense (Kode) | HTML/JavaScript | 1 | ID unit AdSense |
| Pengaturan: Sidebar dan Next Post | HTML/JavaScript | 1 | Next Post |
| Lisensi dan Pembaruan (Kode) | HTML/JavaScript | 1 | kode lisensi |
ContohIngin menampilkan ticker berita? Lihat tabel: bagiannya Ticker News, gadgetnya HTML/JavaScript, maksimal 1 gadget. Kodenya Anda pelajari di Materi 2.1.
LatihanBuka Tata Letak blog Anda. Temukan lima bagian di tabel: Header Menu, Featured Posts, Sidebar, Footer Left, dan Related Posts. Catat apakah masing-masing sudah berisi gadget.
Tags
Panduan