이 애드온은 티스토리 본문의 상단 오른쪽에만 위치하는 1개짜리 애드센스 광고를 삽입하기 위해 만들었습니다. 본문의 우측 상단에만 자리를 잡습니다. 모바일 해상도에서는 200px X 200px 사이즈로 출력이 됩니다. 가로 해상도 768px 이상에서는 300px X 250px 사이즈로 출력이 되며, 가로 1000px 해상도 이상 부터는 336px X 280px 사이즈로 출력 됩니다. 사이즈는 변해도 위치는 늘 본문 우측에만 자리를 잡습니다. 애드센스 코드 세팅코딩을 간소화 했습니다. 불필요한 스크립트를 최대한 빼고 애드센스 순정 코드만 그대로 사용함으로서 편의성을 높였습니다. 먼저 아래의 첨부파일을 다운로드 받습니다. 다운을 받으시고 열어보시면 아래와 같은 코드가 들어 있습니다. 여기에서 빨간색으로 주석 ..
티스토리 본문의 마지막을 장식하는 관련글 모듈 입니다. 이번에는 두번째 버전으로 스타일을 다르게 연출해 보았습니다. 현재 친효애드온 중 관련글 모듈은 한 종류밖에 없습니다. 점차 스타일을 변경해서 다르게 만들어 선보이도록 하겠습니다. 친효스킨 뿐만 아니라, 일반적인 모든 티스토리 스킨에서 사용이 가능합니다. HTML 세팅하기어썸폰트가 들어가므로 안쪽의 태그 아래쪽에 다음의 링크를 삽입해 주시기 바랍니다. 첨부파일로 올려두겠습니다. 이렇게 붙여넣기를 해주시면 됩니다. CSS 세팅하기첨부파일로 올려드렸습니다. 다운로드 받으시고 메모장에 있는 내용을 모두 복사하시고 사용하시는 티스토리 스킨의 CSS 편집으로 들어가셔서 빈 공간을 만드시고 붙여넣기 해주세요. 이렇게 그대로 붙여넣기를 해주시면 됩니다. 참고로 주..
친효스킨에는 현재 TOP 버튼이 적용되어 있습니다. 하지만 일부 스킨에서는 TOP 버튼이 없을 수 있습니다. 만약 여러분들께서 사용하시는 반응형 스킨에 위로 올라가는 TOP 버튼이 없다면 이 애드온을 통해서 만드실 수 있습니다. 적용하시면 최종적으로 이런 형태의 버튼을 확인하실 수 있습니다. 티스토리 스킨의 오른쪽 하단에 생성되며 가장 맨 위로 스크롤이 되어 있는 경우에는 버튼이 자동으로 사라집니다. 그리고 스크롤을 하단으로 조금만 내려보시면 다니 나타나는것을 확인하실 수 있습니다. 누르면 빠르게 다시 제일 위로 올라갑니다. 이제 세팅 방법을 살펴보겠습니다. jQuery 세팅하기먼저 자바스크립트의 한 종류인 제이쿼리를 세팅해야 합니다. 하나씩 따라해 주시기 바랍니다. 어렵지 않습니다. 먼저 아래의 스크립..
티스토리에서 구형 글쓰기 에디터에서 제공하는 메뉴 중 에는 "더보기"와 "접기"가 있습니다. 그런데 기본 기능에 문제가 좀 있습니다. 더보기를 최초 1회 클릭하면 접기라는 글씨로 올바르게 변경이 되는데, 다시 한번 클릭하면 더보기로 돌아오지 않고 그대로 계속 접기라는 글씨로 남아 있는 버그가 있습니다. 이후에는 새로 고침을 하지 않는 한 평생 변하지 않습니다. 또한 스타일을 별도로 만들어 주지 않는 한 눈에 잘 띄지 않습니다. 이 기능을 좀 더 직관적으로 볼 수 있도록 스타일을 변경해 주는 친효애드온을 만들었습니다. 친효스킨은 기본 적용되도록 설계하였고 다른 스킨에서도 적용하도록 만들었습니다. 또한 반응형이기 때문에 가로 사이즈가 브라우저의 해상도에 맞게 자동 조정 됩니다. 방금 언급했던 글씨가 변하지 ..
안녕하세요, 친절한효자손 입니다. 친효스킨에 적용할 공유 모듈을 만들었습니다. 더불어 친효 스킨 뿐만 아니라 타 스킨에서도 적용 가능하도록 또 하나의 모듈을 만들었습니다. 현재 친효스킨 전용은 다음번 버전 때 기본으로 적용되어 있는 파일로 제공할 계획입니다. 이곳에 올리는건 티스토리의 다른 반응형 스킨에서도 적용할 수 있는 파일 입니다. 현재 친효스킨에는 이 모듈이 기본 적용되어 있습니다. 반응형이기 때문에 브라우저의 가로 사이즈를 늘리고 줄이면 알아서 크기에 맞게 변합니다. 친효애드온은 친효스킨에서 가장 완벽하지만 다른 반응형 스킨에서도 사용이 가능하도록 설계되었습니다. 업데이트 일지 2020.1.3 -카카오톡 공유 버튼이 추가 되었습니다! 2020.1.6 -밴드 공유 버튼이 추가 되었습니다! -각 아..
티스토리 사이드바에는 다양한 모듈이 있습니다. 그중에서 수동으로 넣는 추천글 모듈이나 기타 스킨에서 제공하는 모듈이 있을 수 있는데 현재 친효스킨이나 JB131 스킨에서도 추천글 모듈이 적용되어 있습니다. 이 추천글 바로 오른쪽에 강조 표현의 배지를 넣는 방법입니다. 1. CSS 세팅먼저 CSS 부터 세팅합니다. 아래의 첨부파일을 다운받아보시면 다음의 코드를 확인하실 수 있습니다. 한번 간략히 살펴보고 설명을 드리겠습니다. .rgyBadge { display: inline-block; margin-left: 10px; padding: 2px 5px; border-radius: 7px; color: #fff; vertical-align: middle; font-weight: bold; font-size: ..
이 글을 작성 안 한 것 같더군요. 그래서 최신 버전으로 다시 업데이트 합니다. 티스토리 사용자 분들이라면 애드센스는 거의 필수 코스로 설치를 하실 것 입니다. 이 때 기본 스크립트 코드로 넣으셔도 문제는 없겠지만 좀 더 실적을 올리기 위해서 커다란 직사각형 형태의 디스플레이 광고 두개를 넣는 분들도 계실 것 입니다. 어떻게 삽입하는지 알아보겠습니다. 이 코드는 친효스킨에 최적화된 애드센스 광고 코드 입니다. 특정 해상도에서 크기를 임의로 변경했습니다. 일반 다른 반응형 스킨에서 사용하셔도 특별히 문제가 되지는 않습니다. 최대한 특정 해상도에서 최적의 크기로 나타나게 하기 위해서 친효스킨에 맞춘 코드입니다. 참고하시기 바랍니다. 먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다. 여기 첨부파일을 받으..
이번 친효애드온은 본문 중간에 삽입하는 링크 입니다. 수동으로 넣는 경우가 종종 있습니다. 예를 들어서 CSS 코딩 관련해서 글을 작성했다고 한다면, 해당 글과 관련된 HTML 내용이라던지, 아니면 유용한 사이트라던지 바로가기를 넣어야 하는 경우 입니다. 지금까지 작성했던 글 중에서도 관련된 문서가 있을 수 있습니다. 이럴 때 요긴하게 사용되게 될 것입니다. 방법은 두가지인데, 어떤 포지션이냐에 따라서 다릅니다. 첫번째는 말 그대로 수동으로 넣는 경우입니다. 두번째는 티스토리 플러그인 중 하나인 "이전 글 넣기"를 사용할 때 입니다. 하나하나 사용법을 안내해 드리겠습니다. CSS 세팅하기 먼저 이 모듈을 적용시키기 위한 스타일을 세팅해야 합니다. 방법은 스킨편집으로 들어가셔서 CSS 탭으로 이동합니다. ..
본문에 이미지들 많이 넣으시죠? 혹시 넣으실때마다 테두리를 적용하시나요? 티스토리의 포토에디터에서는 다양한 테두리 스타일을 제공하고 있습니다. 하지만 저의 경우는 이 중에서 검정 테두리만 주로 사용을 하는 편 이며, 이따금씩 까먹고 그냥 삽입하고는 합니다. 일반적으로 촬영한 사진들은 괜찮은데 강좌를 위한 스크린샷 화면의 경우는 배경이 흰색인 이미지들이 있을때면 테두리를 만들어주지 않으면 본문과 햇갈려서 어디까지가 이미지고 어디가 본문의 백그라운드인지 잘 모를때가 있습니다. 그래서 이를 구별짓기위해 테두리를 만들어 줍니다. 티스토리의 포토에디터가 가끔 오류가 날 때가 있습니다. 그러면 처음부터 다시 작업해야 합니다. 사진이 한두장인 경우는 그냥 다시 처음부터 진행해도 크게 무리는 없지만, 10장 이상되는 ..
가끔 티스토리 본문을 작성하다가 꼭 중요한 내용을 작성할때가 있습니다. 가령 주의사항이 대표적인 텍스트라고 할 수 있습니다. 가독성을 올리고 좀 더 강조하고자 할 때, 티스토리에 있는 글상자 기능을 활용해서 작성하곤 합니다. 하지만 너무 밋밋한데다 많은 사람들이 쉽게 사용하는 방법입니다. 그래서 저만의 친효팁박스를 만들어 봤습니다. 아래는 그 예시 입니다. TIP 한줄일 경우에도 텍스트가 세로 상태로 중앙정렬이 됩니다. TIP 계속 텍스트를 작성하셔도 세로 중앙정렬이 지속됩니다. 텍스트를 채워갈수록 중앙에서부터 계속해서 세로 중앙정렬이 진행됩니다. TIP 계속 텍스트를 작성하셔도 세로 중앙정렬이 지속됩니다. 텍스트를 채워갈수록 중앙에서부터 계속해서 세로 중앙정렬이 진행됩니다. 이렇게 계속해서 본문을 채워..
제 블로그를 살펴보시면, 관련글 부분이 어느 순간부터 다른 디자인으로 이루어져 있다는걸 확인하실 수 있습니다. 아직 잘 모르시겠으면 여기를 방문하셔서 관련글들의 디자인을 살펴보실 수 있습니다. 다른 블로그와의 차별성을 두기 위해, 혹은 좀 더 개성넘치지만 과하지 않은 디자인을 생각하다보니 이렇게 구성을 해 봤습니다. 관련글 마크1 사용방법 1. 먼저 본 페이지에서 제공하는 첨부파일을 다운로드 받습니다. 2. 첨부파일 안에 있는 CSS 내용을 자신의 티스토리 스킨의 CSS에 붙여넣기를 합니다. 3. 글 작성시, 수동으로 div로 감싸줍니다. 크게 이 세가지로 진행됩니다. 2번까지는 쉽습니다. 3번에서는 좀 더 추가설명을 드리도록 하겠습니다. HTML 안쪽에 폰트어썸 CDN 세팅하기 아이콘 세팅을 위한 단계..
현재 일부 스타일을 변경해서 적용하고 있습니다. 스킨은 현재 순조롭게 완성되어가고 있습니다. 그 중에서 당장 사용 가능한 몇가지들을 공유하려고 합니다. 현재 친효스킨은 부분별로 업그레이드가 가능한 파츠형 스킨으로 개발 중 입니다. 누구라도 쉽게 커스터마이징 해서 사용하기 편리한 그런 스킨으로 완성하는데 목표를 두고 있습니다. 티스토리에서 기본적으로 제공하는 첨부파일 스타일이 뭔지 아시죠? 상당히 촌스럽습니다. 그리고 눈에 잘 띄지도 않습니다. 개인적으로 두번째 문제가 가장 심각하다고 생각합니다. 첨부파일이 어디에있나 한참을 찾을 이유가 없습니다. 누가봐도 "아, 이게 첨부파일이군!" 싶어야 합니다. 이게 기존 티스토리 첨부파일 디자인 입니다. 눈에 잘 안띕니다. 이것을 수정하려면 CSS 내부에서 클래스값..
새롭게 선보이는 카테고리 입니다. 여기에는 티스토리 스타일을 꾸며주고 사용 편의성을 높이는 모듈들을 만들어 올리는 콘텐츠 입니다. 어떤 스킨에서든지 다 통합니다. 단! 티스토리 전용 어플리케이션에서는 비정상으로 보여집니다. 하지만 상관 없습니다. 티스토리 앱을 이용하시는 분들은 거의 적을 뿐더러 원래 기존에 사용하던 표도 정상적으로 보여지진 않았으니까요. 적용 방법은 간단합니다. CSS 스타일에 코드를 추가해주시고, 사용하실 때, HTML 태그 요소들만 조금씩 수정해서 사용하시면 됩니다. 이름하야, "친절한효자손 애드온" 이라고 명명 합니다. 오늘은 그 첫번째로 티스토리에서 취약하기로 소문난(?) 표 만들기에 대한 방법입니다. TIP 알림 : 친효애드온의 저작권은 저에게 있습니다. 코딩에 마크업된 태그 ..