Search

Add custom CSS

How to add custom css in Blogspot template : 

1. Log in to Blogger and go to your Dashboard.

2. From the left sidebar, click on Theme.

3. On the Theme page, click the Customize button.



4.A new editor window will open. On the left side, click the Advanced dropdown.

5. Scroll down to the bottom of the options, then click Add CSS.

6. A blank box will appear where you can paste or type your CSS code.


Once you’ve added your CSS, click Apply to Blog in the top right corner to save changes.

xxx

Gemini - Sidebar Widgets

Usually, after uploading the template file, the sidebar will appear automatically. However, if it doesn’t show up, you can always add the widgets manually. Here’s the tutorial. If you need to delete an unused widget or re-add it, follow these instructions.
To edit the widgets, go to your blog dashboard > Layout > find the "Sidebar" section.

Welcome

This widget will only appear on Homepage, Static Page (about / contact / etc), and Single post page.

  • Add an IMAGE gadget, upload your image here. Recommended size : 250px x 250px.
  • Write the welcome text with the caption field.
  • Make sure to create your About page first, then update the link to it

Social Media Sidebar Area

Follow the instruction : click here.

Search Form

Follow the instruction : click here.

Categories / Label

  • Add Label gadget.
  • Edit the gadget to select which label you want to appear. Make sure the display is LIST.
  • If you don’t have any posts assigned to the label yet, your label won’t appear here, so make sure you write the blog post first and assign it to a label/create the label from your post.
How category/label works in Blogspot, click here.

Popular Posts

  • Add Popular posts gadget.
  • Edit the gadget, configure everything, make sure the featured image is active. You can change the number of posts showing (default : 3 posts)

xxx

Homepage - Profile pic & text

The profile section on the homepage appears automatically under the "Homepage - Profile" area and uses an Image widget.

 


⚠️ Important: Do not delete this Image widget from the layout. It contains custom code that controls the layout. To change the content, simply edit the widget.
Steps:

  1. Go to Blogger.com and open your Dashboard. Navigate to Layout.
  2. Find the "Homepage - Profile" section and click Edit on the Image widget.
  3. Fill in the following:
    - Title
    - Caption
    - Link: Add the URL to your About page. (Make sure your About page is published so you can copy the correct URL.)
    - Image: Upload a square image (recommended size: at least 300x300px).
  4. Click Save.
xxx

Recent Post Slider

 


If you upload the template correctly, the Recent Post Slider widget will appear automatically. You must have at least one published post for the slider to show. Make sure your post includes an image (landscape orientation, at least 1200px wide).

If you don't see the recent post slider, add an HTML/JavaScript gadget to the "Recent Post Slide" section (as shown in the picture). Then edit the gadget and paste the following code:


<script type="text/javascript">
var posts_no = 4;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 150;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

To change the number of posts in the slider, update var posts_no = 4; to any number you want (default is 4).
To change the number of characters in the post summary, update the value in var summary_chars = 150;.

xxx

Category Images section


To edit the demo image, text, and link:

  • Find the "Featured Categories" section and click Edit.
  • Upload your own photo/image.
  • Edit the title to change the category name.
  • Add the link to the category page on your blog.
  • Click Save.

Note: The Elodie template supports a maximum of 3 images (3 columns).

Important: Do not delete the original Featured Categories images. Instead, edit them directly. I’ve added custom code for this gadget, and deleting it may cause design issues or make it incompatible with the template.

xxx

Maybe Tomorrow - Sidebar

Usually, after uploading the template file, the sidebar will appear automatically. However, if it doesn’t show up, you can always add the widgets manually. Here’s the tutorial. If you need to delete an unused widget or re-add it, follow these instructions.
To edit the widgets, go to your blog dashboard > Layout > find the "Sidebar" section.

Welcome

This widget will only appear on Homepage, Static Page (about / contact / etc), and Single post page.

  • Add an IMAGE gadget, upload your image here. Recommended size : 250px x 250px.
  • Write the welcome text with the caption field.

Social Media Sidebar Area

Follow the instruction : click here.

Search Form

Follow the instruction : click here.

Categories / Label

  • Add Label gadget.
  • Edit the gadget to select which label you want to appear. Make sure the display is LIST.
  • If you don’t have any posts assigned to the label yet, your label won’t appear here, so make sure you write the blog post first and assign it to a label/create the label from your post.
How category/label works in Blogspot, click here.

Popular Posts

  • Add Popular posts gadget.
  • Edit the gadget, configure everything, make sure the featured image is active. You can change the number of posts showing (default : 3 posts)


Newsletter

Follow the instruction : click here.

xxx

Newsletter widget

This tutorial is only for Mailchimp.com

  1. You must have an account on Mailchimp.com.
  2. First, create a form and follow this tutorial to get the code: click here.
  3. Once you have the code, do not copy the entire thing. Look for this line: <form action="YOUR-OWN-FORM-ACTION-CODE">
  4. Copy only the URL inside "YOUR-OWN-FORM-ACTION-CODE" (see image).


  5. Go to Blog Dashboard > Layout, and find the "Newsletter" or "Subscribe" widget.
  6. Edit the HTML widget, scroll down a bit, and replace the form action URL in the template with the one you copied from Mailchimp.


  7. Save.


P.S. If you don’t need the newsletter widget, you can simply delete it.

xxx

Contact Form

Name

Email *

Message *