본문 바로가기
반응형

▸티스토리 이야기/•티스토리 꾸미기54

타이틀 티스토리 북클럽 스킨 | 본문 상단 브레드크럼 옆에 URL 복사버튼 추가하기 목차 본문 상단 브레드크럼 옆에 URL 복사버튼 추가오늘은 본문 상단 '브레드크럼' 옆에 URL 복사버튼을 추가하는 방법과 '브레드크럼'을 설정하지 않았을 때 URL 복사버튼을 추가하는 방법에 대해 알아보겠습니다. URL 복사는 보통 상단의 주소창에서 바로 복사하거나 하단의 공감버튼 옆의 SNS 공유버튼에서 복사를 해도 되지만 본문 상단 제목 위에 URL 버튼을 만들어 줌으로써 좀 더 쉽게 게시물의 URL을 공유할 수 있도록 해줍니다. 항상 그렇듯 제 글이 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 'URL 버튼'을 적용할 수 있으니 차근차근 따라 해 보시기 바랍니다. 본 내용은 제가 사용하는 '북클럽 스킨' 위주로 작성 되었습니다. URL 복사버튼 추가하기URL 복사버.. 2024. 3. 19.
타이틀 티스토리 북클럽 스킨 | 사이드바 카테고리 밑줄 넣기 및 마우스 오버 색상 변경 목차'북클럽 카테고리' 밑줄 넣기 및 마우스 오버 색상 변경이번에는 조금 밋밋해 보이는 티스토리 북클럽 사이드바의 카테고리에 밑줄을 넣는 방법과 마우스를 올렸을 때 밑줄 없이 색상이 변경되는 방법에 대해 알아보겠습니다. 적용 예제는 아래 미리보기를 참고하세요.미리보기 '북클럽 카테고리' 폰트 키우기먼저 작아 보이는 듯한 카테고리의 폰트를 아래처럼 조금 크게 만들어 줍니다. 카테고리 수정을 하려면 먼저 CSS 탭으로 이동합니다.1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.    2. Ctrl + F를 이용해 .sidebar .category ul li {를 검색 후 아래처럼 CSS코드를 수정하고 '저장'을 눌러 마무리합니다..sidebar .category ul.. 2024. 3. 7.
타이틀 티스토리 꾸미기 | 프로필 카드 꾸미기 및 삭제 방법 티스토리 '프로필 카드' 꾸미기 및 삭제 방법.티스토리 '프로필 카드'는 티스토리 블로그에서 사용자의 정보와 프로필을 간략하게 보여주는 작은 카드 형식의 UI를 말합니다. 이 카드는 블로그의 하단에 표시되며, 주로 사용자의 프로필 사진, 사용자명, 소개 문구 등을 보여줍니다.이를 통해 방문자들은 블로거에 대한 간단한 정보를 쉽게 파악할 수 있습니다.최근 '프로필 카드' 기능이 기존에 모바일 환경에서만 보이던 것을 업데이트를 통해 PC 환경에서도 보이도록 설정되었습니다. 업데이트된 '프로필 카드'가 내가 사용하고 있는 스킨과 어울린다면 크게 상관없지만 그러지 않으신 분들은 조금 꾸며보거나, 보이지 않도록 수정하는 것이 좋겠습니다. '프로필 카드' 꾸미기 미리보기.기존의 밋밋한 '프로필 카드'를 아래처럼 스.. 2024. 2. 29.
타이틀 티스토리 북클럽 스킨 | 스크롤 프로그레스 바(Progress Bar) 초간단 적용 목차 블로그 상단에 스크롤 진행 프로그레스 바 적용하기. 다른 분들의 블로그를 보다 보면 블로그 상단에 눈에 띄는 이상한 그래프 게이지가 있습니다. 스크롤을 내리면 상단에 막대가 늘어났다 스크롤을 다시 올리면 줄어들었다 하면서 끝까지 내리면 막대가 끝까지 채워지더라고요. 그래서 궁금해 검색을 해보니 '프로그레스 바(Progress Bar)'라는 UI였습니다.. 좀 더 검색을 해보니 역시 많은 분들이 '프로그레스 바'의 코드를 올려 주셨으나 왠지 북클럽 스킨에는 적용이 되지 않더라고요, 그래서 이 코드 저 코드를 다 적용해 보며 코드를 조합해 북클럽 스킨에도 적용 가능한 초간단 코드를 만들어 봤습니다. 제 블로그 상단을 보시면 상단에 '프로그레스 바'가 나오는 걸 확인할 수 있습니다. 프로그레스 바(Pro.. 2024. 2. 28.
타이틀 티스토리 북클럽 스킨 | 카테고리 탐색경로 브레드크럼(breadcrumb) 목차 북클럽 스킨, 카테고리 탐색경로 브레드크럼(breadcrumb) 티스토리 최적화를 검색하다 검색 엔진 최적화(SEO)에 도움이 되는 브레드크럼(breadcrumbs)이라는 게 있다는 걸 알게 되었습니다. 아래처럼 검색 엔진 최적화(SEO) 등 여러 가지 장점들이 있지만 제 경우는 일단 멋져 보여서 적용을 해봤습니다. ^^ 항상 그렇듯 제 글이 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '브레드크럼(breadcrumb)'을 적용할 수 있으니 차근차근 따라 해 보시기 바랍니다. 브레드크럼(breadcrumb)은 SEO 최적화 방법 중 하나로 사이트나 앱에서 사용자가 현재 어느 위치에 있는지를 보여주는 내비게이션 요소입니다. 이러한 요소의 주요 장점은 다음과 같습니다: .. 2024. 2. 28.
타이틀 티스토리 꾸미기 | F12 개발자 도구 차단하기 F12 개발자 도구 차단하기이번에는 개발자 도구(F12)와 소스코드 검사를 방지하는 스크립트에 대해 알아보겠습니다. 제가 이 스크립터에 관심을 가지게 된 이유는, 웹 서핑 중 우연히 들어간 블로그에 제가 포스팅한 '소제목 서식모음'이 거의 그대로 관련 출처도 없이 포스팅되어 있는 것을 보고 불펌을 막아야겠다는 생각이 들어서입니다. 물론 저도 여기저기 검색을 해서 가져온 코드들도 있고, 그분도 일부 코드들은 가져다 사용할 수 있지만 썸네일부터 설명에 사용된 표, 글색까지 그렇게 가져다 사용하는 건 아니라고 생각합니다. 검색을 해보니 많은 분들이 불펌 차단에 관련된 스크립트들을 올려 주셨고 그중 두 가지 스크립트를 소개해 들릴까 합니다. 사실 스크립트로 개발자 도구 창을 막는 방법은 정상적인 방법은 아니라고.. 2024. 2. 16.
타이틀 티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS) ▤ 목차 북클럽 스킨 상단 메뉴 고정하기(CSS) 티스토리 블로그 북클럽 스킨에서 상단 메뉴 고정 방법에 대해 포스팅한 많은 글이 있는데, 간단하게 구현하는 방법을 공유합니다. 수정 방법은 CSS에서 #header, #aside, #dimmed 세 부분만 수정하면 되는 간단한 작업입니다. 항상 그렇듯 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '상단 메뉴 고정하기'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다. 북클럽 스킨 상단 메뉴 고정하기 1. '블로그관리의 꾸미기 > ①스킨 편집 > ②html 편집 > ③CSS'로 들어갑니다. CSS코드 수정 1. 헤더 부분 수정 : #header css탭에서 Chift + F를 이용해 #header를 검색합니다. (118.. 2024. 2. 2.
타이틀 티스토리 블로그 최근글, 인기글 분리하기 | 북클럽 스킨 목차 북클럽 스킨 | 최근글, 인기글 분리하기. 이번은 티스토리 북클럽 스킨의 사이드바에 있는 '최근글과 인기글'을 분리하는 방법에 대해 알아보도록 하겠습니다. 기본적으로 '최근글과 인기글'은 겹쳐서 나오기 때문에 한눈에 보이지 않는 단점이 있습니다. 나의 글을 더 많이 노출시켜 더 오랜 시간 동안 내 블로그에 머물며 다른 글도 볼 수 있도록 하기 위해 '최근글과 인기글'을 분리하여 사용하시는 분들이 많다고 알고 있습니다. 분리하는 방법을 알기 위해 검색을 해보면 여러 방법이 있지만 제가 사용한 방법이 가장 간단하고 북클럽 스킨의 기본 틀도 변형되지 않습니다.  최근글과 인기글의 분리 전과 후 비교아래 그림처럼 겹쳐 저 있는 최근글과 인기글이 아래위로 나누어집니다.  스킨편집1. '관리자 홈'에서 꾸미기.. 2024. 2. 1.
타이틀 블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨 목차 블로그 상단의 '타이틀 로고' 크게 만들기 오늘은 아래 그림처럼 블로그 상단의 '타이틀 로고'를 기존의 크기보다 조금 더 크게 만드는 법에 대해서 알아보겠습니다. 로고 CSS코드 수정하기 변경 방법은 티스토리 스킨 편집에서 CSS코드를 수정하면 됩니다. 1. CSS코드를 수정하려면 '관리자 홈'에서 꾸미기 > 스킨 편집 > html 편집 > CSS로 들어갑니다. 2. ctrl+F를 눌러 /* Layout Selector */를 검색합니다. /* Layout Selector */ 3. 아래 header 코드에서 자신의 로고 크기를 키워 주시면 됩니다. 로고가 텍스트인 경우는 'font - size'의 숫자를 올려주고 로고가 이미지인 경우는 'height'의 숫자를 올려 주시면 됩니다. header 코.. 2024. 1. 1.
반응형
home

티스토리툴바