2.2 Homepage Blocks, Sidebar, Footer, and Related Articles

Now that the top section is tidy, fill in the middle and side sections. You will create news blocks per category, lists in the sidebar and footer, related articles, social icons, and an email subscription form.

In This Lesson

1. 1Homepage article blocks
2. 2Sidebar and footer
3. 3Related articles
4. 4Social media icons
5. 5Email subscription form

Homepage Article Blocks

A homepage block is a row of articles from one label, for example Headline News or Announcements. You may use several blocks at once.

Place it inLayout → Kartu Berita 3 Kolom (maximum 4 gadgets, best suited for a grid) or Content Section 1 (above the main article list) or Content Section 2 (below it)

Displays a collection of articles from one label as a block on the homepage. The gadget Title becomes the block title, and a "See all" link appears automatically if the label is filled in.

Figure 7. Choosing the $type value according to the desired display form.

Ready-to-paste code

{getPosts} $results={5} $label={Berita} $type={block1}

{getPosts} $results={5} $label={Berita} $type={block2}

{getPosts} $results={4} $label={Berita} $type={list1}

{getPosts} $results={6} $label={Berita} $type={grid2}

{getPosts} $results={4} $label={Pengumuman} $type={col-left}
{getPosts} $results={4} $label={Prestasi} $type={col-right}

{getPosts} $results={5} $label={Video} $type={video}

Steps

1. Add an HTML/JavaScript gadget in one of the sections above.
2. Fill in the Title (for example Headline News) and paste one code in Content, then Save.
3. For two side-by-side blocks, create two gadgets in sequence in the same section: the first col-left, the second col-right.

What each part of the code means

Part	Meaning
block1	One large article plus a small list (fill in 5).
block2	One large article plus a two-column grid.
list1	List: small image on the left, title and summary on the right.
grid1, grid2	Card grid. grid2 is the default, with taller images. Fill in 3 or 6.
col-left, col-right	Two half-width blocks side by side.
video	For video labels. $style={2} uses a normal background; without it, a dark background.
$results, $label	Number of articles (default 3) and their source (default recent).

Figure 1. block1

Figure 2. block2

Figure 3. list1

Figure 4. grid2

Figure 5. col-left and col-right

Figure 6. video (default style)

Sidebar and Footer

The sidebar and footer contain short lists in the side column and the bottom section of the page.

Place it inLayout → Sidebar, or Footer Left, Footer Center, Footer Right (maximum 3 gadgets each)

Displays articles (or the latest comments) in a narrow column. Suitable for Latest, Popular, or Latest Comments.

Ready-to-paste code

{getPosts} $results={5} $label={recent} $style={2}

{getPosts} $results={5} $type={comments}

Steps

1. Add an HTML/JavaScript gadget in the Sidebar or a footer column.
2. Fill in the Title (for example Latest), paste the code, then Save.
3. $results is required in this section.

What each part of the code means

Part	Meaning
$style={1}	One large article plus a list.
$style={2}	List with small images.
$style={3}	Two-column small cards.
$type={comments}	Latest comments. Does not use $label.
Footer	In the footer, style 1 is automatically used as style 2.

Figure 8. style 1

Figure 9. style 2

Figure 10. style 3

Figure 11. Latest comments

Related Articles

Related articles appear below the post so readers keep reading.

Place it inLayout → Related Posts (1 gadget) → HTML/JavaScript gadget

Displays articles with the same label below the post, to encourage readers to open another page. The article currently being viewed is not shown. Only visible on article pages.

Ready-to-paste code

{getPosts} $results={3} $style={1}

Steps

1. Fill in the gadget Title with the section text, for example Read Also.
2. Paste the code in Content, then Save.

What each part of the code means

Part	Meaning
$results	Number of articles (3 or 4 works well).
$style={1}	Card grid.
$style={2}	Small grid.
$style={3}	List.

Figure 12. style 1

Figure 13. style 2

Figure 14. style 3

Social Media Icons

Social icons are made from a regular link list: you just fill in the name and address.

Place it inLayout → Topbar, Sidebar, Footer Left/Center/Right, or About Section → Link List gadget

Turns a regular link list into a row of social media icons.

Ready-to-paste code

Name: getSocial     URL: #

Name: facebook      URL: https://facebook.com/your-account

Name: instagram     URL: https://instagram.com/your-account

Steps

1. Add a Link List gadget in one of the sections above.
2. Add the first link with Name getSocial and URL #. This is a required marker and is not displayed.
3. Add the next links: fill in the Name with the icon name, the URL with your profile address. Save.

What each part of the code means

Part	Meaning
Icon name	facebook, twitter, instagram, youtube, whatsapp, telegram, tiktok, linkedin, pinterest, github, email, rss, share
Text in Sidebar	Add #Text at the end of the URL, for example https://facebook.com/account#Facebook, so the text appears next to the icon.

Email Subscription Form

This form collects reader emails via Mailchimp.

Place it inLayout → Sidebar or Footer → HTML/JavaScript gadget

Displays an email field and a subscribe button that sends the data to Mailchimp.

Ready-to-paste code

Gadget title:  {getMailchimp} $title={Subscribe} $text={Get the latest news in your email}

Gadget content:  https://your-mailchimp-form-action-address

Steps

1. In Mailchimp, open the Embedded form and copy the address in the form's action attribute.
2. In Blogger, write the code in the Title field and paste just that address in the Content field. Save.

What each part of the code means

Part	Meaning
$title	Form title. If empty, the default text is used.
$text	Explanatory sentence below the title.

ExerciseCreate one block1 block for your blog's main label, one side2 list in the Sidebar, and one Related Posts. Make sure the label names match exactly as in Blogger.