반응형 ▸티스토리 이야기74 티스토리 꾸미기 | 블로그 하단의 푸터 영역 꾸미기 #2 블로그 '푸터' 영역 꾸미기 #2푸터를 꾸미는 주요 이유▪ 정보 제공: 푸터에는 연락처, 사이트맵, 저작권 정보 등 중요한 정보를 포함할 수 있습니다. ▪ 브랜드 이미지 강화: 통일된 디자인과 색상 등을 사용하여 브랜드 이미지를 강화하고 일관성을 유지할 수 있습니다. ▪ SEO 향상: 푸터에 키워드를 포함한 텍스트를 추가하면 검색 엔진 최적화(SEO)에 도움이 될 수 있습니다.▪ 푸터를 잘 꾸미면 웹사이트의 전반적인 사용자 경험이 향상되고, 방문자들에게 긍정적인 인상을 줄 수 있습니다.이번에는 '푸터' 영역 꾸미기 #1에 이어 글 크기를 키우거나 로고를 추가하여 '푸터'를 더 스타일리시하게 꾸미는 방법에 대해 알아보겠습니다. '푸터 1'의 글 크기 변경하기푸터 1의 글 크기를 변경하는 방법은 HT.. 2025. 1. 15. 티스토리 꾸미기 | 블로그 하단의 푸터 영역 꾸미기 블로그 '푸터' 영역 꾸미기 #1블로그의 푸터(Footer)란 블로그 하단에 위치한 영역으로, 주로 저작권 정보나 사업자 정보 등을 표기하는 부분을 말합니다. 이 영역은 방문자들에게 중요한 정보를 제공할 뿐만 아니라, 블로그의 전체적인 디자인과 분위기를 완성하는 데에도 중요한 역할을 합니다. 티스토리 블로그의 경우, 기본 푸터 문구는 "Designed by 티스토리 (c) Kakao Corp."로 설정되어 있지만, 사용자의 취향에 맞게 수정할 수 있습니다. 이를 통해 블로그가 본인만의 개성을 표현할 수 있게 됩니다.내 블로그 관리 > 왼쪽 메뉴에서 꾸미기 > 스킨편집으로 들어가서 아래 부분의 푸터 문구 1과 푸터 문구 2를 수정해주면 됩니다. '푸터'의 기본 문구 변경하기푸터 변경하기:처음 블로그를 시.. 2025. 1. 13. 티스토리 꾸미기 | 북클럽 스킨 관련글 썸네일 정사각형 설정하기 '관련글' 썸네일 정사각형 설정하기'북클럽 스킨'의 관련글 썸네일은 가로로 길게 되어 있습니다. 이 형태도 나쁘지 않지만, 정사각형 비율의 썸네일이 깔끔하고 일관된 느낌을 줄 수 있어 많이 선호되며, 특히 정사각형 썸네일은 다양한 해상도에서 일관된 모양을 유지하도록 돕습니다.'관련글' 썸네일을 정사각형 비율 미리보기 '관련글' 썸네일 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. 이전 1 2 3 4 ··· 9 다음 반응형
