Welcome to the Magus blogger template documentation!

Magus isn't your average template – it's all about speed, SEO mojo, AdSense compatibility, and rocking a sleek, minimalist vibe that screams pro and looks darn good. This step-by-step guide ensures a seamless installation, setup, and customization process for the Magus blogger template.

Let's dive in! 🚀

📥 Download: Magus Professional Magazine 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

4. Topbar

Add quick links and social media icons in the topbar for an enhanced user experience.

  1. Go to your Blogger dashboard > Layout.
  2. Locate the Topbar Menu section > click on the edit icon
  3. Add, remove, or modify links as needed.
  4. Save to apply the changes.

Topbar Menu

4.2. Social Media Icons

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

  1. Go to your Blogger dashboard > Layout
  2. Locate the Topbar Social section > click on the edit icon
  3. Add, remove, or modify social links as needed.
  4. Save to apply the changes.

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

Topbar Social Icons

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

5.3. Mega Dropdown

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

Shortcode
[getMega label="recent"]

Setup Mega Dropdown

6. Ticker

Display scrolling updates or announcements for dynamic and engaging content delivery.

  1. Go to Layout
  2. Locate Ticker section and click on the edit icon
  3. Use the following shortcode in the content area.
  4. Save.
Shortcode
[getTicker results="5" label="recent"]

Setup Ticker

Enhance your homepage with stylish featured posts widget, designed to highlight handpicked articles or showcase the latest updates.

  1. Go to Layout
  2. Locate Featured Posts section and click on the edit icon
  3. Use the following shortcode in the content area.
  4. Save.
Shortcode
[getFeatured label="recent"]

Setup Featured Posts

8. Ajax Blocks

Enhance your site's appeal with unlimited stylish blocks and showcase your content like a pro!

  1. Go to Layout
  2. Locate Ajax Blocks 1 or Ajax Blocks 2 section
  3. Click on the Add a Gadget and add HTML/JavaScript widget
  4. Use the following shortcode in the content area.
  5. Save.

Available block types: block1, block2, grid1, grid2, column1, column2, list1, videos

Shortcode
[getWidget results="5" label="recent" type="block1"]

Setup Ajax Blocks

9. 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

9.1. Comments Plugin

Magus 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

9.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.

10.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

10.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="list2"]

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.

11.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
    • Homepage Ads
    • Ajax Blocks 1/2
    • 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

13.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