구글 블로거는 정말이지 불친절하기 그지없습니다. 티스토리를 처음 만났을 때보다 더욱 악질이네요. 관련 자료도 거의 없으니 현재 맨 땅에 헤딩하듯 이것 저것 시도를 해보고 있습니다. 일단 순수한 XML 문서로 아예 초기화를 시도해보았는데 저장이 안 됩니다. 스킨 관련 태그를 반드시 넣어줘야 하는 모양입니다. 문제는 스킨 관련 코드가 어떤 것인지를 아예 몰라요. 나중에 스킨을 두세개 뜯어서 공통되는 부분을 살펴보는 식으로 접근해봐야 할 것 같습니다. 그래도 이번 시도에 구글 블로거(Blogger) 플랫폼의 관리자 버튼을 만드는 편법을 알아냈습니다. 티스토리의 경우에는 Q버튼이 관리자로 바로 가는 단축키이며 스킨에 따라서 편리하게 관리자 버튼을 생성할 수 있습니다. 확실히 HTML 자유도 부분에서는 티스토리가..
안녕하세요. 친절한효자손입니다. 티스토리에는 다양한 플러그인이 있습니다. 일종의 애드온이죠. 티스토리 기능을 조금 더 멋지고 편리하게 바꿔주는 기능을 담당하고 있습니다. 하지만 어디까지나 선택의 영역이기에 절대적으로 적용해야하는 옵션은 아닙니다. 그래서 플러그인 형태로 입맛에 맞게 사용하라고 제공하고 있지요. 친효스킨은 방문자 그래프가 사이드바 기본 모듈로 등록되어 있습니다. 그런데 카카오그룹 데이터센터 화제가 발생한 이후로부터 이 모듈이 정상적으로 동작하지 않고 있습니다. 시간이 지나면 해결될 것 같은데 한 달이 넘어도 원래대로 돌아올 생각을 안 하고 있군요. 그렇기에 해당 모듈을 빼고 티스토리 방문자 그래프 플러그인을 친효스킨 스타일로 만드는 방법에 대해 공유하겠습니다. 방문자 통계 그래프 플러그인 ..
이번 이태원 사고로 인해 상심이 크실 유가족분들에게 먼저 심심한 위로의 말씀을 올립니다. 그 어떤 위로의 말도 크게 와닿지 않으시겠지만 그래도 힘 내셨으면 좋겠습니다. 그런데 이번 사고를 또 이용해 방문자수를 유도하는 아주 최악의 인간들이 또 기승을 부리는 모양입니다. 티스토리 블로거 중에서도요. 제정신인가 싶습니다. 하지 말라는건 곧죽어도 하죠. 대체 언제쯤 철이 들까요? 한심할 따름입니다. 그래서 스킨 전체에 노출이 되는 공지 칸을 하나 추가하면 어떨까 싶었고 곧바로 친효스킨에 적용을 시켜보았습니다. 현재 친효스킨의 최상단 애드센스 바로 아래에 긴급공지 모듈이 설치되어 있습니다. 사용 목적은 지금과 같이 애도의 글을 올릴때 또는 무언가 티스토리 블로거가 급하게 방문자분들에게 알리고 싶은 내용이 짤막하..
본문의 친효스킨 전용 태그 모듈 스타일을 따로 설치가 가능한지에 대한 문의 댓글이 있었습니다. 생각해보니 태그 모듈만 따로 만들어 배포는 하지 않았었군요. 그러므로 즉시 착수에 옮겨봅니다. 본문 하단의 태그 부분으로 스타일은 친효스킨을 따릅니다. 타스킨에서도 적용 가능합니다. 파일 다운로드 먼저 아래의 첨부파일을 다운로드 받습니다. 텍스트 파일을 열어보시면 HTML 태그와 CSS 스타일 코드가 들어있습니다. 다음은 세팅 방법입니다. HTML 세팅 먼저 뼈대에 해당하는 HTML 태그를 사용하고자 하는 스킨에 설치해야 합니다. TAG : 위의 태그는 친효스킨 본문에서 사용하고 있는 태그 모듈 코드입니다. 이것을 현재 사용하는 스킨의 본문 아래에 붙여넣어야 합니다. 그런데 문제가 있죠? 그렇습니다. 본문 아래..
본문 중간 링크글에 대한 스타일이 어느덧 네번째까지 맞이하게 되었습니다. 코딩의 세상은 참 오묘합니다. 그리고 너무나도 객관적인 영역인데 크리에이터의 입맛과 취향에 따라 그 결과물이 천지차이여서 참 신기함과 동시에 재밌기까지 합니다. 코딩하시는 분들이 이 맛에 작업하시는게 아닐까 싶습니다. 물론 그 코딩이 순수 개인의 의지냐, 아니면 돈을 벌기 위한 수단이냐에 따라 엄청난 차이가 있겠지만요. 서두가 길었습니다. 네번째 스타일을 만나보시겠습니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글! 반드시 두 줄로 만들었어야만 하는 그 링크 글! 이런 형태의 수동 링크글..
본문 중간에 삽입하는 링크에 대한 세번째 스타일 입니다. 이번 디자인은 완전 90년대 메트로 스타일로 만들었습니다. 완전 고전 스타일의 버튼 형식 입니다. 거두절미하고 바로 예제를 살펴보겠습니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글! 반드시 두 줄로 만들었어야만 하는 그 링크 글! 이런 스타일의 본문 중간 링크 입니다. 특징이라면 마우스를 올려도 아무 변화가 없습니다. 하지만 버튼 스타일이기 때문에 클릭을 할 때 스타일이 순간 바뀝니다. 마치 실제로 버튼이 눌리는 것 처럼 말입니다. 클래식한 버튼을 좋아하시거나 특별한 스타일의 링크글을 연출하고 싶다면 ..
아이허브(iHerb) 커미션을 사용하시는 분들을 위해서, 그리고 친효스킨을 사용하시는 분들을 위해서 아이허브 모듈을 하나 만들었습니다. 이 방법은 다른 스킨에서는 제대로 적용이 되지 않습니다. 오직 친효스킨만을 위한 아이허브 모듈 입니다. 사이드바에 설치하는 방식이며 설정 방법도 간단합니다. CSS 세팅 먼저 아래의 첨부파일을 다운로드 받습니다. /* 아이허브 모듈 */ #sidebar aside .rgy-iherb ul { padding: 0 5px; } #sidebar aside .rgy-iherb li { padding: 5px; margin: 5px 0; } #sidebar aside .rgy-iherb li:not(:last-child) { border-bottom: 1px solid #ccc;..
본문 중간에 참고용으로 삽입하는 링크글에 대한 두번째 친효애드온을 만들었습니다. 기존 스타일은 밋밋해서 좀 더 색다른 변화를 주고 싶었습니다. 관련글 모듈과 살짝 비슷한 부분이 있는데, 그럼에도 불구하고 개인적으로 무척 만족스러운 모듈이라고 생각하고 있습니다. 먼저 아래의 예시를 살펴보도록 하겠습니다. 이것은 짧은 제목의 링크글 이것은 그래도 제법 중간 사이즈의 제목을 가진 링크글 이것은 지금까지 여러분들께서 듣도 보도 못한 길이의 제목을 자랑하는 매우 긴 텍스트로 이루어진 장문의 링크글 보통은 링크글을 한 개 정도 배치하지만, 만약 2개 이상의 그룹으로 배치하는 경우에도 가능합니다. 링크글 목록이 약간씩 떨어져 배치됩니다. 마우스를 올리면 왼쪽의 동그라미가 가로로 길어지는 애니메이션 효과를 연출했습니다..
포스트잇 스타일로 연출해 보았습니다. 구글링을 통해서 참고하여 그대로 응용했습니다. 본문 중간 링크 모듈과 팁박스 모듈 대신 포스트잇 모듈로 대처할 수 있을 것으로 기대합니다. 사용 범위가 꽤 넓을 것 같습니다. 친효스킨에서 가장 정상작동하며 타스킨에서는 스타일에 오류가 발생할 수 있습니다. 참고하시기 바랍니다. 먼저 아래는 예시 입니다. 이것은 아주 간단한 예시의 글 제목 입니다. 이렇게 텍스트가 다소 긴 제목의 글이 있다고 하더라도 아무 문제 없이 다음 줄로 넘어가도록 설계가 되어 있는데, 고정 크기로 할지... 그냥 길게 늘어나게 할지 고민이 많습니다. 이것은 아주 간단한 예시의 글 제목 입니다.이렇게 텍스트가 다소 긴 제목의 글이 있다고 하더라도 아무 문제 없이 다음 줄로 넘어가도록 설계가 되어 ..
친효스킨의 본문 끝자락에 들어가는 관련글(참고글) 모듈 입니다. 벌써 마크5로서 다섯번째 버전입니다. 기본 스타일은 모두 같지만 마우스를 올리면 나타나는 CSS 애니메이션 효과들이 모듈마다 다릅니다. 본인이 원하는 모듈을 골라서 사용하면 됩니다. 먼저 관련글 모듈을 적용하는 방법에 대해서 숙지하시기 바랍니다. 본문에서는 CSS 파일과 간단한 설명만 언급하고 있습니다. 친효애드온: 관련글 참고글 모듈 (마크1) 그리고 아래는 예시 입니다. 마우스를 올려 보시기 바랍니다. 스마트폰에서는 아마 확인이 잘 어려울 겁니다. 짧은 글 제목이것은 적당한 중간 정도 되는 괜찮고 신기한 글 제목이것은 정말이지 대단히 긴 제목을 소유한 그런 글의 링크라고 할 수 있겠다고 말할 수 있을 듯 하면서도 꽤 길게 보여지기 위해 ..
오랜만에 친효애드온을 하나 만들어 봤습니다. 관련글 모듈입니다. 이번이 네번째 버전이 되겠습니다. 어떤 스타일을 가지고 있는지 한번 살펴보도록 하겠습니다. 아래에 예시로 올려봤습니다. 마우스를 한 번 올려보시기 바랍니다. 짧은 제목의 글제법 중간 쯤 되는 제목의 글 이라고 할 수 있지 않을까 싶은 글이것은 정말이지 실로 어마무시하게 긴 길이를 자랑하는 제목의 글이 되시겠습니다람쥐며느리모컨트롤러브레이드라이아이스케이트라이앵글라이더 기본 스타일은 기존과 동일합니다. 하지만 마우스를 올려보시면 입체적으로 해당 링크가 살짝 튀어나온 것 처럼 보여지게 연출을 해 봤습니다. 개성 넘치지 않습니까? 예전부터 이런 스타일로도 한번 만들어봐야겠다고 생각했는데 계획대로 잘 된 것 같아서 기분이 좋습니다. 이제 세팅을 해봅시..
친효애드온 : 본문 공유 모듈 마크1에 대한 업데이트 내용 입니다. 따라서 아래의 글을 먼저 읽어보시고 본문을 살펴보시면 많은 도움이 될 것 입니다. 친효스킨에 적용하는 방법을 기준으로 설명 드립니다. 스크립트 세팅 티스토리 스킨의 HTML 바로 위에 삽입했습니다. 카카오톡 아이콘 업로드 아래에 카카오톡 아이콘 이미지 파일이 있습니다. 다운 받아서 사용하면 됩니다. 만약 이미지가 마음에 들지 않으시면 구글에서 이미지 검색을 하시면 많이 나옵니다. 그 중 하나를 찾아서 사용하시면 되는데 파일명은 반드시 첨부파일과 똑같이 바꿔 주시기 바랍니다. 다운로드 완료 후 압축을 푸시면 이미지 파일이 생성됩니다. 해당 파일을 스킨편집에 가셔서 파일업로드 항목에 올려주시면 됩니다. 이렇게 업로드 완료 후 적용 버튼을 눌..
스크립트를 써서 출력하는 Syntaxhighlighter 코드는 로딩이 다소 오래 걸려서 포스팅 출력 시간이 지연됩니다. 신형 글쓰기에 있는 코드블럭은 뭔가 많이 부족합니다. 차라리 그럴바에 그냥 직접 DIV를 꾸며서 사용하자고 생각했고 바로 실천에 옮겼습니다. HTML, CSS, 자바스크립트 등의 코드를 직관적으로 표현하고자 할 때 사용하면 요긴합니다. 코드 뿐만 아니라 뭔가 강조하고자 하는 내용에 대한 텍스트를 작성할 때에도 좋습니다. 얼마든지 활용 가능한 모듈이라고 생각합니다. 백그라운드 색상도 커스텀 할 수 있어서 원하시는 색상코드를 넣고 사용하시면 됩니다. 커스텀 DIV 박스 모듈 미리보기 먼저 검정색 백그라운드 DIV 박스 입니다. .rgyBG { margin: 10px 0; padding: ..
지난번 친효애드온 관련글 마크2를 만들면서 영감을 얻었습니다. 생각난김에 바로 코딩을 시작했고 그 결과 훌륭하게 완성시켰습니다. 본문 끝 부분에 관련글을 넣을 때 사용하시면 되는 모듈 입니다. 친효스킨과 잘 어울립니다. 뿐만 아니라 타 스킨에서도 잘 적용이 될 것입니다. 현재 이 글의 맨 아래에 보시면 관련글이 있는데 해당 스타일대로 출력 됩니다. 참고하시기 바랍니다. CSS 세팅 먼저 스타일부터 정의합니다. 자신의 스킨 편집모드에 있는 CSS 항목으로 들어가셔서 아래의 첨부파일안의 모든 내용을 빈 공간을 확보하여 그대로 붙여넣기를 해줍니다. 어디에 붙여넣기를 하는지 자세히 안내해 드리겠습니다. 이렇게 빈 공간을 엔터로 확보하신다음 저곳에 붙여넣기 하시면 됩니다. 위의 스크린샷 이미지는 예시 입니다. 사..
친효스킨에는 사이드바에 공지사항 모듈이 있습니다. 이 모듈에는 공지사항에 대한 글을 작성하시면 목록이 업데이트가 되어서 직관적으로 방문자에게 보여지게 됩니다. 티스토리 기본 시스템은 공지사항에 대한 글을 따로 작성할 수 있는데, 이게 장점이 될 수도 있고 단점이 될 수도 있습니다. 둘 다 웹 노출이 된다는점은 공통이지만 방문자로 하여금 쉽게 찾아볼 수 있는지 없는지의 차이가 좀 있는 것 같습니다. 그렇기에 대부분의 스킨에는 공지사항에 대한 모듈을 제공하고는 있지만 스타일이 각각 다 다르기 때문에 이 방법이 모두 통한다고 볼 수는 없습니다. 여러분들이 사용하는 스킨의 공지사항 모듈을 구성하는 태그들이 ul li 형태의 요소라면 이 방법은 사용이 가능합니다. 친효스킨을 기준으로 설명은 드리지만 한번 관심이 ..
티스토리 사이드바에는 다양한 모듈이 있습니다. 그중에서 수동으로 넣는 추천글 모듈이나 기타 스킨에서 제공하는 모듈이 있을 수 있는데 현재 친효스킨이나 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 탭으로 이동합니다. ..
요청이 있어서 포스팅 합니다. JB-Factory 131 스킨을 사용하시는 분들에게만 해당되는 내용이며, 다른 스킨에서는 소용이 없습니다. 예전 구버전 스킨에서는 작동이 안 될 수 있으며, 제가 작업한 환경은 V0.6.1 입니다. 참고하시기 바랍니다. 이 스킨이 업그레이드 되면서 사이드바에 인기글과 추천글 모듈이 새롭게 생성되었습니다. 드디어 정식으로 나왔네요. 구버전에서는 그냥 개인적으로 만들어서 사용하고 있었는데, 드디어 추천글 모듈을 제대로 사용할 수 있게 되었습니다. 해당 방법은 제작자님께서 직접 홈페이지에서 사용 방법에 대해 작성해 두었으니 읽어보시고 그대로 따라하시면 될 것 같습니다. 현재 제 스킨을 PC화면에서 보시게 되면 이렇게 사이드바쪽에 별도로 넣어놓은 모듈을 확인하실 수 있습니다. 이..