반응형 ▸티스토리 이야기81 티스토리 꾸미기 | 북클럽 스킨 관련글 썸네일 정사각형 설정하기 '관련글' 썸네일 정사각형 설정하기'북클럽 스킨'의 관련글 썸네일은 가로로 길게 되어 있습니다. 이 형태도 나쁘지 않지만, 정사각형 비율의 썸네일이 깔끔하고 일관된 느낌을 줄 수 있어 많이 선호되며, 특히 정사각형 썸네일은 다양한 해상도에서 일관된 모양을 유지하도록 돕습니다.'관련글' 썸네일을 정사각형 비율 미리보기 '관련글' 썸네일 HTML 수정하기1) '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > HTML'로 들어갑니다. 2) [Ctrl]+[F] 키를 이용해 s_article_related_rep_thumbnail을 찾아줍니다.s_article_related_rep_thumbnail 3) img 태그에서 C176x120 부분을 C150x150으로 수정 후 [적용]을 클릭합니다. '관련.. 2025. 1. 11. 티스토리 꾸미기 | 북클럽 스킨 상단과 하단에 광고 2개씩 넣는 방법 상단과 하단에 각각 2개의 광고를 넣는 방법티스토리 관리자에서 자동 광고 삽입 기능을 사용하면 본문 상단과 하단에 광고를 삽입할 수 있습니다. 하지만 이 기능이 제대로 작동하지 않을 때가 종종 있습니다. 이에 광고 노출을 통해 더 많은 수익을 얻기 위해, HTML 코드를 사용하여 상단과 하단에 각각 2개의 광고를 넣는 방법을 소개합니다. 상단과 하단의 설정 미리보기 상단과 하단에 광고 적용 절차 요약📌 북클럽 스킨의 상, 하단에 광고를 적용하는 절차는 다음과 같이 요약할 수 있습니다.1. 애드센스 홈페이지에서 상단용 광고 2개와 하단용 광고 2개를 생성합니다.2. 생성한 상단과 하단 광고 코드 중 PUB 숫자와 SLOT를 메모장에 메모해 둡니다.3. 편집한 HTML 코드를 스킨 편집기에서 HTML 코.. 2025. 1. 9. 티스토리 | CSS 링크 버튼 서식 모음 #3 '티스토리 링크 버튼' CSS 서식 모음 #3링크 버튼을 사용하는 것은 블로그나 웹사이트를 더 효과적으로 운영하는 데 매우 유용합니다. 그 이유는 다음과 같습니다.사용자 편의성 향상: 링크 버튼은 방문자가 원하는 정보나 관련된 콘텐츠로 쉽게 이동할 수 있게 해줍니다. 이는 방문자가 더 오랜 시간 사이트에 머물도록 유도하며, 경험을 더 즐겁게 만듭니다.내부 링크 강화: 블로그 내에서 관련 포스트나 페이지로의 링크를 통해 독자들이 더 많은 콘텐츠를 탐색하도록 유도할 수 있습니다. 이는 SEO(검색 엔진 최적화)에도 긍정적인 영향을 미칠 수 있습니다.트래픽 유도: 외부 사이트로의 링크는 다른 사이트에서 트래픽을 유도할 수 있는 좋은 방법입니다. 예를 들어, 관련된 아티클이나 리소스를 링크하면 독자들이 더 많은.. 2025. 1. 4. 티스토리 | CSS 링크 버튼 서식 모음 #2 '티스토리 링크 버튼' CSS 서식 모음 #2 티스토리 링크 버튼의 CSS와 HTMl 코드 모음입니다.티스토리 스킨 편집에 들어가 CSS 코드를 CSS 코드란에 삽입 후 HTML코드를 원하는 위에 넣어주거나 서식으로 만들어 사용하시면 됩니다. 티스토리 링크 버튼의 CSS 코드 삽입 및 HTML 서식 만들기는 아래 링크를 참조하시기 바랍니다.[˙티스토리 꾸미기] - 티스토리 | CSS 링크 버튼 만들기 #1 티스토리 | CSS 링크 버튼 만들기 #1티스토리 I CSS 링크 버튼 만들기 CSS 버튼 위의 CSS버튼의 소스 코드입니다. 티스토리 스킨 편집에 들어가 아래 코드를 CSS 코드란에 삽입 후 HTML코드를 서식으로 만들어 사용하시면 됩니다. 목차 CSgalam.tistory.comCSS 버튼 적용 .. 2025. 1. 4. 티스토리 꾸미기 | HOME / TOP / BOTTOM 반응형 버튼 만들기 HOME / TOP / BOTTOM 버튼 만들기 #2HOME / TOP / BOTTOM 버튼의 장점HOME 버튼: 사용자가 현재 페이지에서 빠르게 메인 화면으로 이동할 수 있도록 합니다. 특히 블로그 웹사이트가 여러 섹션으로 구성된 경우, 이 버튼을 통해 쉽게 접근할 수 있습니다.TOP 버튼: 긴 페이지를 스크롤한 후 원래 맨 위로 돌아가야 할 때 유용합니다. 많은 스크롤이 필요한 페이지에서 사용자의 시간과 노력을 절약해줍니다.BOTTOM 버튼: 긴 페이지에서 하단(예: 댓글 섹션, 푸터)으로 빠르게 이동할 수 있습니다. 사용자에게 특정 섹션(예: FAQ, PDF 정보)으로 바로 접근할 수 있는 방법을 제공합니다.이번 HOME, TOP, BOTTOM 버튼 코드는 제가 기존에 만들었던 TOP 버튼을 조합하.. 2025. 1. 1. 티스토리 꾸미기 | HOME / TOP / BOTTOM 버튼 만들기 HOME / TOP / BOTTOM 버튼 만들기HOME / TOP / BOTTOM 버튼의 장점1. HOME 버튼 빠른 이동: 사이트의 홈 페이지로 즉시 이동할 수 있어 사용자가 필요로 하는 정보를 쉽게 찾을 수 있습니다.2. TOP 버튼 효율적인 네비게이션: 긴 페이지나 많은 콘텐츠를 포함한 포스트에서, 버튼 클릭만으로 본문의 최상단으로 쉽게 이동할 수 있습니다.3. BOTTOM 버튼 콘텐츠의 끝으로 빠른 이동: 사용자가 페이지의 끝부분으로 즉시 이동할 수 있어 필요한 정보를 빠르게 확인할 수 있습니다.이 세 가지 버튼은 각각 사용자가 웹 페이지 내에서 더욱 효율적으로 이동할 수 있게 도와주어 사용자 경험을 크게 향상시킵니다. HOME / TOP / BOTTOM 버튼 미리보기 See the Pen HO.. 2024. 12. 19. 티스토리 꾸미기 | 반응형 탑(TOP) 버튼 만들기 마우스 오버 시 반응하는 탑(TOP) 버튼 만들기티스토리 블로그의 TOP 버튼은 하단의 '푸터' 부분에 작게 위치하거나 스킨에 따라 아예 없을 수도 있습니다. 따라서 페이지를 끝까지 내리지 않는 이상 스크롤을 올려서 상단으로 이동해야 하는 불편함이 있습니다. 그러나 TOP 버튼을 설치하면 포스팅을 읽다가 어디서든 클릭만 하면 본문의 제일 상단으로 쉽게 이동할 수 있습니다. 탑(TOP) 버튼 미리보기탑(TOP) 버튼은 화면 우측 하단에 위치합니다.스크롤을 내리면 'TOP 버튼'이 나타나고, 스크롤을 다시 올리면 'TOP 버튼'이 사라집니다.'TOP 버튼'에 마우스를 올리면 'TOP 버튼'에 그림자가 생기며 '클릭' 시 최상단으로 올라갑니다. 탑(TOP) 버튼 아이콘 업로드1. 아래의 파일 중 마음에 드는.. 2024. 12. 18. 티스토리 북클럽 | 코드블럭에 D2Coding 코팅체 적용하기 코드블럭에 D2 Coding 코팅체 적용하기개발자들 사이에서 한글과 영문의 조화가 잘 되어 평이 좋은 네이버 D2Coding 폰트를 코드 블록에 적용해 보겠습니다. 모든 폰트를 바꾸는 것은 아니며, 코드 블록에 한정하여 적용합니다. ⁕ 제가 북클럽 스킨을 사용하고 있기 때문에 북클럽을 중심으로 설명드립니다. 아마 다른 스킨들도 웹폰트 적용 위치만 약간 다를 뿐, 큰 차이는 없을 것이라 생각합니다.📌 D2Coding 폰트를 적용하는 이유!일부 폰트에서는 알파벳, 한글, 특수기호, 숫자들의 구별이 어려운 경우가 있습니다. 예를 들어, 숫자 1과 알파벳 l, 숫자 0과 알파벳 O는 폰트에 따라 구별하기 어려울 수 있습니다. D2Coding 폰트는 이러한 혼선을 최소화하기 위해 나눔바른고딕을 기본으로 하고 있.. 2024. 11. 30. 티스토리 북클럽 스킨 | 글 목록 하단, 페이지 번호 꾸미기 글 목록 하단, 페이지 번호 꾸미기. 제가 사용하는 웹폰트 때문인지 북클럽 스킨의 특성 때문인지는 알 수 없지만 글 목록 하단의 페이지 목록에서 사용자가 현재 보고 있는 페이지를 확인하기 어려운 경향이 있습니다. 이 부분을 CSS 코드를 수정하여 테두리로 강조하고 또 마우스 오버 시 밑줄을 없애고 색상을 변경하여 쉽게 인식할 수 있도록 수정해 보겠습니다. 페이지 번호 꾸미기 예제페이지 번호 꾸미기 (전)페이지 번호 꾸미기 (후) 페이지 번호 꾸미기 CSS 코드 수정① CSS코드를 수정하려면 '관리자 홈'에서 꾸미기 > 스킨 편집 > html 편집 > CSS로 들어갑니다.② ctrl+F를 눌러 .pagination .selected { 를 검색하여 찾아줍니다..pagination .selected { ③ .. 2024. 11. 15. 이전 1 2 3 4 5 ··· 9 다음 반응형
