본문으로 바로가기

쓰윔's FootballManager https://swimfm.tistory.com/

티스토리

해당되는 글 10
thumbnail
그외/유용한 정보

티스토리 공감 버튼 조작하여 꾸미기 혹은 없애기

티스토리에서 기본 제공하는 공감 버튼은 밋밋하고 눈에 잘 띄지도 않습니다. 이래서는 클릭률이 낮을 수밖에 없습니다. 물론 공감은 누가 눌러준다고 해서[각주*거기다 누가 눌렀는지 알 수도 없습니다.*] 상위노출이 된다거나 하는 것도 아니고, 추가적인 혜택이라곤 공감 5개가 넘을시 티스토리 홈페이지의 [**스토리**]에 올라간다는 것 뿐입니다. 그래도 글을 작성하면서 누군가가 눌러준 공감 버튼 덕분에 동기부여가 되기도 하고, 기분이 좋아지기도 합니다. 그래서 이번 시간에는 공감 버튼을 CSS로 조작해 좀 더 눈에 띄게 꾸미거나, 아예 삭제하는 방법을 알아보겠습니다. HTML이나 CSS를 전혀 모르시는 분들도 따라하실 수 있도록 복사-붙여넣기로만 할 수 있게 정리하겠습니다. 공감 버튼 삭제 버튼을 아예 삭제하..
thumbnail
그외/유용한 정보

티스토리 모바일 스킨을 완전히 없애서 광고 송출하는 방법

티스토리 블로그의 주소에서 /m을 더하면 카카오에서 제작한 모바일 스킨으로 강제적으로 넘어갑니다. 모바일 스킨의 경우 다음과 같은 단점이 있습니다. 자바스크립트, CSS 수정이 불가능해서 꾸밀 수 없습니다. 반응형 스킨에서 사용할 수 있는 기능을 사용할 수 없습니다. 스킨에서 입력한 광고 송출 기능이 제한됩니다. 폰트도 모바일 스킨에서 정해진 것으로 제한됩니다. 이런 문제를 해결하려면 답은 하나 뿐입니다. 모바일 스킨 페이지를 강제로 폐쇠해야 합니다. 다만 약간의 번거로운 과정을 거쳐야 합니다. 모바일 페이지 완전히 폐쇠 하는 방법 완벽하게 모바일 페이지를 비활성화 하려면 [**자바스크립트**]와 [**플러그인**]의 도움을 받아야 합니다. 다만 자바스크립트를 전혀 모르는 분들을 위해서 복사-붙여넣기만 ..
thumbnail
그외/유용한 정보

티스토리 블로그 더보기 버튼 css로 꾸미기

기본 스킨에서 제공하는 [블럭*더보기*] 버튼은 밋밋합니다. 사용자가 누르기에도 불편하며, 깔끔하지도 못합니다. 그래서 이번 시간에는 이 못난이 버튼을 깔끔하게 꾸며보도록 하겠습니다. 초보자분도 따라하실 수 있게 [**CSS**]만 복사 후 붙여넣기해도 적용하실 수 있게 하겠습니다. 아래의 사진은 최종 완성본입니다. 더보기 버튼 꾸미기 우선 수정할 블로그의 관리창에 들어가신 후 위의 사진처럼 [**스킨 편집**]을 눌러주세요. 그러면 아래와 같은 화면이 나올 겁니다. 이제 [**html편집**]을 눌러주세요. 이제 CSS탭을 눌러주신 후, 가장 아래의 빈 공간으로 가주세요. 이제 준비는 끝났습니다. CSS에서 아래의 코드를 복사-붙여넣기를 해주신 후 저장해주시면 끝입니다. .btn-toggle-morel..
thumbnail
그외/유용한 정보

티스토리 애드센스 블록 감지 방법과 차단해제 요청하기

[블럭*애드블록(Adblock)*]은 애드센스 광고를 차단하는 확장 프로그램입니다. 이 프로그램을 사용하면 블로그 내에 설치해둔 애드센스가 나오지 않습니다. 그래서 이번 시간에는 이 애드블럭을 감지하고, 이 사이트를 예외 설정 해달라고 부탁하는 글귀를 띄우는 방법을 알아보도록 하겠습니다. 아래는 미리 보는 최종완성본 모습입니다. 애드블록을 키고 들어가자 예외 설정을 부탁하는 메세지가 뜨는 것을 볼 수 있습니다.[각주*이 블로그에선 적용하고 있지 않습니다.*] 감지->감지되었다면 자바스크립트를 발동하는 형태입니다. 자바스크립트를 모르시는 분이라도 복사+붙여넣기로 간단하게 따라할 수 있도록 소개하겠습니다. 애드블록 감지하기 간단 원리 설명 감지하는 방법은 간단합니다. 애드블록을 켠 채 광고가 있는 블로그로 ..
thumbnail
그외/유용한 정보

티스토리 블로그에서 스키마 태그, 리치 스니펫 활용하기

구글에 글을 검색했을 때 내 글을 더 돋보이게 만들 수 있는 방법이 있습니다. 바로 [블럭*스키마 태그*]입니다. 이 태그는 구글에서 공식적으로 권장하는 태그입니다. 구글이 제공하는 검색엔진 봇 입장에선 글의 어느 부분이 중요하고 어느 부분이 덜 중요한지를 파악하는 데 한계가 있습니다. 스키마 태그는 이 중요한 부분을 검색엔진에 알려주는 역할을 합니다. 실제로 구글 서치콘솔에선 스키마 태그를 적용한 글을 개선사항이라는 이름으로 표시해줍니다. 스키마 태그가 적용된 모습과 효과 아래 사진은 스키마 태그가 적용된 제 실제 포스트입니다. 일반적인 검색결과와 다르게 나와있다는 걸 보실 수 있습니다. 검색결과 아래에 3가지의 Q&A가 있어서 다른 검색결과보다 더 눈에 띕니다. 또한 사용자 입장에선 제 글에 들어가기..
thumbnail
그외/유용한 정보

티스토리 블로그에서 자동 목차 기능 간편하게 만들기

블로그에 방문한 사람들에겐 [블럭*목차*]가 중요한 요소입니다. 필요한 정보를 취사 선택해서 빠르게 얻어나갈 수 있기 때문입니다. 또한 블로거에게도 유용한 기능인데 구조적으로 글을 작성해서 검색엔진에 SEO를 어필할 수 있기 때문입니다. 다만 일일히 수동으로 목차를 넣거나, 서식으로 만들어 쓰는 것은 시간도 걸리고 비효율적입니다. 그래서 이번 시간에는 자동으로 목차를 만드는 방법을 알아보겠습니다. [블럭*HTML*], [블럭*CSS*], [블럭*JAVASCRIPT*] 수정이 필요하며 그 분야를 잘 모르시는 분들을 위해서 복사-붙여넣기만 하면 적용할 수 있도록 설명하겠습니다. 작동의 원리 구조적인 글을 작성하려면 검색엔진에게 중요한 글[각주*제목*]이라고 알려주는 H2,H4 태그로 제목-소제목을 구성해야 ..
thumbnail
그외/유용한 정보

티스토리 블로그 본문 상단 애드센스 광고 2개 넣는 방법

티스토리 블로그에 애드센스를 넣는 가장 대중적인 방법은 본문 상단에 2개의 광고를 넣는 겁니다. 이번 시간에는 초보자도 따라할 수 있게 손쉬운 코드를 알아보겠습니다. 아래는 최종 완성본이며, 제 블로그에 실제 적용되어 있는 구도입니다. 따라하신다면 저처럼 광고를 배치하실 수 있을 겁니다. 준비물 애드센스 계정에서 반응형 애드센스 광고 단위를 만들어주세요. [**data-ad-client**] 코드를 준비해주세요. 각 광고당 하나씩 있는 [**ad-slot**] 코드를 준비해주세요. 위의 준비물만 있다면 간단하게 복사/붙여넣기로 하실 수 있게 만들겠습니다. 혹시라도 [**data-ad-client**]와 [**ad-slot**]를 얻는 방법을 모르신다면 이렇게 하시면 됩니다. [블럭*애드센스*]에 접속해서..
thumbnail
그외/유용한 정보

티스토리 사이드바에 애드센스 광고 위치 고정해 따라다니게 하기

PC에서 애드센스 광고를 게재할 때 선호받는 위치 중 하나가 사이드바입니다. 사용자의 시선이 자주 머무는데다가, 글을 읽어도 따라다니는 광고를 게재할 수 있기 때문입니다. 아래는 현재 제 블로그의 홈화면인데, 빨간색으로 표시한 사이드바의 광고가 눈에 띈다는 걸 알 수 있습니다. 뿐만 아니라 사이드바 광고는 유저를 따라다니며 꾸준히 존재감을 어필할 수 있습니다. 특히 그 동안엔 사이드바 광고 고정이 약관위반이다vs아니다로 갑론을박이 있을 정도로 논란이 있었는데, 구글에서 공식적으로 사용을 인가해주면서 불안요소도 사라진 상태입니다. 이번 시간에는 티스토리 블로그에서 사이드바에 애드센스 광고를 고정해서 스크롤을 내릴 때마다 따라다니게 하는 방법을 알아보겠습니다. 준비물 당연하지만 애드센스를 게재하실 수 있어야..
thumbnail
그외/유용한 정보

티스토리 블로그에 사용할 레이지로드 주입기

레이지 로드 주입기 alt변환 켜기 레이지로드 주입결과물 복사 자세한 사용법은 아래에 정리해뒀습니다. 처음 사용하시는 분의 경우 주의사항도 읽어보시는 게 좋습니다. 그리고 아직까지 레이지로드가 어떤 개념인지 모르신다면, 제가 쓴 글을 읽어주세요. 주입기 사용 설명서 티스토리에서 레이지로드를 사용하려면 번거로운 과정을 거쳐야 합니다. 그래서 손쉽게 레이지로드를 주입할 수 있도록 도구를 만들어봤습니다. [참고*이 도구는 신에디터/구에디터 모두 지원합니다.*] 방법은 간단합니다. 글 작성을 완료하신 후에 [**HTML 모드**]로 가신 후에 태그를 모두 복사해옵니다. 그리고 원본 텍스트 입력란에 붙여넣기 해주세요. 그리고 레이지로드 주입을 누르면 결과물이 나옵니다. 결과물복사를 눌러서 복사해주신 후에 그걸 다..
thumbnail
그외/유용한 정보

티스토리에서 레이지 로드(Lazy Load)를 사용하는 방법

요즘 웹에선 레이지 로드(Lazyload) 기능을 사용하는 게 당연시 됩니다. 커다란 커뮤니티에 들어가보면 이 기능이 없는 곳이 더 드뭅니다. 모두들 짐작하시겠지만 레이지로드가 로딩 속도를 빠르게 해주고, 사용자의 데이터와 서버측의 데이터를 아껴주는 효과가 있기 때문입니다. LazyLoad란? 웹에서 가장 큰 비중을 차지하는 데이터는 이미지입니다. 글자를 실컷 타이핑해도 데이터는 얼마 나오지 않지만 고화질 이미지 한 두개면 메가바이트를 초과하는 용량이 됩니다. 심지어 경우에 따라선 압축기술이 발전된 동영상보다도 더 많은 용량을 차지하는 게 이미지입니다.[각주*특히 나온지 오래된 JPG,GIF등의 포맷이 쓰이는 것도 용량이 큰 이유입니다.*] 그래서 웹개발자들은 LazyLoad라는 깔끔한 기법을 만들었습니..
간편 메모장
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

복사하기  저장
× 내용 모두 지우기 내용 모두 복사하기
메모장입니다. 시크릿 모드가 아니면 내용이 저장됩니다.