Welcome to the Perzen blogger template documentation!

Perzen is a personal blogger template that brings a fresh, clean, and minimalistic vibe to your blog. This step-by-step guide ensures a seamless installation, setup, and customization process for the Perzen blogger template.

Let's dive in! 🚀

📥 Download: Perzen Personal Blogger Template

1. Installation

📝 Please refer to our detailed guide: How to Install Blogger Template

2. Site Settings

Customize your site feed preferences, enable lazy load & WebP images, set up a high-resolution favicon, and site cover.

2.1. Site Feed

  1. Go to Blogger dashbaord > Settings
  2. Find Site feed section
  3. Click on the Allow blog feed and choose Full
  4. Save

Blogger Site Feed Settings

2.2. LazyLoad & WebP Images

  1. Go to Blogger dashbaord > Settings
  2. Find Posts section
  3. Toggle to enable Lazyload and Webp Images

Enable Lazyload and WebP Images

2.3. Favicon & Site Cover

  1. Go to Blogger dashbaord > Themes
  2. Locate the Customization button and click on the down arrow
  3. Find the b:skin section in the HTML editor
  4. Locate the code below and insert your favicon and cover image URL in the value parameter.

Setup Favicon and Site Cover

3. Customization

Easily customize background, colors, fonts, layout, fixed header, boxed mode, sticky sidebar, and more.

3.1. Theme Options

  1. Go to Blogger dashbaord > Themes
  2. Click on the Customization button
  3. Under Advanced, click on Theme Options
  4. Enable or disable each available features by adjusting their values.
  5. Save.

Theme Options

3.2. Colors and Fonts

  1. Go to Blogger dashbaord > Themes
  2. Click on the Customization button
  3. Under Advanced, click on Theme Colors or Theme Fonts
  4. Now, customize the colors and fonts you like.
  5. Save.

Customize Colors and Fonts

Add your brand logo, setup site menu, and implement dropdown or mega dropdown options in your site's header.

  1. Go to Layout
  2. Locate Site Logo section and click on the edit icon
  3. Upload your site logo using the available options.
  4. Put your site dark logo image URL in the link field. (Premium)
  5. Save to apply the changes.

Setup Site Logo

  1. Go to Layout
  2. Locate Site Menu section and click on the edit icon
  3. Submenu Item: Add one underscore(_) before the link name.
  4. Submenu of a Submenu: Add two underscore(__) before the link name.

Setup Menu and Dropdown

4.3. Mega Dropdown

To create a mega dropdown, use the following shortcode in the URL field:

Shortcode
[getMega label="recent"]

Setup Mega Dropdown

5. Main Posts

Let's customize recent posts on the homepage, author profiles, comment systems, social shares, and other available options for a personalized touch.

  1. Go to Layout
  2. Locate Main Posts section and click on the edit icon
  3. Customize settings as needed.
  4. Save.

Main Posts Settings

5.1. Comments Plugin

Perzen offers three comment systems – Blogger, Disqus, and Facebook. To set up your favorite one, choose the shortcode of your preferred comment system from below:

For Blogger:

Shortcode
[type="blogger"]

For Disqus:

Shortcode
[type="disqus" shortname="DISQUS_SHORTNAME"]

The `shortname` parameter is optional, but you can customize it with your own Disqus shortname.

For Facebook:

Shortcode
[type="facebook" lang="LANGUAGE_CODE"]

Supported Language: en_US, es_ES, ar_AR, id_ID, th_TH, vi_VN, pt_BR, fr_FR, ru_RU, de_DE, it_IT

Official Site: https://developers.facebook.com/docs/plugins/comments#language

5.2. Author Profile

The author profile widget automatically populates with your Blogger profile information if your profile is set to public.

  1. Go to https://www.blogger.com/edit-profile.g
  2. Find Additional Information > Introduction
  3. Write you bio.
  4. If you want to show your social media links, use the following HTML structure.
  5. Click on the Save Profile button to update your profile.

Supported Icons: https://icons.getbootstrap.com

HTML
<a href="#">Icon_Name</a>

Author Profile Setup

Personalize your blog's sidebar by adding an email newsletter, social counter, ajax widgets, advertisements and more.

6.1. Social Counter

  1. Go to Layout
  2. Locate Sidebar section
  3. Click on Add a Gadget and add LinkList widget
  4. Add the following shortcode first: [getSocialLinks]
  5. Now, add your social links, and include #your_text at the end for custom display text with icons.
  6. Save to apply changes.

Please do not delete or relocate the shortcode; it's crucial for displaying icons on your blog.

Sidebar Social Counter

6.2. Email Newsletter

  1. Go to Layout
  2. Locate Sidebar section
  3. Click on Add a Gadget and add HTML/JavaScript widget
  4. Add the following shortcode in the title field.
  5. Write your descriptive text in the content area to encourage readers to subscribe to your newsletter.
  6. Save to apply changes.
Shortcode
[getNewsletter title="Weekly Newsletter"]

Email Newsletter Widget

6.3. Ajax Widgets

  1. Go to Layout
  2. Locate Sidebar section
  3. Click on Add a Gadget and add HTML/JavaScript widget
  4. Use the following shortcode in the content area. Customize label if you want to show posts from a specific label.
  5. Save.
Shortcode
[getWidget results="5" label="recent" type="list"]

Sidebar Ajax Widget

6.4. Recent Comments

  1. Go to Layout
  2. Locate Sidebar section
  3. Click on Add a Gadget and add HTML/JavaScript widget
  4. Paste following shortcode in the content area.
  5. Save.
Shortcode
[getWidget results="5" type="comments"]

Sidebar Ajax Widget

You can add unlimited widgets and social media icons on your blog's footer to make your site more professional.

  1. Go to Layout
  2. Locate Footer Left, Footer Center or Footer Right section.
  3. Click on Add a Gadget and add gadgets as needed.
  4. Save to apply changes.

7.1. Social Icons

Supported Icons: https://icons.bootstrap.com

  1. Add LinkList gadget
  2. Add the following shortcode first: [getSocialLinks]
  3. Now, add your social profile links
  4. Save.

Please do not delete or relocate the shortcode; it's crucial for displaying icons on your blog.

Social Icons on Footer

Refine your site's branding with custom footer credits for a professional touch.

  1. Go to Layout
  2. Locate Footer Credits section and click on the edit icon
  3. Add your credits or links using the appropriate HTML tags in the content area.
  4. Save.

Custom Footer Credits

Boost your blog's earnings by smartly positioning ads and enjoy the flexibility to add unlimited ads.

  1. Go to your Blogger dashboard > Layout
  2. Locate the following sections where you want to display advertisement:
    • Header Banner
    • Post Before Ad
    • Post After Ad
    • Sidebar
    • Footer Banner
  3. Click on the Add a Gadget
  4. Choose AdSense or HTML/JavaScript or Image widget
  5. Paste the ad code obtained from your ad network or custom ad into the provided content area of the choosen widget.
  6. Save to apply changes.

Setup Advertisement

9.1. Move Ads

  1. Go to Posts
  2. Choose any post where you want to move ads
  3. Make sure you're in Compose view mode to access the visual editor
  4. Use [ads1] to place the first ad at your desired location.
  5. Use [ads2] to place the second ad at your desired location.
  6. Publish or Update your post.

Must apply bold style to the shortcode on your post.

Move Ads Shortcode

14. Advance Features

Please refer to our detailed guides to learn how to utilize these features in your blog posts or pages.

14.1. Contact Form: How to Add Contact Form in Blogger

14.2. Table of Contents: How to Add Buttons in Your Blogger Posts

14.3. Buttons: How to Add Alerts Message in Blogger

14.4. Alert Messages: How to Add Table of Contents in Blogger

14.5. Codebox: How to Add Codebox in Blogger

14.6. Post/Page Layout: How to Change Layout of Post/Page in Blogger