Many people stop at the first step because the terms feel foreign: gadget, section, code. Yet everything is simple. This lesson introduces the Blogger map and one way of installing code that you will use throughout the guide.
In This Lesson
- 1Terms you must know
- 2How to install code: five steps
- 3Anatomy of a code
- 4Four golden rules for writing code
- 5Location map: where code is installed
Terms You Must Know
| Term | Meaning | Think of it as |
|---|---|---|
| Layout (Tata Letak) | The settings page in Blogger. Open it from the left menu in Blogger, then click Layout. | A house floor plan |
| Section (Bagian) | A named box in the Layout, for example Featured Posts or Sidebar. | A room in the house |
| Gadget | Content you add to a section. This guide always uses the HTML/JavaScript gadget. | Furniture in a room |
| Shortcode (kode) | Short text starting with curly braces and a dollar sign. The template turns it into a display. | A remote control |
| Label | An article category in Blogger. The label name in the code must match exactly. | A bookshelf |
| Module | Additional features (hero, WhatsApp, protection, advanced Next Post). Requires an active license code. | Extra accessories |
Key TakeawayYou don't need to write programs. Your job is only to find the right section in the Layout, add a gadget, then paste the code that has been provided.
How to Install Code: Five Steps
These five steps apply to almost every code in the guide.
- Open blogger.com, select your blog, then click Layout in the left menu.
- Find the section matching the name mentioned in the lesson (for example Featured Posts).
- Click Add a gadget in that section, then select HTML/JavaScript. If a gadget already exists, click the pencil icon (Edit).
- Fill in the Title if asked, paste the code in the Content field, then click Save.
- Open your blog and press Ctrl+F5 (on a phone, close the tab and reopen it). If it hasn't changed, wait a minute and try again.
Anatomy of a Code
All codes in the guide follow the same pattern. Once you understand the pattern, any code will feel familiar.
Four Golden Rules for Writing Code
- Use one code per gadget. Don't mix them.
- Write it exactly as in the example, including upper and lower case:
{getPosts}uses a capital P. - Each setting takes the form
$name={value}, separated by spaces. The value must not contain$,=, or}. $labelmust match the label name in Blogger exactly. A wrong label displays the text Error: No Results Found.
NoteThe most common reason beginners fail is the wrong placement: the gadget is installed in the wrong section, or a gadget type other than HTML/JavaScript is used. Check those two things first if the code doesn't appear.
Location Map: Where Code Is Installed
Save this table. You will often come back here.
| Section name | Gadget type | Max. gadgets | For code |
|---|---|---|---|
| Header Menu | Link List | 1 | dropdown menu (mega, tabs) |
| Ticker News | HTML/JavaScript | 1 | ticker |
| Featured Posts | HTML/JavaScript | 1 | Featured or Hero |
| Kartu Berita 3 Kolom | HTML/JavaScript | 4 | homepage blocks (grid) |
| Content Section 1 and 2 | HTML/JavaScript | unlimited | homepage blocks |
| Sidebar | HTML/JavaScript, Link List | unlimited | article lists, social icons, Mailchimp, ads |
| Footer Left, Center, Right | HTML/JavaScript, Link List | 3 per column | article lists, social icons, WhatsApp, protection |
| Related Posts | HTML/JavaScript | 1 | related articles |
| Post ADS 1, 2, 3 | HTML/JavaScript | 1 per section | ads in articles |
| Header ADS, Footer ADS | HTML/JavaScript | 3 per section | ads |
| AdSense Configuration (Code) | HTML/JavaScript | 1 | AdSense unit ID |
| Settings: Sidebar and Next Post | HTML/JavaScript | 1 | Next Post |
| License and Updates (Code) | HTML/JavaScript | 1 | license code |
ExampleWant to display a news ticker? Check the table: the section is Ticker News, the gadget is HTML/JavaScript, maximum 1 gadget. You'll learn the code in Lesson 2.1.
ExerciseOpen your blog's Layout. Find the five sections in the table: Header Menu, Featured Posts, Sidebar, Footer Left, and Related Posts. Note whether each one already contains a gadget.
Tags
Guide