FileCSS is a Blogger template created by BloggerTheme.net for publishing web resources, articles, and downloadable content. This documentation explains how to install the theme, manage its built-in Blogger gadgets, configure essential sections, and use the post features supported by the current FileCSS XML.
The guide is based on FileCSS version 1.0. It focuses on the actual controls in the template rather than assuming every standard Blogger feature or third-party shortcode is available. You can compare your setup with the FileCSS live demo.
Before you begin: Make sure you have the FileCSS XML file, access to the correct Blogger dashboard, and a backup of your existing theme. Some gadget data may need to be configured again after switching templates.
1. Install FileCSS on Blogger
- Open Blogger and select the blog you want to update.
- Go to Theme, open the menu next to Customize, and choose Backup to download your existing theme.
- In the same Theme menu, select Restore and choose Upload.
- Select the FileCSS
.xmlfile, not the compressed ZIP package. - Open View blog and check the homepage, a published post, and mobile navigation.
Important: Theme backups protect theme code, not all blog content. Keep separate backups of important posts and configuration, and do not delete existing gadgets or integrations without checking what they do.
2. Main Logo and Blog Identity
FileCSS uses the standard Blogger Header gadget. Its current XML names this gadget Header FileCSS. You can use a text-based title or an image logo, depending on your header settings.
- Go to Layout in Blogger.
- Find Header FileCSS or the Header gadget in the top header section.
- Click Edit and update the title, description, or header image as appropriate.
- Save the gadget and verify the header at desktop and mobile widths.
The current CSS limits the header logo image height to approximately 34px. A clean, horizontally proportioned logo works best; oversized source images may be scaled down.
3. Configure the Main Menu
The main navigation is managed through a Link List gadget named Main Menu. Add readable link names and working destinations from Layout → Main Menu → Edit. The desktop navigation also supports nested menu presentation.
Normal links and dropdown navigation
| Entry name | Purpose |
|---|---|
Home | Normal top-level link |
_Resources | First-level dropdown item under the preceding parent |
__Icons | Second-level item nested below an appropriate first-level item |
Add links in the order you want them displayed. For dropdowns, keep child entries directly below their parent links; the menu parser uses the entry order and leading underscores.
A sample Mega Menu entry exists in the supplied XML, but this guide does not provide an unverified custom Mega Menu syntax. Keep the existing entry intact until you have tested any replacement on your installation.
4. Set Up the Hero Section
The FileCSS homepage features a large hero section intended for an introductory message and search. The XML currently includes an Image gadget for the headline/description and a Blog Search gadget for the search field.
- Open Layout and locate the Hero Section.
- Edit the hero Image gadget to change its title or caption text. Use a clear headline that reflects your blog’s subject.
- Edit the Blog Search gadget if you want a different search title or prompt, where supported by the gadget settings.
- Save both gadgets and test the hero on desktop and mobile.
For a resource blog, a suitable heading might be Discover Better Ways to Build Websites, followed by one concise sentence describing the content. The demo illustrates how the two elements appear together.
5. Set Up the Featured Post
FileCSS includes a Featured Post gadget. It highlights a single article above the main post grid when it has a selected post and is enabled.
- Go to Layout → Featured Post.
- Edit the Featured Post gadget or add one to that section if needed.
- Choose the article to highlight, using Blogger’s available selection controls.
- Save, then check that its title, excerpt, and featured image appear correctly.
Choose a published post with a strong featured image and helpful description. A large featured area looks incomplete when the selected article has no suitable image.
6. Manage Main Posts
The main article list is powered by the standard Blog Posts gadget. From Layout → Blog Posts → Edit, you can adjust the options Blogger exposes, such as visible metadata and the number of posts shown on the main page. The template uses a responsive card grid and a Load More control where applicable.
- Open Layout and select the Blog Posts gadget.
- Review the display and metadata options available in your Blogger dashboard.
- Save any changes and verify that homepage cards and article pages still display correctly.
For consistent thumbnails, use properly sized images with a similar aspect ratio across your articles. The XML has dedicated image containers for featured, grid, sidebar, and related-post elements, so the same image may be cropped differently in each location.
7. Add Header and Footer Advertising
The template includes separate Header ADS and Footer ADS regions. These are gadget containers: they do not automatically supply advertisements.
- Open Layout and find Header ADS or Footer ADS.
- Use Add a Gadget to insert an appropriate supported gadget, such as HTML/JavaScript, Image, or an available advertising gadget.
- Paste your own verified ad or promotion code, then save.
- Check the output on the homepage and post pages, including mobile.
FileCSS also provides Theme customization toggles named Show on Post Page for header and footer ad regions. These control their appearance on individual article pages when configured.
Leave an advertising section empty when you do not intend to show an ad. An empty container is not a reason to remove its XML section.
8. Control In-Article Ad Placement
FileCSS has post advertising sections linked to the Post ADS 1 and Post ADS 2 containers. These can be placed around post content by default or moved to a specific location in a post using the recognized markers below.
| Marker | Source section |
|---|---|
$ads={1} | Post ADS 1 / before-ad |
$ads={2} | Post ADS 2 / after-ad |
- Add your ad gadget to the corresponding Post ADS section through Blogger Layout.
- Open the target post and place
$ads={1}or$ads={2}at the desired location. - Apply Strikethrough formatting to the complete marker using Blogger’s editor.
- Publish or preview the post and check that the advertisement appears at the intended location.
The current XML specifically scans <strike> text for those two exact ad markers. Plain unformatted text is not equivalent. Only use this on posts where the related ad gadget has been configured.
9. Post Layouts and Contact Form
FileCSS has built-in post-level layout markers, detected in struck-through text. They are useful for a landing page or a contact page without changing the entire site layout.
| Marker | Effect |
|---|---|
full-width | Hide the sidebar and use the full content width for the post |
left-sidebar | Position the sidebar on the left |
right-sidebar | Position the sidebar on the right |
contact-form | Move the existing Blogger Contact Form gadget into the post content |
- Edit the post or static page where the custom layout is required.
- Type the marker exactly as shown in the table.
- Select the marker and apply Strikethrough formatting.
- Save and inspect the published page.
For contact-form, first ensure a Blogger Contact Form gadget exists in the Layout. The marker moves that gadget; it does not create an independent form service.
10. Buttons and Content Alerts
The supplied FileCSS script recognizes certain struck-through text inside posts and converts it into styled elements. Its supported patterns include button text with slash-separated options, plus alert markers. Use the HTML View to inspect the result if Blogger changes formatting during editing.
Article buttons
To make a button, first insert a normal hyperlink using Blogger’s editor. Then use a struck-through label with the button text and optional type information separated by slashes. The script adds the button class to a suitable link. The example below uses the template’s supported button-label pattern rather than claiming a separate download shortcode.
Download File/download/buttonKeep the link destination set to the correct URL. The text and slash-separated options control presentation; they do not create a downloadable file.
Alert markers
| Marker | Style |
|---|---|
alert-info | Information |
alert-success | Success |
alert-warning | Warning |
alert-error | Error |
These markers belong to the FileCSS post-rendering script and are not the same as the Plus UI component markup used to style this documentation article.
11. Sidebar Gadgets
The sidebar supports standard Blogger gadgets, including Popular Posts, Labels, HTML/JavaScript, and other available widget types. The sample XML currently includes Popular Posts and Categories gadgets.
- Go to Layout and find the Sidebar section.
- Edit Popular Posts to adjust the posts and presentation options Blogger offers.
- Edit Categories (Labels) to show the desired labels.
- Add or edit other gadgets only when you need their functionality; save and review the live page.
You may use a Link List for ordinary social or navigation URLs. Give entries clear names and test every destination. Do not assume that a particular network icon is generated solely because a link has a network name.
12. Footer Widgets and Footer Menu
FileCSS includes footer widget columns and a lower footer bar. The provided layout has gadgets for descriptive text and link lists, as well as a footer menu area.
- Open Layout and locate the Footer sections.
- Edit the text gadget to describe your website briefly.
- Edit each Link List gadget to replace sample or obsolete URLs with your own valid links.
- Review the footer menu and copyright or attribution gadget if one is present in your installation.
- Save the changes and confirm that the footer looks correct on mobile.
Keep the BloggerTheme.net template credit intact as a way of acknowledging the template creator. Some template builds have special code tied to the footer credit, and modifying it can disrupt normal behavior.
13. Basic Theme Appearance
You can personalize FileCSS without editing its source. Go to Theme → Customize → Advanced to find the controls exposed by the current XML.
| Setting group | What to adjust |
|---|---|
| Theme Options | Dark Mode, Left Sidebar, Fixed Menu, Fixed Sidebar |
| Theme Widths | Boxed Layout, Container Width, Sidebar Width |
| Theme Fonts | Site, Menu, Title, Meta, and Text fonts |
| Background | Page/background colors and image behavior |
| Theme Colors | Title, meta, and text colors |
| Post Options | Breadcrumbs, Comments Count, Post Navigation |
For the built-in option switches, 0 means off and 1 means on. The XML defaults include Fixed Menu and Fixed Sidebar enabled, while Dark Mode and Left Sidebar are disabled. Theme color groups also include header, submenu, hero, and footer-related values.
Start with small changes: update your logo, primary visual colors, and the navigation first. Save and review both dark and light appearances before applying several unrelated settings together.
14. Theme Options, Comments and Related Posts
The XML has a Theme Options area in Blogger Layout containing a Facebook SDK gadget and an HTML/JavaScript gadget named JSON Variables. The latter is parsed for configuration values, rather than displayed as normal page content.
The currently supported JSON variable keys are:
{
relatedPostsNum: 3,
followByEmailText: "",
commentsSystem: "blogger",
disqusShortname: "your-shortname"
}relatedPostsNum controls the number of related articles, followByEmailText supplies newsletter helper text, commentsSystem selects the comment system, and disqusShortname identifies a Disqus installation if used.
The comment-system setting recognizes blogger, facebook, disqus, or hide. Facebook-based features require the relevant SDK and setup; Disqus requires your own shortname. The example above is a configuration example, not a recommendation to enable external services by default.
Paste only valid supported settings in the existing JSON Variables gadget. Back up the original content before editing. Do not remove the Facebook SDK or JSON Variables gadgets solely because you do not currently use those features.
15. Author Information and Social Links
The post author area can use information from the public Blogger profile. If your blog uses this author section, update the profile description and public details through Blogger’s profile settings, then inspect a published article.
Keep author names and profile information accurate. For links that are not handled by the template’s profile parser, use ordinary HTML links or Blogger Link List gadgets instead of relying on undocumented social icon tokens.
16. Site Feed and Dynamic Sections
FileCSS includes dynamic post-based sections, such as related content and certain menus. These depend on the blog’s published content and the feed or data requests used by the theme.
- Check Settings → Site feed in Blogger.
- Review the feed setting before restricting or disabling it.
- Confirm that any label-based content widgets use labels that actually exist on your blog.
- Test a published post for related content and check the browser console if a section fails to load.
Restrictive feed settings may affect dynamic Blogger template features. Do not change the feed setting purely for a visual preference without first checking how content is loaded.
17. Troubleshooting
The XML cannot be installed
Check that you are uploading the extracted XML file rather than the ZIP. If Blogger reports a parsing error, try the unchanged FileCSS XML and review the error details before editing code.
The menu or dropdown is not working
Check the Main Menu Link List order, link destinations, and nesting format. Remove malformed menu entries rather than deleting the menu gadget. Test both desktop and mobile navigation.
The hero or featured post is missing
Confirm that the relevant gadget exists and has content. A Featured Post gadget may appear empty when its selected post is unpublished or unavailable.
Related posts do not appear
Ensure that published articles have appropriate labels, that the site feed is not unnecessarily restricted, and that the JSON Variables gadget contains valid values. A related section may not have enough matching articles.
A shortcode is displayed as plain text
Make sure the shortcode is supported by this XML and that the required Strikethrough formatting is applied. Also verify whether the feature expects a link, a gadget, or a particular post context.
An ad or contact form does not show
Confirm that the source gadget is present and correctly configured. Moving a gadget using an in-post marker does not create the source gadget or connect an external service automatically.
Frequently Asked Questions
Does installing FileCSS delete my existing posts?
A theme installation changes the design rather than deleting published posts. Back up your old theme and review the Layout gadgets afterward.
Which file should I upload?
Upload the extracted FileCSS XML file through Blogger Theme → Restore.
Can I edit the FileCSS logo without editing XML?
Yes. Use the Header gadget available through Blogger Layout to change its title or uploaded image.
Where can I edit the homepage menu?
Open Layout → Main Menu and edit its Link List entries. Keep child links in the correct order.
Does FileCSS support dark mode?
The XML includes a Dark Mode option under Theme customization. Test the result on your installed version.
Can I put ads in the middle of an article?
The XML recognizes struck-through $ads={1} and $ads={2} markers, provided the corresponding ad gadgets are configured.
How do I create a full-width page?
Use the full-width marker with Strikethrough formatting in the relevant post or static page.
Where can I find a live example?
Visit the FileCSS demo at https://filecss.blogspot.com/ and compare the homepage and article layouts.
Final Setup Checklist
- Keep a copy of your current theme XML.
- Set your logo and site identity.
- Review the Main Menu and Hero Section.
- Choose a Featured Post and configure Blog Posts.
- Check sidebar, footer, and advertising gadgets.
- Review essential appearance and JSON Variable settings.
- Test the homepage, article page, and mobile navigation.
Once these checks are complete, your FileCSS installation is ready for content. Explore the live demo for a working layout reference and visit BloggerTheme.net for template updates and other Blogger resources.
