Author Box in Blogger: Show Your Photo, Bio and Social Links Under Every Post

Readers trust a post more when they know who wrote it. The Areeb theme adds an author box at the end of every post, right before Related posts: your photo, your name, a short bio, your social links and one button. It's built in; you only switch it on and fill in your details.

What the author box shows

Part	Where it comes from
Photo and name	The author of the post, from their Blogger profile
Small line above the name	The title of the bio gadget ("Written by" by default)
Bio	The content of the bio gadget
Button	The first link in the links gadget
Social icons	The other links in the links gadget

Photo and name follow the post's author. On a blog with several writers, each post shows its own author.

Turn it on

1. Open LayoutIn Blogger, go to Layout.
2. Find the sectionScroll to Post — Author box (between the post and Related posts). It holds two gadgets: Written by (the bio) and Author box — button + social links.
3. Show both gadgetsClick the eye icon on each one, then Save. The box appears at the end of every post.

Both gadgets are locked: you can edit, show or hide them, but not delete them. Hide both and the author box disappears.

Set your photo and name

These come from your Blogger profile, not from the theme.

1. Open SettingsIn Blogger, go to Settings › User profile and choose the Blogger profile (not the Google profile).
2. Fill in your detailsSet your Display name and upload a square Profile photo (150×150 or larger).
3. SaveClick Save Profile. Every post you wrote picks up the new photo and name.

Write your bio and the label

In Layout, click the pencil on the Written by gadget.

• Title is the small line above your name. Keep "Written by", or type something else like "About the author". Leave it empty to hide the line.
• Content is your bio. One or two sentences read best.

I write simple guides about Blogger themes, design and page speed.

Edit the button and social links

Click the pencil on Author box — button + social links. It is a normal link list:

• The first link is the button. Its name is the button text, its URL is where it goes. By default: About me → /p/about.html.
• Every link after it is a social icon. Add, remove or reorder them freely.

The icon is picked from the link address:

Link contains	Icon
facebook.	Facebook
instagram.	Instagram
youtube. / youtu.be	YouTube
x.com / twitter.	X
t.me / telegram.	Telegram
wa.me / whatsapp.	WhatsApp
mailto:	Email
blogger. / blogspot.	Blogger
anything else	Link

The link name becomes the tooltip, for example Instagram.

Use your own icon

For a network that isn't on the list, put the icon in the link name, followed by the label:

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="…"/></svg> TikTok

Or reuse one of the theme's icons by name:

{brand.telegram} My channel

Use currentColor for stroke or fill so the icon follows light and dark mode.

Pasted SVG is cleaned for safety: scripts, event handlers and outside links are removed, only the shape stays.

On phones

On small screens the photo and name share one row, and the bio, icons and button sit below them. Nothing to set up.

Also in the sidebar

The same links idea powers the About me card in the sidebar (Layout › Sidebar — Widgets). That one uses Blogger's Profile gadget, so its photo, name, location and bio come from your Blogger profile, and its social links come from About me — social links. Custom icons work there too.

Quick reference

You want	Do this
Show the box	Layout › Post — Author box › eye on both gadgets
Hide the box	Hide both gadgets
Change photo / name	Settings › Blogger profile
Change "Written by"	Title of the Written by gadget
Change the bio	Content of the Written by gadget
Change the button	First link in the links gadget
Add a social icon	Add a link after the first one
Custom icon	<svg…>…</svg> Name or {brand.x} Name in the link name