Magus - Professional Magazine Blogger Template Documentation

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

2.2. LazyLoad & WebP Images

1. Go to Blogger dashbaord > Settings
2. Find Posts section
3. Toggle to 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.

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.

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.

4. Topbar

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

4.1. Page Links

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.

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.

5. Header

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

5.1. Site Logo

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.

5.2. Dropdown Menu

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.

5.3. Mega Dropdown

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

Shortcode Copy code
[getMega label="recent"]

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 Copy code
[getTicker results="5" label="recent"]

7. Featured Posts

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 Copy code
[getFeatured label="recent"]

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 Copy code
[getWidget results="5" label="recent" type="block1"]

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.

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 Copy code
[type="blogger"]

For Disqus:

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

For Facebook:

Shortcode Copy code
[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 Copy code
<a href="#">Icon_Name</a>

10. Sidebar

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.

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 Copy code
[getNewsletter title="Weekly Newsletter"]

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 Copy code
[getWidget results="5" label="recent" type="list2"]

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 Copy code
[getWidget results="5" type="comments"]

11. Footer

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.

12. Footer Credits Pro Only

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.

13. Advertisement

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.

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.