How to Decorate Your Blog with CSS: A Guide for Tistory

Decorate blog in Tistory

Customizing your blog’s design using CSS (Cascading Style Sheets) gives you full control over the look and feel of your blog. Whether you want to change fonts, colors, layouts, or add animations, CSS can transform a simple blog into a stunning, personalized site.

---

How to Decorate Your Blog Using CSS: A Step-by-Step Guide

---

In this guide, I’ll explain how to apply CSS to Tistory blogging platforms.

Tistory is a popular blogging platform in Korea, offering more flexibility for CSS customization compared to Naver Blog. Tistory allows for deep CSS customizations, making it a great choice for users who want more control over their blog design.

Step-by-Step Guide for Applying CSS in Tistory

1. Log into Tistory: Visit Tistory and log in with your credentials.

2. Go to Blog Management: Once logged in, navigate to the Blog Management section from the top right of the screen.

3. Open the Skin Editor: In the Blog Management menu, select "Skin" to access the skin (theme) customization options.

(1) Select "edit skin"

(2) Select "edit html"

(3) Select "CSS" (4) Edit (5) Select "save" 

4. Add Custom CSS in Skin Editor: In the Skin Editor, you will see a section for "Custom CSS". Here, you can add your CSS code. For example:

.bw-title-01 {
    background: linear-gradient(-225deg, #faf615 0%, #fba80d 50%, #f84f0c 100%); 
    color: #000000;
    margin: 0.5em 0em;
    padding: 15px 20px;
    border-radius: 20px 1px 20px 1px;
}
.bw-button-01 {
    box-shadow: 0px 10px 20px -7px #fff6af;
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color:#ffec64;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffee66;
}
.bw-button-01:hover {
    background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color:#ffab23;
}
.bw-button-01:active {
    position:relative;
    top:1px;
}

This code customizes the title style and the button style.

5. Save Changes: Once you've entered your CSS, click “Save” to apply the changes to your blog.

6. Edit a post: Open a post and write a title and then change editing mode into "html"

Add class="bw-title-01" into h3 tag and write  button code with bw-button-01 class and then save the post.

Now you can see the customized style when you open the post.

Customizing Tistory Themes with CSS

Tistory allows for greater flexibility in customizing existing themes. If you want to modify your theme’s design deeply, you can also edit the HTML along with CSS, providing even more control over your blog’s appearance.