Search

Troubleshooting - Screen Filled with Unwanted Content

After uploading the template XML file and opening your site, you may not see anything (widgets are blocking the view), or the blog posts cannot be viewed.

This usually happens because old widgets from your previous template are stacking at the top and covering the entire page.

To fix this, go to Blogger Admin → Layout, then remove or rearrange any unnecessary widgets at the top.  

There should only be one widget per section (for the menu and for social media). You can compare with the screenshot here to see how it should look. Each section should contain only one widget - no extra widgets should be placed there.


Delete unwanted widgets or move it to the sidebar area. Save. Refresh your site.
xxx

How to Add Google AdSense Code to Blogger

 Method 1: Add AdSense Code via Blogger Layout (Recommended)

This is the easiest and safest way.

  1. Log in to Blogger

  2. Go to Layout

  3. Click Add a Gadget

  4. Choose HTML/JavaScript

  5. Paste your Google AdSense ad code

  6. Click Save

  7. Drag the gadget to the position you want (sidebar, footer, etc.)

  8. Click Save arrangement

Done. The ad will appear once AdSense approves and starts serving ads.

Method 2: Add AdSense Code Inside a Post (In-Content Ads)

Use this if you want ads inside blog posts.

  1. Go to Posts → New Post

  2. Switch editor to HTML view

  3. Paste the AdSense code where you want the ad to appear

  4. Switch back to Compose view (optional)

  5. Publish or update the post

Tip: Place ads between paragraphs, not at the very top.

Method 3: Add AdSense Auto Ads (Site-Wide)

This enables Google to place ads automatically.

  1. Go to Google AdSense → Ads → Auto ads

  2. Copy the Auto Ads code

  3. In Blogger, go to Theme

  4. Click Edit HTML

  5. Find </head>

  6. Paste the AdSense code right above </head>

  7. Click Save

Auto ads will start appearing across your site.

Common Issues & Fixes

  • Ads not showing?

    • Make sure your AdSense account is approved

    • Wait up to 24–48 hours

  • Code disappears after saving?

    • Paste only the AdSense script, no extra tags

  • Layout breaks?

    • Remove the code and re-add via Layout → HTML/JavaScript

How to Find the <head> Tag in Blogger

Many users get stuck because they don’t know where the <head> tag is. Follow these steps carefully.

  1. In Blogger, go to Theme

  2. Click Edit HTML

  3. You will see a long code editor

Now use one of these ways:

  • Press Ctrl + F (Windows) or Cmd + F (Mac)

  • Type </head> and press Enter

  • Blogger will highlight the line automatically

You should see something like this near the top of the code:

</head>

Paste your Google AdSense code directly ABOVE this line.

Important notes:

  • Do not delete or edit the <head> or </head> tags

  • Paste the code between existing scripts, not inside another script

  • If you don’t see <head> immediately, always search using </head> — it’s easier to find than <head>

After pasting the code:

  1. Click Save

  2. Wait a few minutes, then check your site


Important: Be Extra Careful When Editing Theme Code

When editing the Theme → Edit HTML section, you are modifying your site’s core code. A small mistake can break the layout or cause errors.

Please keep these precautions in mind:

  • Do not delete anything unless you are 100% sure

  • Only paste the AdSense code exactly as provided

  • Never edit or remove existing <head> or </head> tags

  • Make sure the AdSense code is not pasted inside another script

  • Avoid adding extra spaces or characters accidentally

Before saving:

  • Double-check that the code is pasted above </head>

  • If possible, copy the original code first as a backup

If your site looks broken after saving:

  • Go back to Theme → Edit HTML

  • Remove the code you just added

  • Click Save again

Take your time. There’s no rush — careful editing prevents problems later.

xxx

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

Contact Form

Name

Email *

Message *