BlackQuote Code

Step 1: Access Your Blogger Dashboard

(a). Log in to Blogger.
(b). Select your blog from the list.

Step 2: Backup Your Template

(a). Go to the Theme section in the left sidebar.
(b). Click on the Backup/Restore button in the upper right corner.
(c). Choose Download to save a backup of your current theme.

Step 3: Edit HTML of Your Template

(a). Still in the Theme section, click on Edit HTML.
(b). You’ll see the HTML code of your template.

Step 4: Add Your Custom HTML for Blog Posts

(a). Find the section where the blog posts are displayed. This is often within <b:includable id='main'> or a similar tag.
(b). Add or modify the code to customize the post layout. Here’s an example you can use:

<b:includable id='main'>

    <b:if cond='data:post.url'>

        <article class='blog-post'>

            <header class='post-header'>

                <h1 class='post-title'><data:post.title/></h1>

                <p class='post-meta'>Posted on <data:post.date/></p>

            </header>

            <section class='post-content'>

                <data:post.body/>

            </section>

            <footer class='post-footer'>

                <p>Tags: <data:post.labels/></p>

            </footer>

        </article>

    </b:if>

</b:includable>{codeBox}

Step 5: Add Custom CSS

(a). Scroll to the top of the HTML editor to find the <b:skin> section.
(b). Add your custom CSS code within this section. Here’s an example:

<b:skin>

    /* Existing CSS */

    body {

        font-family: 'Arial', sans-serif;

        line-height: 1.6;

        background-color: #f4f4f4;

        color: #333;

        margin: 0;

        padding: 20px;

    }

    .blog-post {

        background: #fff;

        border-radius: 8px;

        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

        padding: 20px;

        max-width: 800px;

        margin: 20px auto;

    }

    .post-header {

        border-bottom: 2px solid #eee;

        padding-bottom: 10px;

    }

    .post-title {

        font-size: 2em;

        color: #333;

    }

    .post-meta {

        font-size: 0.9em;

        color: #666;

    }

    .post-content {

        margin: 20px 0;

    }

    blockquote {

        background: #f9f9f9;

        border-left: 5px solid #007BFF;

        padding: 10px 20px;

        margin: 20px 0;

        font-style: italic;

    }

    .post-footer {

        font-size: 0.8em;

        color: #999;

    }

    .tags {

        color: #007BFF;

    }

</b:skin>{codeBox}

Step 6: Save Your Changes

(a). After adding the HTML and CSS, click Save in the upper right corner.
(b). Use the Preview option to see how your blog looks with the new styling.

Step 7: Publish Changes

If everything looks good, you can publish the changes. If you encounter any issues, you can always revert to your backup.

Final Notes

• Responsive Design: Ensure your design is mobile-friendly.
• Test on Different Devices: Check how your blog looks on different screen sizes.
• Further Customization: Feel free to tweak colors, fonts, and layout to fit your personal style.