반응형 티스토리 북클럽 스킨19 북클럽 스킨 글 제목의 이미지를 없애고, 글 제목을 본문에 넣어 깔끔하게 만들기 글 제목의 이미지를 지우고 본문에 넣기. 오래전부터 사용해 온 티스토리 스킨인 Book Club은 심플하고 깔끔한 디자인 덕분에 많은 사용자들에게 인기를 끌고 있습니다. 그러나 블로그 본문에서 글 제목이 상단에 크게 노출되는 구조로 인해, 대표 이미지가 배경으로 자동 설정되면서 이미지에 따라 글 제목이 잘 보이지 않는 문제가 발생하곤 합니다. 이에 따라, 글 제목의 배경 이미지를 제거하고 크게 노출되는 글 제목을 본문에 포함하여 보다 깔끔하고 가독성 높은 디자인으로 정리해 보겠습니다. [📌 코드 수정 시 주의사항은 아래 '더 보기'를 참고하세요.]더보기1. 스킨 저장.스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경 전 스킨으로.. 2025. 3. 12. 티스토리 북클럽 스킨 꾸미기 모음집 '북클럽 스킨' 꾸미기 모음. 티스토리 블로그를 더욱 멋지고 매력적으로 꾸미고 싶으신가요? 이 글에서는 티스토리를 처음 시작하는 분들을 위해 다양한 '티스토리 꾸미기' 팁을 한곳에 모아 소개합니다. 모든 내용은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. [📌 코드 수정 시 주의사항]1. 스킨 저장.스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.스킨을 백업하려면, [블로그 관리자] > [꾸미기] > [스킨 변경]을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다. 2. [Ctrl] + [F]를 사용할 때.먼저 코드 탭의 빈 곳을 클릭한.. 2025. 3. 7. 티스토리 꾸미기 | 폴더 스타일 글상자, 인용구 HTML 서식 모음집 '폴더 스타일' 글상자, 인용구 만들기. 티스토리나 다른 블로그 플랫폼에서 '글상자 및 인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다.강조: 중요한 정보나 주요 메시지를 강조할 수 있습니다. 글상자를 사용하면 독자의 눈길을 사로잡고 주의를 집중시킬 수 있습니다.가독성: 복잡하거나 길게 나열된 정보를 정리해서 더 쉽게 읽고 이해할 수 있도록 도와줍니다.시각적 흥미: 글의 시각적인 디자인을 향상시켜 독자의 관심을 유지합니다. 다양한 스타일의 글상자를 사용하면 블로그의 전반적인 디자인이 더 매력적으로 보일 수 있습니다.정보 분류: 서로 다른 주제나 섹션을 구분해서 더 명확하게 표시할 수 있습니다.따라서 티스토리나 다른 블로그 플랫폼에서 '글상자'를 사용하는 것은 인용된 내용을 명확하게.. 2025. 2. 14. 티스토리 꾸미기 | 포스트잇 메모장 스타일 글상자 HTML 서식 모음집 '포스트잇 글상자' HTML 서식 모음. 티스토리나 다른 블로그 플랫폼에서 '글상자'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '글상자' 요소를 사용하면 '글상자'가 주변 내용과 시각적으로 구분되어 독자가 인용된 내용을 쉽게 식별할 수 있습니다. 이는 글의 가독성과 이해도를 높여줍니다. 스타일링: 블로그 플랫폼에서는 주로 '글상자'에 대한 스타일을 지정하여 인용구를 강조하거나 시각적으로 더욱 눈에 띄게 만듭니다. 이는 인용된 내용에 대한 주목도를 높일 수 있습니다. 웹 표준 준수: HTML 웹 표준에 따르면 인용된 텍스트를 나타내기 위해 '글상자' 요소를 사용해야 합니다. 티스토리나 다른 블로그 플랫폼에서 이를 준수함으로써 웹 사이트의 품질을 높일 수 있습니다.. .. 2025. 2. 13. 티스토리 꾸미기 | 북클럽 스킨 사이드바 고정하기 북클럽 스킨 사이드바 고정하기. 티스토리 블로그에서 사이드바를 고정하면 다음과 같은 이점이 있습니다.애드센스 광고가 사이드바에 위치해 있을 경우, 사이드바가 고정됨으로써 광고가 스크롤할 때에도 항상 보이게 됩니다. 이는 사용자들이 광고를 더 자주 볼 수 있게 해 주어 클릭 확률이 높아지고, 결과적으로 광고 수익이 증가할 수 있습니다.📌 알림 웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는 것까지는 막을 수 없지만, 제 자료를 사용해 관련된 포스팅을 할 때는 출처를 꼭 밝혀 주시기 바랍니다.그 외 개인적인 사용은 자유롭게 하시면 됩니다. [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]더보.. 2025. 2. 8. 티스토리 꾸미기 | 북클럽 스킨 GTranslate 다국어 번역기 설치하기 GTranslate 다국어 번역기 위젯. 지원을 종료한 구글 번역기 대신 무료로 사용 가능한 GTranslate, 북클럽에 설치하는 방법을 알아보겠습니다. 블로그에 GTranslate 다국어 번역기를 설치하는 몇 가지 이유는 다음과 같습니다.더 많은 독자에게 도달: 다양한 언어로 콘텐츠를 번역하면 전 세계 여러 언어를 사용하는 사용자들이 접근할 수 있습니다. 이는 더 많은 독자가 블로그에 방문하도록 유도할 수 있습니다. 사용자 경험 향상: 독자들이 자신의 모국어로 콘텐츠를 읽을 수 있게 함으로써 블로그에서 더 오래 머물게 할 수 있습니다. 편안하게 읽을 수 있는 환경을 제공하는 것은 중요한 사용자 경험 요소입니다. SEO 향상: 다국어 번역기를 통해 다양한 언어로 콘텐츠를 제공하면 검색 엔진 최적화(S.. 2025. 2. 7. 티스토리 북클럽 스킨 | 사이드바 카테고리 밑줄 넣기 및 마우스 오버 색상 변경 북클럽 스킨 '사이드 바, 카테고리' 꾸미기. 이번에는 다소 단조로워 보이는 티스토리 북클럽 스킨의 사이드바를 꾸미는 방법에 대해 알아보겠습니다.카테고리에 밑줄을 추가하는 방법과, 마우스를 올렸을 때 밑줄 없이 색상이 변경되도록 설정하는 방법 등 다양한 사이드 바 꾸미기을 살펴보겠습니다. 적용 예제는 아래 미리보기를 참고하세요. [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]더보기1. 스킨 저장.스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보.. 2024. 3. 7. 티스토리 북클럽 스킨 | 스크롤 프로그레스 바(Progress Bar) 초간단 적용 블로그 상단에 스크롤 진행 프로그레스 바 적용하기.다른 분들의 블로그를 보다 보면 블로그 상단에 눈에 띄는 이상한 그래프 게이지가 있습니다.스크롤을 내리면 상단에 막대가 늘어났다 스크롤을 다시 올리면 줄어들었다 하면서 끝까지 내리면 막대가 끝까지 채워지더라고요. 그래서 궁금해 검색을 해보니 '프로그레스 바(Progress Bar)'라는 UI였습니다.. 좀 더 검색을 해보니 역시 많은 분들이 '프로그레스 바'의 코드를 올려 주셨으나 왠지 북클럽 스킨에는 적용이 되지 않더라고요, 그래서 이 코드 저 코드를 다 적용해 보며 코드를 조합해 북클럽 스킨에도 적용 가능한 초간단 코드를 만들어 봤습니다. 제 블로그 상단을 보시면 상단에 '프로그레스 바'가 나오는 걸 확인할 수 있습니다. 프로그레스 바(Progress.. 2024. 2. 28. 티스토리 꾸미기 | 스크롤 반응형 탑(top) 다운(down) 버튼 만들기 스크롤에 반응하는 탑(top) 다운(down) 버튼 만들기티스토리 블로그 탑(TOP) 다운(DOWN) 버튼의 장점긴 페이지를 스크롤하면 사용자는 맨 위로 올라가는 것이 번거로울 수 있습니다.탑 버튼은 사용자가 페이지 상단으로 쉽게 이동할 수 있도록 도와줍니다. 마찬가지로 다운 버튼은 긴 페이지에서 아래로 쉽게 이동할 수 있도록 도와줍니다. 탑(top) 다운(down) 버튼 미리보기이번에는 스크롤에 반응하는 '탑 버튼'과 '다운 버튼'은 스크롤을 올리고 내리면 '탑 버튼'과 '다운 버튼'이 부드럽게 교차되며 나오는 스크립트입니다. 버튼 이미지 파일 업로드탑(top) 다운(down) 버튼은 스크롤 시 이미지가 변경되는 스타일로 탑(top) 다운(down) 2개의 이미지 파일이 필요합니다.아래의 zip파일 .. 2024. 2. 23. 이전 1 2 3 다음 반응형
