목차
티스토리에 별점을 주는 코딩에 대해서 알아볼건데요, 시각적 효과로 유저가 방문했을때 가독성과 집중, 그리고 밋밋한 블로그에 재미를 부여해서 좀더 예쁘게 꾸밀 수 있는 기능을 알려드릴께요. 무료로 받으시고 수정을 통해서 별 Color을 변경하고 별타이틀 제목도 바꾸시길 바랍니다.
티스토리를 오래 하다보면, 또는 이제 막 처음 시작한 초보자 분들은 아마도 이 기능이 탑재됨으로서 아주 유익하고 유용하게 사용되어 지리라 생각되는데요, 기쁜 마음에 무료로 나누어 드리고자 글을 끄적여 봅니다.
위의 그림처럼 점수를 줄 수 있어요. 그러나 별점 데이터를 저장해서 점수데이터를 분석하는 기능은 넣지 않았고(이 것이 가능한 코딩도 있으나 이번 시간에는 다루이 않습니다. 조금 복잡하거든요.). 따라서 단순하게 별점을 줄 수 있는 기능입니다. 또한 제가 알려드린 코딩을 티스토리 서식으로 등록해서 원하는 페이지, 원하는 위치에 로드 할 수 있는 방법에 대해서도 함께 알아보겠습니다.
티스토리 별점주기 코드 및 적용방법
꼭읽어주세요. 티스토리는 css와 html이 구분이 되어 있어요. 모든 스킨이 그렇게 되어 있습니다. 물론 그 외에도 자바스크립트나 별도의 파일을 직접 올리는 기능도 있고 한데, 암튼 그래서 적용하는 것이 훨씬 간편하고, 사용자 유저를 신경써서 친절하게 되어 있습니다. 본문 글을 작성할때에도 기본모드와 html모드를 제공하는데 특히 위와 같은 별점 기능을 추가하거나 할때 서식에서 html모드에 코드를 삽입하는게 아주 편리하게 되어 있고 가독성도 좋게 만들어져 있습니다.
이해하기: 지금 부터 알려드리는 코드는 여러분이 원하는데로 커스터마이징이 가능해서(물론 제한 적인 것은 있음.) 더욱 나의 페이지를 예쁘게 꾸밀 수 있다는 장점이죠. 별점 주기 코드를 바로 알려드리겠습니다. 내용은 아래 코드 상자에 담았고 이를 바로 다운 로드 할 수 있도록 준비 했습니다. 그러나, 코드의 기본적인 개념을 약간은 알 수 있도로 주석을 달아 드렸으니 참고하시면 도움이 되실거라 생각합니다. 제공 하는 별은 총 3가지 입니다. 제가 이름 붙였습니다. 3별이라고. 삼별. 이별 아니고 3별입니다.
1. 별 코딩 CSS
<style>
.rating-container {
text-align: center;
font-family: Arial, sans-serif;
margin: 20px 0;
}
.rating-container p {
font-size: 18px;
margin-bottom: 10px;
}
.stars {
display: inline-block;
direction: rtl;
}
.stars input[type="radio"] {
display: none;
}
/* 일반 별 스타일 */
.stars label {
font-size: 40px;
color: #ccc;
cursor: pointer;
transition: color 0.3s;
direction: ltr;
}
.stars label:hover,
.stars label:hover ~ label,
.stars input[type="radio"]:checked ~ label {
color: gold;
}
</style>
위의 코드는 일반적인 별이죠. 코드를 보시면 도입부에 "<style>"이라고 되어 있는데, 티스토리의 경우는 CSS 영역이 별도로 존재하기 때문에 이를 생략하고 적용해야 합니다. CSS는 디자인이라고 생각하시면 됩니다. 따라서 CSS만 적용하게 되면 디자인은 분명 존재하지만 내 블로그에 보여지지 않습니다. 그리고 " radio "는 AM, FM 방송 듣는 라디오가 아니라, 단일체크 하라는 테그입니다.(초보자 분들을 위한 배려의 글.) 따라서 이를 불러오기 위해서는 Html에서 별도의 호출을 해주는 코드를 통해 CSS를 불러와야 합니다. 바로 이런 개념이라는 것을 가볍게 참고만 하시면 되구요.
2. HTML코드는 아래를 참고하시면 됩니다.
<div class="rating-container">
<p>해당 별이 마음에 드셨나요?</p>
<div class="stars">
<input type="radio" name="star" id="star1" value="5">
<label for="star1" class="cartoon-star">★</label>
<input type="radio" name="star" id="star2" value="4">
<label for="star2" class="cartoon-star">★</label>
<input type="radio" name="star" id="star3" value="3">
<label for="star3" class="cartoon-star">★</label>
<input type="radio" name="star" id="star4" value="2">
<label for="star4" class="cartoon-star">★</label>
<input type="radio" name="star" id="star5" value="1">
<label for="star5" class="cartoon-star">★</label>
</div>
</div>
위의 CSS와, Html을 적용하여 블로그 본문에 적용을 하면 아래와 같이 보여집니다.
어? 그런데 화면 왼쪽으로 쏠려서 보여지네요. 잘못 된거 아닌가요?
네, 잘 적용이 되어 있는 것입니다. 센터도 맞추었고, 잘 되어 있습니다. 이를 확인하는 방법은 블로그 화면 좌측 아래 " 미리보기 " 를 눌러서 보시면 이렇게 보여집니다.
3. CSS 및 HTML서식 등록하기
css와 html을 이제 각각 등록을 해야 하는데 방법을 간략하게 설명드릴께요. 만약 글을 쓰는 중이시라면?
"Ctrl + n " 키를 눌러 창을 하나 중복으로 띄워두고 작업하면 편리합니다. 저는 그렇게 합니다.
CSS적용: 티스토리 관리자 페이지로 접속하여, 좌측 하단에 스킨편집 -> 우측 상단 html편집 -> 우측 상단 탭에서 CSS선택 -> 그리고 가장 밑으로 내려서 CSS 코드 삽입 -> 우측 상단 " 적용"을 눌러주고 등록합니다.
HTML서식적용: 관리자 페이지 좌측 상단 " 서식관리 " -> 우측상단 " 서식쓰기 " -> html모드로 변경해서 코드 삽입 -> " 발행 "
이렇게 하시면 적용이 잘 되는 것을 확인하실 수 있습니다.
만약 서식 추가하는 방법에 대해서 더욱 자세하게 알고 싶다면 아래 블로그를 참고하세요. ( 3버튼이 준비되어 있고, 서식관리에 대한 내용을 디테일하게 기록해 두었습니다.)
참고하기:
티스토리 버튼 서식 만들기 무료나눔(3버튼 다운로드)
티스토리 사용자를 위해 페이지를 예쁘고 멋지게 꾸밀 수 있는 버튼을 무료 나눔 하겠습니다. 이를 적용하여 html과 css에 적용하여 서식으로 사용할 수 있는 방법을 알수 있게 될 것이고, 약간의
ludiasset.com
서식등록에 대한 궁금증이 해소 되셨길 바랍니다.
그리고 만약 위의 코드 복사가 안되시거나, 적용함에 있어서 조금 쉽게 하시고 싶다 하시면 아래 파일을 받아서 메모장으로 열고 복사해서 바로 붙여넣기를 하시면 됩니다. (일반적인 별 디자인을 적용한 코드)
두개의 파일을 제공해 드렸습니다. 다운 받으시고, 내용을 복사해서 CSS와 html서식에 각각 추가하여 사용하시면 됩니다. 그리고 추가적으로 카툰스타일의 별과 반짝이는별 코드를 나눔할께요.
4. 카툰스타일 및 반짝이는 스타일
위의 파일은 카툰스타일입니다. 이를 다운 받아 적용 하면 위와 같은 효과를 줍니다. 해당글 도입부에서 두번째에 위치한 별이며 이미 보셨던 효과입니다. 적용하는 방법은 1~3번을 확인하여 적용하시면 됩니다. 다은음 반짝이는 별.
위의 그림은 이미지라 움직이지 않습니다만, 역시 본문 상단으로 쭈욱 올려서 세번째 별에 마우스를 갖어다 대면, 별이 움직이며 반짝이는 효과를 줍니다. 역시 적용하는 방법은 1~3번의 순서를 따라 하시면 됩니다.
결론:
지금까지 3별(일반스타일, 카툰스타일, 반짝이는 스타일)을 티스토리에 적용하여 사용해보고 꾸며보는 시간을 갖었습니다. 실제로 적용해보시고 괜찮으셨다면 공감 꾸욱 눌러주시길 바랍니다. 댓글과 컨텐츠 확인은 저에게 큰 힘이 됩니다.
끝으로 함께 보면 좋은 글을 공유합니다.
Suno Ai 음악 만들기 저작권 문제 (수노ai 상업적이용, 유료 무료 차이점)
윈도우 디펜더(Windows Defender 꺼짐) 안켜지는 문제 해결방법
96년 11월생 사주 운세 풀이(일간 지지포함) 사업운(부)
데이터 복구 프로그램 크랙 무료 다운로드(모바일, sd카드, hdd, SSD, 외장하드, m.2 Nvme)
모바일 포토샵 어플 프로버전 APK앱 무료 다운로드(사진 뽀샵 추천) 핸드폰 픽셀 유동화가능
엑셀 2021 무료 다운로드 (정품인증) 빠르고 초간단
ms오피스 2021을 다운로드하고 정품인증 하는 방법을 알려드릴게요. 쉽고 간단하게 마이크로오피스 중에 Professional 2021을 받아서 설치하고 진행하는 과정은 매우 쉬우므로 아래대로 하시면 어려
ludiasset.com
'티스토리' 카테고리의 다른 글
| 티스토리 버튼 서식 만들기 무료나눔(3버튼 다운로드) (0) | 2024.09.02 |
|---|
