스타일러 프로 올인원으로 블로그 버튼 만들기

안녕하세요. 오늘은 블로그버튼 다른 버전을 준비해드렸습니다.

제 블로그에서 보이는 버튼을 적용하고 싶다고 하신 분들이 많아, 이렇게 글을 쓰게 되었습니다.

이전 글에서 여러가지 실험을 하다보니, 글 속에서 출력되는 버튼들이 많이 나오면서 각각의 오류가 있다하여 보시기 불편한 분들이 있었는데 이전 글은 4가지 버전으로 나눠서 블로그 글을 포스팅해드릴 예정입니다.

 

1. 스타일러 프로 올인원 접속

우선 스타일러 프로 올인원에 접속해봅니다.

그 후에 이렇게 상태창에 입력해봅니다. 

현재 블로그를 5개 운영중인데, 5개를 다 소개하면서 각각의 버튼을 만들어줄 수 있니? 

이렇게 적으면 다음과 같이 소스를 출력해줍니다. 

<div style="text-align: center; padding: 20px; border: 3px solid #000; border-radius: 10px; background-color: #F5F5F5;">
    <h2 style="color: #FF6F61; font-size: 24px; font-weight: bold; margin-bottom: 20px;">🚀 내가 운영 중인 블로그 5곳</h2>
    <p style="font-size: 16px; color: #333;">다양한 주제로 여러분과 소통하는 공간이에요! 아래 버튼을 눌러서 바로 구경해보세요 😎</p>
    
    <div style="margin-top: 30px;">
        <a href="https://블로그1주소" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FF6F61; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🌿 블로그1: 여행과 힐링
        </a>
        <a href="https://블로그2주소" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #6BCB77; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            📸 블로그2: 사진과 일상
        </a>
        <a href="https://블로그3주소" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #4D96FF; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🧑‍🍳 블로그3: 집밥 레시피
        </a>
        <a href="https://블로그4주소" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FFCA3A; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🧘‍♀️ 블로그4: 자기계발과 명상
        </a>
        <a href="https://블로그5주소" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #845EC2; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🎨 블로그5: 아트와 디자인
        </a>
    </div>
</div>

<style>
a:hover {
    transform: scale(1.05);
}
</style>

 그후에 블로그의 이름, 설명, 링크를 물어보는 질문이 올텐데, 그때 나의 블로그 들을 순차적으로 입력해줍니다. 

 

<div style="text-align: center; padding: 20px; border: 3px solid #000; border-radius: 10px; background-color: #F5F5F5;">
    <h2 style="color: #FF6F61; font-size: 24px; font-weight: bold; margin-bottom: 20px;">✨ 내가 운영 중인 7개의 블로그✨</h2>
    <p style="font-size: 16px; color: #333;">주제별로 꼭 필요한 정보만 쏙쏙 모아뒀어요! 아래 버튼 눌러서 구경해보세요 🚀</p>
    
    <div style="margin-top: 30px;">
        <a href="https://mktus.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FF6F61; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            📚 세상지식모음<br>실생활에 필요한 지식 모음
        </a>
        <a href="https://mgarden1.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #6BCB77; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🌱 마음의 정원<br>미국투자 정보 모음
        </a>
        <a href="https://outline88.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #4D96FF; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🏃‍♂️ 크나큰 운동장<br>운동 관련 정보 모음
        </a>
        <a href="https://dailytipshub.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FFCA3A; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            👶 일상 속 유용한 정보 한 스푼<br>육아 관련 정보 모음
        </a>
        <a href="https://starbloogs.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #845EC2; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            💡 나만 몰랐던 소중한 정보<br>절약 관련 정보 모음
        </a>
        <a href="https://anotherlevel88.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #00C9A7; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🎬 StudioMania<br>스튜디오 정보 모음
        </a>
        <a href="https://wealthrealm88.blogspot.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #E23E57; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            💰 자산의 황제<br>자산관리 정보 모음
        </a>
    </div>
</div>

<style>
a:hover {
    transform: scale(1.05);
}
</style>

상태창에 순차적으로 입력한 나의 블로그 이름, 설명, 주소로 각각 버튼을 제작해줍니다. 

만약 내가 쓴 설명이 맘에 안들면, 다음과 같이 요청하시면 됩니다. 

<div style="text-align: center; padding: 20px; border: 3px solid #000; border-radius: 10px; background-color: #F5F5F5;">
    <h2 style="color: #FF6F61; font-size: 24px; font-weight: bold; margin-bottom: 20px;">
        🏆 이 정보 안 보면 손해!<br>주제별 꿀팁 가득한 7곳 바로가기
    </h2>
    <p style="font-size: 16px; color: #333;">
        궁금했던 그 정보, 이미 다 준비해뒀어요!<br>
        지금 딱 필요한 지식, 한 번에 골라보세요 💖
    </p>
    
    <div style="margin-top: 30px;">
        <a href="https://mktus.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FF6F61; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            📚 세상지식모음<br>실생활에 꼭 필요한 지식 모음
        </a>
        <a href="https://mgarden1.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #6BCB77; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🌱 마음의 정원<br>미국투자 꿀정보 한가득
        </a>
        <a href="https://outline88.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #4D96FF; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🏃‍♂️ 크나큰 운동장<br>운동 꿀팁 & 건강 정보
        </a>
        <a href="https://dailytipshub.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FFCA3A; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            👶 일상 속 유용한 정보 한 스푼<br>육아·생활 정보 모음
        </a>
        <a href="https://starbloogs.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #845EC2; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            💡 나만 몰랐던 소중한 정보<br>절약 꿀팁 총집합
        </a>
        <a href="https://anotherlevel88.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #00C9A7; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🎬 StudioMania<br>스튜디오 정보 모음
        </a>
        <a href="https://wealthrealm88.blogspot.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #E23E57; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            💰 자산의 황제<br>자산관리 핵심 정보 모음
        </a>
    </div>
</div>

<style>
a:hover {
    transform: scale(1.05);
}
</style>

그럼 이렇게 소스를 줄겁니다. 스타일러 프로 올인원에서 해보실 때 조금 다를 수도 있습니다.

거의 비슷한 타입이 제공 됩니다. 

블로그의 추가도 가능합니다.

주소를 또 추가하게 되면 7개에서 1개를 추가했으니 8개의 버튼이 되고, 알록달록한 색도 그대로 유지해줍니다.

<div style="text-align: center; padding: 20px; border: 3px solid #000; border-radius: 10px; background-color: #F5F5F5;">
    <h2 style="color: #FF6F61; font-size: 24px; font-weight: bold; margin-bottom: 20px;">
        🏆 이 정보 안 보면 손해!<br>주제별 꿀팁 가득한 8곳 바로가기
    </h2>
    <p style="font-size: 16px; color: #333;">
        지금 당장 필요한 정보, 여기 다 있어요!<br>
        한 번의 클릭으로 완전 꿀팁 모음집 탐험해보세요 💖
    </p>
    
    <div style="margin-top: 30px;">
        <a href="https://mktus.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FF6F61; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            📚 세상지식모음<br>실생활에 꼭 필요한 지식 모음
        </a>
        <a href="https://mgarden1.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #6BCB77; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🌱 마음의 정원<br>미국투자 꿀정보 한가득
        </a>
        <a href="https://outline88.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #4D96FF; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🏃‍♂️ 크나큰 운동장<br>운동 꿀팁 & 건강 정보
        </a>
        <a href="https://dailytipshub.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FFCA3A; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            👶 일상 속 유용한 정보 한 스푼<br>육아·생활 정보 모음
        </a>
        <a href="https://starbloogs.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #845EC2; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            💡 나만 몰랐던 소중한 정보<br>절약 꿀팁 총집합
        </a>
        <a href="https://anotherlevel88.tistory.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #00C9A7; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            🎬 StudioMania<br>스튜디오 정보 모음
        </a>
        <a href="https://wealthrealm88.blogspot.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #E23E57; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            💰 자산의 황제<br>자산관리 핵심 정보 모음
        </a>
        <a href="https://fashiondiary88.blogspot.com/" target="_blank" style="display: inline-block; margin: 10px; padding: 15px 30px; background-color: #FF8C94; color: #fff; text-decoration: none; border-radius: 8px; font-weight: bold; transition: transform 0.2s;">
            👗 패션왕의 블로그 일기<br>옷 잘입는 꿀팁 모음
        </a>
    </div>
</div>

<style>
a:hover {
    transform: scale(1.05);
}
</style>

그럼 이렇게 코드가 완성됩니다.

이제 내 블로그 어디에서든 다른 블로그를 들어갈 수 있게 스킨에 넣어주도록 할게요.

 

2. 티스토리 스킨에 만들어진 블로그 버튼 넣기

꾸미기 - 스킨편집 - html 편집 으로 들어갑니다.

CTRL+F 를 누른 뒤  article_rep_desc 를 찾습니다. 제 스킨은 북클럽이라서 두 번째 위치에 블로그 본문에서 출력되는 공간이 존재합니다.

맨 위에서 보여지는 것이 좋기 때문에, 상단 광고 부분에 해당 소스를 넣습니다.

스타일러 프로 올인원에서 복사해서 그대로 붙혀넣기 하면 됩니다.

붙혀 넣기 후 오른쪽 상단에 적용 버튼을 눌러봅니다.

그리고 나서 블로그를 새로고침하면, 블로그 상단에 다음과 같이 떠있을 겁니다.

🏆 이 정보 안 보면 손해!
주제별 꿀팁 가득한 8곳 바로가기

지금 당장 필요한 정보, 여기 다 있어요!
한 번의 클릭으로 완전 꿀팁 모음집 탐험해보세요 💖

📚 세상지식모음
실생활에 꼭 필요한 지식 모음 🌱 마음의 정원
미국투자 꿀정보 한가득 🏃‍♂️ 크나큰 운동장
운동 꿀팁 & 건강 정보 👶 일상 속 유용한 정보 한 스푼
육아·생활 정보 모음 💡 나만 몰랐던 소중한 정보
절약 꿀팁 총집합 🎬 StudioMania
스튜디오 정보 모음 💰 자산의 황제
자산관리 핵심 정보 모음 👗 패션왕의 블로그 일기
옷 잘입는 꿀팁 모음

다른 블로그로 잘 들어가지는지 확인해 보시고, 스타일러 프로 올인원과 대화를 하시면서 해당 블로그 주소를 잘들어갈 수 있도록 수정하면 더 알찬 블로그 버튼이 완성됩니다.

글을 잘 보셨다면 꼭 구독버튼! 눌러주세요.