AutoSheet Solutions

Code Block Template

Blogger template with sidebar on each side

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
    <title>Blog Template with Sidebars</title>
    <b:skin><![CDATA[
        /* Add your CSS styles here */

body {
            background-color: brown; /* Body background color */
        }

.header-area {
            background-color: #333; /* Header background color */
            color: #fff; /* Header text color */
            padding: 20px; /* Header padding */
            text-align: center; /* Center-align header content */
        }

.navigation-bar {
            background-color: #444; /* Navigation bar background color */
            padding: 10px; /* Navigation bar padding */
            text-align: center; /* Center-align navigation items */
            clear: both; /* Clear floats to ensure proper positioning */
        }

.navigation-bar a {
            text-decoration: none; /* Remove underlines from links */
            color: #fff; /* Navigation link color */
            margin: 0 15px; /* Adjust spacing between items */
            display: inline-block; /* Display links in a row */
        }

#content-wrapper {
            background-color: green; /* Content wrapper background color */
            width: 100%; /* Occupy full width with footer below */
            overflow: hidden; /* Clear floats within content wrapper */
        }

.content-area {
            float: left;
            width: 60%; /* Adjust for desired content width */
        }

.left-sidebar-2 {
            float: left;
            width: 20%; /* Adjusted for sidebar width with footer */
            background-color: #cc99ff; /* Left sidebar 2 background color */
        }

.right-sidebar-2 {
            float: left;
            width: 20%; /* Adjusted for sidebar width with footer */
            background-color: #ff9999; /* Right sidebar 2 background color */
        }

#footer-wrapper {
            clear: both; /* Ensure footer is below all content */
            background-color: grey; /* Footer background color */
            padding: 20px; /* Footer padding */
        }

/* Clear floats to prevent layout issues */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    ]]></b:skin>
</head>

<body expr:class='data:blog.pageType'>
    <div class="header-area">
        <h1>Welcome to My Blog</h1>
    </div>

<div class='navigation-bar'>
        <a href='URL_TO_HOME_PAGE'>Home</a>
        
        
        
        
        
    </div>

<div id="content-wrapper">
        <div id="top-sidebar" class="sidebar-wrapper">
            <b:section id="top-sidebar-content">
                
            </b:section>
        </div>
        <div class="left-sidebar-2">
            <b:section id="left-sidebar-2">
            </b:section>
        </div>

AutoSheet Solutions

Sunday, March 9, 2025

Blogger template with two sidebars

Code Block Template

No comments:

Post a Comment