본문 바로가기

인터넷/티스토리 꾸미기

티스토리 & 네이버 이웃추가 버튼만들기 티스토리에 이웃추가? 블로그의 재방문과 방문자에게 편리를 제공하는 것은 기본이다. 요즘 티스토리의 상단 메뉴가 없는 스킨이 많아 짐에 따라 이웃추가 하기가 귀찮아졌다. (티스토리를 아예 처음하는 사람들은 이웃추가가 아예 없는줄 아는 경우도 있다.) 이웃추가를 하기 위해서는 관리자에서 "내가링크"를 통해 링크를 추가해야 한다. 그마저도 주소도 직접 입력해야 한다. 이러한 형식은 이웃추가라는 생각도 못하게 된다. 정확히는 이웃추가가 아니고 링크추가 정도되겠다. 이런 부분들을 볼때 아직도 티스토리는 갈길이 멀다고 볼 수 있다(…) 그래서 유저가 직접 커스트마이징을 해야한다. 티스토리 상단메뉴가 있는 스킨메뉴 "이블로그를" 메뉴를 누르면 추가된다. 보통은 이런식으로 해야한다. 1. 티스토리 이웃추가 버튼 만들기..
카테고리 NEW 아이콘 변경 & 아이콘 티스토리 카테고리 NEW 아이콘 변경 이전에 카테고리 아이콘과 게시물 숫자를 표시하는 방법을 블로깅 했는데 이번에는 NEW 아이콘을 변경하는 방법을 알려드릴려고 한다. 기존의 회색의 NEW아이콘은 디자이너로서는 솔직히 이해할 수 없는 아이콘이긴 했다. 물론 애초에 NEW아이콘이 나오지 않게 설정된 점을 생각해보면 그럴만한 뭔가 이유가 있는 것 같긴 한데 여전히 이해는 안간다. 아무튼 먼저 자신이 원하는 NEW 아이콘을 티스토리 파일업로드를 통해 올려두도록 하자. 파일 업로드는 관리자 모드 - 스킨편집 - HTML편집 - 파일업로드를 통해 올리면 된다. 그럼 이제 아이콘을 변경할 코드를 넣어야 한다. 애초에 카테고리에 아이콘이 없는 분들은 아이콘이 나오게 하는 설정을 해야하므로티스토리 카테고리 아이콘 표시..
티스토리 대표이미지 바꾸기 티스토리의 대표이미지를 바꿔보자! 다들 아시겠지만 티스토리는 제일 처음 올린 이미지가 무조건 대표이미지로 선정이 되게 된다. 그러므로 자연스럽게 가장 처음 대표이미지를 올리게 되는데 실수든 어떻든 내가 원하지 않던 또는 다른 것으로 대표이미지를 변경하려고 할때 방법을 생각보다 많은 사람들이 모르는 것 같아서 포스팅 하려한다. 원하는 대표이미지에 체크를 하자! 알게 되면 너무 간단해서 왜 맘고생을 했을까 할정도로 간단하다. 수정페이지로 들어가서 위 이미지처럼 파일 보관함에 보면 내가 올린 이미지들이 보관되어 있다. 그 중 대표로 하고 싶은 이미지를 클릭하고 대표에 체크를 선택해주면 끝이다. 정말 끝이다. 이제 한번 바뀐 대표이미지를 보도록 하자.
마우스 드래그 컬러 바꾸기 드래그 컬러 변경하기 명품의 힘은 디테일에 있다는 말이 있다. 디자인역시 마찬가지고 티스토리 역시 그렇다. 물론 디테일을 챙긴다라는건 힘들고 어렵고 또 귀찮은 일이다. 하지만 힘들지 않고 쉽게 디테일을 챙길 수 있는 방법 중 하나인 바로 마우스 드래그 컬러를 설정해 주는 것이다. 우리는 글을 읽을 때 자연스럽게 드래그를 하게 된다. 기본 설정된 파란색 컬러가 대표적인데 자신의 티스토리 설정에 맞게 컬러를 변경한다면 사용자가 드래그 하면서 글을 편하게 읽을 수 있게 할 수 있다. 지금 드래그 이 사이트의 드래그 컬러를 보면 분명 다를 것이다. 드래그 컬러 변경 CSS ::selection { background:#3db39e; color: #fff; text-shadow: none; } ::-moz-sel..
애드디스 SNS 달기 티스토리에 애드디스 SNS 달기 지금 이 티스토리에 보면 왼쪽에 페이스북 트위터 등 SNS 버튼이 있다. 알고 있겠지만 이는 티스토리에서 제공하는 SNS 버튼이 아니다. 물론 제공하는 버튼이 있긴 하지만 페이스북에서 제공하는 API를 그대로 사용한 버튼이라 그런지 예쁘지는 않다. 이제 애드디스라는 플랫폼을 이용해 티스토리에 SNS 공유버튼을 예쁘게 달아보도록 하자. 애드디스 사이트 애드디스 사이트를 방문하여 회원가입을 하자. SNS를 달기 위해서는 메인페이지에 있는 구글, 페이스북, 메일 중 하나를 선택하여 회원가입 페이지로 넘어가게 된다. 회원가입을 하는 이유는 개개인의 코드를 받아야 하기 때문이기도 하고 통계도 내주기 때문에 가입을 해야한다. 국내 회원가입을 할정도면 이정도는 아무것도 아니다. 메일주..
티스토리 카테고리 숫자&아이콘 표시 반응형 스킨 #1 카테고리 숫자&아이콘 표시하기 처음에 이스킨을 사용했을때 분명히 관리자 설정에서 카테고리 숫자 그리고 새글 발행 여부를 표시한다고 설정을 했는데 어디에도 표시가되지 않아서 그러려니 하다가 다른 같은 스킨을 쓰는 분은 나오는 것을보고 내가 잘못설정했나 싶어서 다시 확인해본 결과 나는 제대로 설정이 되어 있었다. 그래서 뭔가 문제가 있는거 같아서 혹시나 해서 스킨을 좀 뜯어보기로 했다. 나는 분명히 제대로 설정이 되어 있었다. CSS를 확인해본결과 반응형 #1 스킨의 카테고리는 .area_menu . btn_cate 부분이었다. 여기서는 수정할 부분은 width 부분인데 이 부분은 카테고리의 너비를 조정할 수 있는데 필자는 175px로 설정하였다. 그리고 가장 중요한 클릭했을때 카테고리가 ..
티스토리 마우스 커서 바꾸기 마우스커서를 변경해보자 지금 이 티스토리의 마우스 커서를 보면 "어? 내 시스템 마우스 커서거 아니네?" 라고 할 것이다. 이 마우스 커서는 이 블로그에서만 작동되는 것이고 과한 커서만 아니라면 유저에게 새로운 경험을 하게 해줄 수 있다. 그리고 사이트의 퀄리티도 올릴수 있다. 그것도 아주 간단하게 할 수 있다. 우선 다양한 마우스커서를 제공하는 사이트를 방문해 보도록 하자. 커서포유 바로가기 다양한 마우스 커서를 제공하고 있다 - 커서 4유 사이트에 가면 왼쪽에 다양한 카테고리가 있다. 너무 많기 때문에 즐거운 고민을 하며 골라보도록 하자. 참고로 필자는 카테고리 Cursors/Pointers 에서 2번탭에 가면 있는 마우스 커스를 사용해봤다. 나중에 질리게 되면 다른 마우스를 사용할 수도 있다. 원하..
티스토리 컨텐츠 페이드 시키기 티스토리 꾸미기 - 컨텐츠 페이드 인 지금 현재 블로그를 보면 클릭해서 들어가는 컨텐츠들이 페이드 되어 보여질 것이다. 컨텐츠를 페이드 시키게 되면 다시한번 사용자에게 컨텐츠에게 재 집중시키게 할 수 있는 좋은 방법이라 생각이 든다. 너무 조금만 느리게 설정이 되도 바로 지루함과 답답함을 느끼게 되지만 0.3~0.5초 정도의 페이드라면 충분히 사용자를 편하게 해줄수 있는 좋은 기법이다. 왠지 어려울것 같지만 생각보다 굉장히 간단한 방법으로 할 수 있다. 한번 알아보도록 하자. 복사할 CSS 코드 - 반응형 #1스킨용 #dkContent { animation: fadein 1s; -moz-animation: fadein 1s; /* Firefox */ -webkit-animation: fadein 1s; ..
다음 애드핏 다음 애드핏이란? 다음 애드핏은 PC/모바일 버전 사이트에서 노출되는 수익성 배너 플랫폼이다. 보통 티스토리 블로거를 운영하는 분들이 구글 애드센스에서 광고승인을 받기전 거쳐가는 플랫폼이라고 본다. 필자는 꼭 그럴 생각은 없지만 왠지 분위기 상으로는 필자도 그렇게 해야만 할것 같은 분위기 인것은 사실이다. 아무래도 PC버전 광고가 안된다는 점이 가장 큰 문제점이 아닌가 싶다. 어쩌면 티스토리 보다 앱에 띄우는 광고 용으로 적합할 수 있다. 이번 블로깅에는 티스토리 모바일 버전에 애드핏을 적용하는 블로깅을 해보도록 하겠다. 애드핏 플랫폼을 이용하기 위해 애드핏에 우선 가입하도록 하자. 다음 애드핏 바로가기 다음이지만 다음계정으로 되지 않기때문에 새롭게 가입해야 한다. 파란버튼인 바로 시작을 눌러서 회원가입..