목차
티스토리 사용자를 위해 페이지를 예쁘고 멋지게 꾸밀 수 있는 버튼을 무료 나눔 하겠습니다. 이를 적용하여 html과 css에 적용하여 서식으로 사용할 수 있는 방법을 알수 있게 될 것이고, 약간의 커스터마이징이 가능하도록 주석을 달아 드렸으니 많이 얻어가시길 바랍니다.
여기에 오신 것을 환영해요.
멋진 버튼을 오늘 특별히 나눔해드리려 합니다. 앞으로도 다양한 버튼을 추가해서 공유해드릴 거구요. 일단 오늘은 버튼 몇 가지를 소개하고, 이를 적용하는 방법에 대해서 알려드리겠습니다. 아래 처럼 바로 이런 걸 만들어서 적용하실 수 있습니다. 이 외에도 다른 디자인을 더 추가하였습니다.
아래는 예시 입니다. 아래 버튼이 작동 되는지 한 번 눌러봅니다.
티스토리를 이제 막 시작하시는 분들의 경우 웹 서치를 하다보면, 버튼이 보이는 경우가 있는데, 참으로 다양한 기능들을 하고 있고, 또한 가독성을 높인 버튼들도 눈에 들옵니다. 그래서 오늘 특별히 준비하였고, 아마 이 시간이 유익한 시간이 되지 않을까 합니다.
자 그럼 바로 시작하죠!
티스토리 버튼 서식 만들기
일단은 버튼을 만들기 위해서 디자인을 참고해야 하는데, 원하는 디자인으로 커스터 마이징을 할 수 있도록 주석을 달아 드렸고, 이를 통해 수정이 가능하다 하겠습니다. html초보자라면 걱정하지 마세요. 그래서 오늘 제가 다채롭게 준비해서 버튼을 만들었고, 이를 그대로 사용하셔도 됩니다. 버튼의 기능은 그 기능만 톡톡히 잘 하면 되고, 가시성을 높여주기만 하면 되는 부분이기 때문에 너무 화려하다거 좋은 것은 아니니 이점을 꼭 기억하셨으면 좋겠습니다.
버튼의 종류는 셀수 없이 많은데요, 그중에 오늘은 마우스를 올렸을때 글자색이 변하는, 부분과 배경색이 변하는 부분에 대해서 설명드리고, 그리고 약간의 외각이 둥근 형태를 띈 버튼을 설정한 것입니다. 그리고 깔끔한 느낌으로 시각적인 부분에 있어 심플한 느낌을 주게끔 하였습니다.
일단 버튼을 적용하기 위해서는, 티스토리 관리자 모드로 접속하고, HTML과 CSS코드를 만든다음 이를 티스토리 관리자 페이지에서 설정해야 합니다.
또한 자주 사용하는 버튼을 서식에 추가해서 간편하게 사용하실 수 있습니다.
먼저, 코딩을 보겠습니다.
1. CSS코팅 ( ludi-button1-red )
/* ludiasset.com 버튼시작 - Red Gradient */
.ludi-button1 {
background: linear-gradient(to right, #ff416c, #ff4b2b); /* Gradient background */
color: white; /* font color */
padding: 10px 20px; /* 글자 기준으로 세로, 가로 여백 */
border-radius: 5px; /* 모서리 */
border: none; /* No border 테두리 없음 */
font-size: 16px;
cursor: pointer;
display: inline-block; /* 자동 넓이 조절 */
text-decoration: none; /* 밑줄제거 */
transition: background 0.3s, color 0.3s;
}
.ludi-button1:hover {
background: linear-gradient(to right, #ff4b2b, #ff416c); /* Reverse gradient on hover */
color: #0015ff; /* Change text color on hover */
}
/* ludiasset.com 버튼종료 - Red Gradient */
/* 글자 흰색 강제적용 시작 */
.ludi-button1:link,
.ludi-button1:active {
color: white; /* Force white color on all states */
text-decoration: none;
}
/* 글자 흰색 강제적용 종료 */
해당 코딩을 저장하세요. 드레그가 안된다면 또는 드레그하기 불편하시다면 아래 파일 다운을 받아 저장해서 관리하시면 편합니다. ( CSS설정 방법은 아래에 이이서 설명해두었습니다. )
위와 같이 마우스를 올리면 오른쪽 이미지처럼 글자 색이 변하는 스타일입니다.
2.HTML 코딩 (red버튼 불러오기)
티스토리 블로그에 글을 작성하면서 필요한 위치에 버튼을 호출하여 적용하실 수 있습니다. 먼저 코딩은 아래와 같아요.
<p data-ke-size="size16"> </p>
<center><a class="ludi-button1" href="https://ludiasset.com">RED버튼1</a></center>
<p data-ke-size="size16"> </p>
위 코드에서 " href= url주소.com... "되어 있는 부분은 버튼을 눌렀을때 기입한 url로 이동을 하라는 것입니다. 따라서 url주소는 여러분이 입력한 주소로 작동되는 것이죠. 그리고, 만약 파일 다운로드 링크를 바로 거는 경우도 있는데 역시 해당 " href= "에 해당 다운로드 링크 주소를 입력하시면 그대로 적용 됩니다.
위 코드를 다운받아서 관리하세요.
그러면 이제 코딩을 알게되었고 다음은 티스토리에 설정하는 방법을 알려드릴께요.
3. CSS, HTML 티스토리에 적용하기
먼저 CSS적용하는 방법은 먼저 티스토리 관리자 화면으로 접속해야 합니다.
위 그림 처럼, 티스토리에 로그인을 한 다암, 관리자 모드의 집입 방법은 우측 상단의 " T " 모양을 누르고, 해당 블로그의 톱니바퀴를 누르면 관리자 페이지로 이동이 됩니다. 그런다음 왼쪽 아래로 스크롤(내리면)하면 " 스킨편집"이 보입니다. 그것을 누르시면 스킨 편집 페이지가 오픈됩니다. 그 다음, 우측 상단에 " html 편집"이라는 글자를 누르면 됩니다.
그러면, 상단 텝에서 " CSS " 를 클릭하면 오른 쪽 화면 처럼 이런 창이 오픈이 되구요, 역시 맨 아래로 스크롤 해줍니다. 그다음, 네모박스 부분에 위의 CSS파일의 내용을 그대로 붙여 넣기 하시면 됩니다. 그리고 " 적용 " 을 눌러주면 성공적으로 된 것입니다.
이제 이렇게 적용된 CSS 버튼을 html에서 불러와야 합니다. 불러오는 방법은 아래를 따릅니다.
html서식을 만들어서 편리하게 사용하기.
서식을 만드는 이유는, 매번 사용할 때마다 블로그 html모드로 변환하여 붙여넣기가 불편할 수 있어서, 서식을 만들어두면 글 쓸때 쉽게 추가할 수 있습니다.
관리자 페이지에서 왼쪽 상단에 " 서식 관리"를 눌러줍니다.
다음으로, " 서식 쓰기 "를 눌러줍니다.
서식쓰기 창이 오픈되고, 상단 우측에 " 기본모드 " -> " HTML "을 선택하면 검은 바탕의 html모드로 진입하게 됩니다. 이 곳에 아까 위에서 다운 받은 html코드를 붙여 넣습니다. 그리고 " 확인 " 을 눌러줍니다. 서식의 제목은 여러분이 원하는 키워드로 관리하기 편하고 기억하기 쉽게 수정사용이 가능합니다.
그러면 이렇게 서식이 만들어 졌습니다. 이제 준비는 다 끝났고 앞으로 글을 쓰다가 서식을 통해 버튼을 추가하는 방법을 알려드릴께요.
4.서식을 통해 버튼 추가하기
블로그에 글을 쓰면서 버튼을 넣는 작업을 해봅니다. 저는 지금 이 화면 이글 바로 아래에 버튼을 넣을 거에요. 어떻게 하는지 보세요.
그럼 이렇게 버튼이 생성되었습니다. 위의 버튼1 을 누르면 색상 코드를 확인할 수 있습니다.
그런데 제가 지금 글을 작성하는 화면에서는 버튼 모양이 바로 나타나지 않고 아래 왼쪽 처럼 보입니다.
하지만 이는 지극히 정상으로 적용 된 것이고, 잘 적용 되었는지 확인하기 위해서는, 화면 좌측 아래에 미리보기를 눌러서 보시면 맨 오른쪽 그림처럼 버튼이 정상적으로 되었는지 확인이 가능합니다. 저와 같이 보인다면 정상적으로 적용이 된 것입니다.
5. 버튼 디자인 추가로 받기
맨 처음 설명드렸던 버튼 코드를 알려드릴께요. 1번 부터 4번의 순서대로 똑같이 진행하시면 됩니다.
버튼2 - blue-css
버튼2 -blue-html
*버튼2 설명:
버튼2의 경우는 마우스를 갖어다 대면 박스 배경색이 반전을 이루면서 변경되는 효과를 갖어옵니다. 반전에 대하여 색상을 편집하고, 깊이를 여러분이 조정하고 다듬을 수 있습니다. 아래의 실제 버튼을 참고하세요.
버튼3 - green-css
버튼3 - green-html
버튼3 설명:
버튼3의 경우에는 조금 다릅니다. 글자의 색은 변하지 않지만 배경색이 진항게 변하면서 추가적으로 배경 주변에 그라데이션 효과를 주게 되어 몰입도를 높이는 효과를 줄 수 있습니다. 아래는 실제 버튼 효과입니다. 마우스를 갖어다 대시고, 클릭을 해보세요. * 추가적으로 다른사람이 아래 버튼을 눌러 접속한 이력이 있다면 글자 색이 변경되어 확인하게 하는 코드도 추가할 수 있습니다.
아래 실제 버튼을 눌러서 확인해보세요. 누르고 돌아오면 글자색이 변경되시나요?(방문이력 코드 확인하기)
클릭하시면 페이지 이동이 되었다가 다시 돌아오세요. 그런데 이때 글자 색을 변경해서 방문자가 햇갈리지 않게 편의성을 제공하고 싶다면, "버튼3 CSS"에 아래와 같은 코드를 추가하여 적용하면 됩니다.( 보통은 링크가 많은 경우게 사용하면 요긴하게 사용할 수 있고 사용자도 좋아합니다. )
.ludi-button3:visited { color: black; }
이를 적용한 CSS코딩 파일을 아래에 첨부하였으니 받으셔서 적용하시면 됩니다. 방문하게 되면 글자는 검정색으로 적용됩니다. (이 또한 여러분이 빨강, 파랑, 노랑, 기타 등등 원하시는 색상으로 변경하실 수 있습니다.)
html 색상코드는 아래 링크를 눌러 확인이 가능합니다. 원하시는 색깔로 색상코드를 참고해서 변경하실 수 있습니다.
결론:
지금까지 CSS와 HTML을 코딩하여 티스토리 블로그에 적용하는 방법에 대해서 알게 되었고, 제가 여러분들이 편하게 수정하시고, 커스터마이징 하시라고 주석을 달아 드렸으니, 변경 및 수정하셔서 원하시는 색깔로 가능합니다. 그리고, 맨 처음 알려드렸던, 다른 버튼에 대해서 코드를 알려드렸습니다. 도움이 되셨다면 공감, 좋아요 꾹! 좋은 하루 되세요.
함께보면 좋은글:
라이노8 크랙 무료 다운로드 프로그램(인증키 방식 포함)
큰 왕거미와 엘리베이터 꿈 해몽
거미와 엘리베이터에 관련된 꿈의 의미는 상황에 따라 달라질 수 있는데요. 꿈 속에서 어떤 사람이 왕거미를 누군가가 던져서 엘베를 탈 때까지 피해다녔지만 결국 내몸에 붙었고 비명을 지르
ludiasset.com
데이터 복구 프로그램 크랙 무료 다운로드(모바일, sd카드, hdd, SSD, 외장하드, m.2 Nvme)
컴퓨터 속도 빠르게 하는 방법 5가지로 200프로 향상
컴퓨터 속도 빠르게 하는 방법 5가지로 200프로 향상
간단한 조치를 취해서 느려진 컴퓨터를 빠르게 하는 해결방법입니다. 아무래도 컴퓨터가 느려지면 업무 효율 떨어지고 답답함이 증가 될 수 있습니다. 이때 속도를 빠르게 할 수 있는 방법으로
ludiasset.com
'티스토리' 카테고리의 다른 글
| 티스토리 별점주기 코딩(Html, Css코드 무료나눔)꾸미기 3별 제공 (0) | 2024.09.04 |
|---|
