티스토리 오픈 API 아래 링크를 통해 API 설정을 합니다. 여러가지 이유에서 API가 필요할 수 있습니다. 한 번에 다 하는 것보다는 한 가지씩 진행하는 것이 좋습니다. 오늘은 API등록을 하는 것부터 시작하겠습니다. 아래 링크를 통해 앱등록을 진행하도록 해보겠습니다. Tistory 좀 아는 블로거들의 유용한 이야기 www.tistory.com 오픈 API 앱등록 서비스명: API를 사용하고자 하는 블로그 이름 서비스 URL: 블로그 전체주소 (https://) 서비스 형태: 원하는 서비스 선택 (웹서비스) 서비스 권한: 원하는 권한 선택 (읽기, 쓰기) CallBack: 서비스 URL과 동일하게 입력 (https://) 이상 없이 모든 값을 입력하였다면 제일 하단에 있는 등록버튼을 눌러 마무리합니다..>

이미지 모바일 확대 티스토리 모바일에서 이미지를 보게 되면 확대해서 특정 부분을 확대해서 보고 싶을 때도 있는데요. 팝업으로 띄워서 이미지만 볼 수는 있지만 확대는 되지 않아 뭔가 2% 부족한 느낌. 그래서 찾았습니다. 간단하게 아래 코드만 수정해 주시면 이미지를 확대해서 볼 수 있는 기능을 사용할 수 있습니다. 이미지 확대 소스 티스토리 HTML편집 화면에서 Ctrl + F를 눌러 viewport를 찾습니다. viewport 찾고 아래 안내해 드리는 코드로 교체하시면 되는데 뭔가 불안하신 분은 기존 소스를 삭제하지 말고 감춰두고 사용하세요. 그리고 아래 코드로 대체하시면 되겠습니다. 결과 및 팁 코드를 교체하시고 모바일에서 이미지를 확인해 보시면 이쁘게 확대기능이 되는 것을 확인하실 수 있습니다. 간단..>

방문자 카운트 효과 티스토리 블로그를 꾸미다가 보면 신기한 기능을 많이 발견하고는 합니다. 그중에 방문자 카운트가 숫자만 보여주는 것이 아니라 애니메이션처럼 보여주는 것도 신기했습니다. 카운트 애니메이션 효과를 적용방법을 알려드리도록 하겠습니다. Github 참고하였습니다. GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becom Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible. - Gi..>

Lazy LoadingLazy Loading은 페이지 렌더링 시점에 중요하지 않는 리소스 로딩을 추후에 필요할 때 로드가 되도록 하는 것을 말합니다. 한 마디로 블로그 속도개선에 도움되는 효과입니다. 큰 효과를 볼 수 있는 것은 아니지만 데이터는 쌓이고 쌓여 좋은 결과를 낼 수 있기 때문에 미리 준비해 두면 좋을 것으로 예상합니다. 그럼 적용방법에 대해 알아보겠습니다. 일단 아래 파일을 다운로드하여 티스토리 스킨에 업로드합니다.더보기적용방법파일을 업로드하셨다면, 파일의 링크 주소를 복사하여 아래 스크립트 해당 위치에 붙여 넣어 줍니다.링크주소를 붙여 넣고 완성된 스크립트는 HTML편집 사이에 붙여 넣습니다. 완성되었습니다. 확인해 보시면 크게 다른 점은 못 느끼실 수 있으나 아주 좋은 효과를 얻으셨습니..>

카테고리 괄호 지우기 티스토리 카테고리에 기본적으로 적용되어 있는 괄호()를 지우고 원하는 스타일로 바꾸는 방법입니다. 자신의 블로그의 class명과 id명 확인을 합니다. 확인을 하셨으면, #category .c_cut 부분을 자신의 스킨에 맞게 수정하여 위쪽에 붙여 넣습니다. 카테고리 괄호 디자인 이제 괄호는 삭제되었습니다. 이제 아래 CSS 코드 작성으로 괄호대신 사용할 자신만의 디자인을 합니다. /* 카테고리 글 수 커스텀 */ #sidebar #category .tt_category .link_item .c_cnt, #sidebar #category .tt_category .link_sub_item .c_cnt { font-weight: initial; --tw-bg-opacity: .1; ba..>

애드센스 검색버튼 삭제구글 애스센스에서 제공하는 버튼인 건 알겠다. 그런데 왜 달렸는지는 모르겠다. 블로그 화면에 보이는 위치가 거슬린다. 그래서 안 보이게 하기로 했습니다. 검색 버튼이 왜 달렸는지 아시는 분은 댓글로 알려주시면 감사하겠습니다.검색 버튼 제거 코드/* 구글 검색 버튼 제거*/.auto-prose-wrapper, .autoprose-search-button { display:none !important;}검색 버튼 삭제 방법은 티스토리 CSS 편집에 위 코드를 넣어주시면 안보입니다.>

티스토리 목록 광고 티스토리 스킨을 사용하다가 보면 목록 상단광고와 하단에 치환자가 없는 경우가 있습니다. 그때 치환자를 수동으로 추가하여 광고송출을 할 수 있는 방법 입니다. 상 하단 치환자 // 목록 상단 치환자 [#_revenue_list_upper_#] // 목록 하단 치환자 [#_revenue_list_lower_#] 티스토리 목록 광고 치환자 사용 시 양쪽에 # 하나씩 추가하셔서 사용하세요. 치환자 위치 찾기 // 목록 치환차 찾기 [_list_conform_] 티스토리 Html 편집에서Ctrl + F 눌러 치환자 위치를 찾습니다. list_conform 기준으로 위쪽이 상단 아래쪽이 하단입니다. 목록 하단의 경우 각 스킨마다 다를 수 있습니다. 천천히 위치를 찾아 광고 치환자 코드를 입력하세..>

빙 웹마스터 도구 티스토리 블로그 또는 웹사이트 관리를 위해 빙 웹마스터 도구를 활용하면서 가장 많은 발생을 하는 오류 중 하나인 "너무 짧은 제목" 해결방법을 알아보겠습니다. 사이트 검사를 통해 원활한 URL을 제공하려고 하였으나 아래 이미지와 같은 오류가 발생합니다. 이유는 '너무 짧은 제목'이라는 SEO 문제였습니다. 오류 발생 오류 대한 안내를 살펴보면 수정사항에 대해 알려줍니다. 무엇에 관한 문제입니까? 이 페이지의 제목 길이가 15자 미만입니다. 제목이 너무 짧으면, 페이지의 관련성을 이해하는 데 필요한 정보를 당사와 사용자에게 충분히 제공하지 못할 수 있습니다. 어떻게 수정하나요? 태그 안에 더 많은 설명 내용을 추가합니다. 페이지 내용을 잘 설명하도록 고유성과 관련성을 높입니다. 제목 태그..>

모바일 비활성화 왜 하나? 티스토리 모바일웹은 스킨 편집이 불가능합니다. 거의 대부분 티스토리 사용자들은 반응형 블로그를 사용하고 있습니다. 하지만 티스토리는 모바일 비활성화 대한 방법을 제공하지 않습니다. 모바일웹을 비활성화하게 되면 일관된 디자인을 보여줄 수 있습니다. 다른 블로그 자료와 다른 점 다른 블로그에서 제공하는 코드의 경우 게시글은 리디렉션 되지만 홈페이지는 모바일웹으로 보이는 경우가 많습니다. 하지만 지금 제공해 드리는 코드는 위와 같은 문제가 없습니다 제공하는 코드의 장점 모바일 웹 홈페이지에 접속해도 PC버전으로 리디렉션 됩니다. 티스토리 어플을 사용하셔도 모바일 화면으로 보이지 않습니다. 개발자 콘솔 오류가 발생하지 않습니다. 비활성화 적용방법 아래 자바스크립트 코드 파일을 다운로드..>

페이드인 효과 지금 저의 티스토리 블로그에는 Fade-in 효과가 적용되어 있습니다. 게시글을 표현할 때 가장 예쁘게 표현할 수 있는 방법이 아닐까 생각합니다. 저와 같은 생각을 가지고 계신 분들에게 이글이 도움이 되었으면 합니다. /*이미지 스크롤 효과*/ figure.imageblock, #tt-body-page figure.imageblock,.image-container { opacity:0; } 위에 있는 CSS 코드를 복사하여 스킨편집 CSS 영역에 붙여 넣어줍니다. Fade-in 기능이 적용되는 범위는 이미지와 이미지를 2~3장 붙여 나열하는 imageblock과 container 두 가지입니다. 페이드인 적용 방법 위코드는 HTML 편집영역에서 코드 바로 위에 붙여 넣어주시면 완료입니다. ..>

Art 태그 자동화 똑같은 작업을 계속 반복하다 보면 익숙해져서 실수가 줄어들기는 하지만, 때로는 순간적으로 그 작업을 빠트려 버리는 경우도 있습니다. 또한, SEO 최적화를 위해 "art" 태그를 입력하는 작업도 해야 하지만, 가끔 이런 입력을 잊어버리는 글도 발생할 수 있습니다. 이런 실수를 방지하기 위해서는 자동화 방법을 찾는 것이 가장 효과적일 수 있습니다. 위 코드는 티스토리에 첨부된 이미지에 art 태그를 자동을 입력해 주는 기능을 가지고 있습니다. 사용방법 사용방법을 알아보도록 알려드리도록 하겠습니다. 티스토리 스킨편집 > HTML편집 > Body 적당한 위치에 복사 붙여 넣기 합니다. 위 스크립트를 그냥 바로 복사 붙여 넣기 하시면 안 됩니다. 주의사항 티스토리 스킨이 개인마다 차이가 있기..>

unicode-range는 CSS 디스크립터(discriptor)로써, @font-face로 정의된 폰트를 특정 character의 범위를 지정해 줄 수 있습니다. /* unicode-range */ unicode-range: U+0-10FFFF; // 기본값, 모든 글에 적용 unicode-range: U+0020-007E; // 영문, 숫자, 특수문자 적용 unicode-range: U+0041-005A; // 영문 대문자 unicode-range: U+0061-007A; // 영문 소문자 unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E; // 특수문자 범위 unicode-range: U+0030-0039; // 숫자 범위 unic..>