Ritima - Responsive Blogger Template Documentation

Welcome to the Ritima blogger template documentation!

Ritima is a sleek personal blog template designed for creative minds who prefer a clean aesthetic. This guide helps you install, set up, and customize the Ritima blogger template to make your blogging experience uniquely yours.

Let's dive in! 🚀

📥 Download: Ritima Responsive 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. Header

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

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

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

4.3. Mega Dropdown

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

Shortcode Copy code
[getMega label="recent"]

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.

5.1. Comments Plugin

Ritima 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

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

6. Sidebar

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.

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 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="list"]

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"]

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

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.

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

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

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.