호기심 가득! 모지모지!

얼마전부터 블로그에 들어가면 위 사진처럼 브라우저(IE) 아랫부분에 귀찮은 팝업이 하나 뜨더군요. 브라우저 문제인가 했는데... 컴터를 가리지 않고 뜨길래 티스토리 블로그홈를 찾아가봤더니.... 최근 SSL 전면 적용이라는 작업을 했더군요. 보완관련 추가 업데이트라는데... 암튼, 상세한 내용은 모르겠으나 내용을 읽다보니 html안에 링크가 http://로 되어있으면 '안전하지 않은 콘텐츠' 라고해서 맨위 사진의 해당 팝업이 뜨게 되는거더군요. http://를 https://로 바꾸면 해결된다는 얘기! 일단, 첫리스트 화면부터 뜨니, 스킨 전체 html을 손보면 될거 같네요. *물론 최신 스킨을 사용하신다면 티스토리에서 이미 적용을 해놨겠죠? 전 예전에 스킨을 하두 손을 대놔서 http://로 작성된 곳..

어느 분의 요청으로 블로그 좌측화면에 방문수추가하는 방법을 간단히 적어보겠습니다. 제 블로그를 기준으로 위와 같이 PC화면(넓은화면)에서 오늘 방문자, 어제 방문자, 총 방문자 수를 표시하는 방법입니다. * 기본 스킨과는 조금 다른 부분이 있을 수 있습니다. 방법은 1. HTML상에 소스를 넣기 2. CSS에 스타일속성을 추가하기 순 입니다. 첫번째, HTML상에 좌측 붙이고자 하는 부분을 찾아 소스를 넣습니다. Today: Yesterday: Total: 는 아시겠지만 티스토리에서 제공하는 치환자입니다. 즉, 이 부분이 알아서 방문자수가 표시되는 부분입니다. HTML 상의 위치는 제블로그 기준이기 때문에 따라하시는 분은 기존 소스를 참고해서 적당한 곳에 붙여주세요. 대략 저 위에 표시된대로 74줄 근처..

CSS만으로 텍스트메뉴를 좀 더 화려하게 만들 수 있는 소스입니다. 아래와 같은 텍스트 메뉴에 마우스를 오버했을때 다양한 효과들을 손쉽게 적용할 수 있습니다. 위의 그림은 그 중의 일부분이고, 아래 페이지에 접속하면 더 많은 효과들을 확인할 수 있습니다. 괜히 어렵게 이미지를 써가며 화려하게 하기보단 이렇게 텍스트와 소스 몇 줄만으로도 그럴듯한 메뉴를 만들 수 있지 않을까 싶네요. http://tympanus.net/Development/CreativeLinkEffects/ 소스는 아래에서 받아서 사용하시면 되고, 페이지에 적용법도 간략히 나와있으니 참고하시면 됩니다. http://tympanus.net/codrops/2013/08/06/creative-link-effects/ 추가로 텍스트메뉴 효과 뿐..

티스토리 반응형 스킨을 만지작거리다보니 요즘 대세인 반응형 웹에 대한 자신감이 늘어가는 중!~ 기본은 뭐니 뭐니해도 각 화면별 CSS만 잘 정리해주면 된다는 것~ 이번에 손대볼 곳은 배경이미지입니다. 기본스킨은 배경이미지 하나를 사용하고 있습니다만, 그냥 하나로만 사용하기엔 심심하고 재미가 없죠? 그래서 각 화면별 그리고 펼쳐치는 메뉴쪽 배경을 바꿔 볼 생각입니다. 방법을 간단히 요약하자면, 1. 각 영역별 이미지를 업로드한다. 2. 각각의 CSS상의 이미지 URL을 바꿔준다. 정도입니다. 크게 어렵지 않으니 겁내지 마세요~ㅎ 일단, 교체할 영역을 살펴보죠~ 가장 큰 PC화면에서 볼때 좌측의 배경이미지가 나타나는 부분입니다. 다스베이더가 오토바이를 타고 있는 이미지 보이시죠? 두번째는 중간 크기로 브라우..

티스토리 스킨 포럼에서 질문이 있어서 답글로만 알려드렸던 내용인데 댓글로 질문을 달아주신 분이 있어서 작성해봅니다. 티스토리스킨 반응형 #2 메인화면, 글목록화면과 게시물안의 이미지에 확대효과주기입니다. 이미지위에 마우스를 가져다 대면 이미지가 살짝 확대되는 효과입니다. 솔직히 너무 많이 주면 버벅일 수도 있어서 이런 효과는 조심해서 주는편이긴한데 나름 괜찮아서 추가해보았습니다. 현재 제 블로그화면들의 이미지를 확인해보시면 어떤 느낌의 효과인지 확인하실 수 있습니다. 본 게시물에 들어간 이미지들 위로 마우스를 가져다 대면 살짝 커지죠? 일단, 위의 CSS는 메인화면 즉, 글 목록화면의 썸네일에 적용되는 소스입니다. 줄 수를 보시고 비슷한 위치에 넣어주시면 됩니다. 소스는 아래 .list_content ...

CSS를 조금 아신다는분은 뭐 사실 많이들 아실 내용이긴 하지만, 간단히 border-radius를 넣어 글에 들어간 이미지나 기타 박스형태의 디자인을 라운드형태로 변경해주는 방법입니다. 티스토리 반응형 스킨이 모바일대응에 초점이 맞춰진 바 큰 이미지를 박스형태로 보여주는 디자인이 많은데요. 그런 박스가 너무 딱딱하게 여겨진다는 분들이 따라하면 좋을거같네요. 일단, 위의 이미지처럼 본문에 삽입된 이미지를 포토샵 작업에서 라운드처리를 하지않고도 라운드된 형태로 변경할 수 있습니다. 그리고, 티스토리스킨 반응형#2에서 관련글 리스트의 형태가 위의 그림에서처럼 박스형태인데 그것또한 라운드처리할 수 있습니다. 윗부분은 바로 본문이 들어가는 위치 클래스명이 area_view이군요. CSS창을 열어서 위와 같은 위..

아! 왠지 득템한거 같은 기분이군요. 제이쿼리니 자바스크립트니 이리저리 해메다 기가 막힌 소스를 구했네요. CSS파일로만 구성된 상단네비게이션입니다. 원래는 반응형 메뉴라서 다른 스크립트나 이런게 연결되어있었는데. 다 걷어내고, 메뉴 구현 부분만 남겨두었습니다. 인터넷 검색을 잔뜩하다 받은거라 어디서 구한건지 잊어버렸군요.ㅜㅜ.만드신분께는 죄송~ 소스를 수정하다가 처음 보는 속성을 접해봤습니다. transition란 건데... 오버시 속성이 적용되는 시간을 조절할 수 있다는거 같네요. 저는 이 소스에서 메뉴 오버시 색상변화하는 속도를 살짝 변경해봤습니다. transition: all .5s ease-out; 다운받고 확인해보시면 어떤건지 금방 알 수 있어요~ 암튼, 조금만 응용할 줄 안다면 왠만한 상단네..

티스토리 반응형#2을 쓰다보니 먼가 아쉬운것들이 많이 있네요. 그래서 자꾸 고치게 됩니다.^^ 새로운 글이 떳을 경우, NEW아이콘이 붙어야 먼가 살아있는 블로그 같은 느낌이 드는 건 저만 그런걸까요?ㅎ 그래서 좀 뒤져봤습니다. 매우 간단합니다. 일단, 100줄 근처를 찾아봅니다. .tt_category li a .c_cnt와 .tt_category li a img의 속성이 display:none으로 되어있을겁니다. .tt_category li a .c_cnt는 카테고리의 글수를 표시하는 것이고, .tt_category li a img이 바로 New 아이콘을 표시해주는 부분입니다. 저는 글수는 필요없어서 그대로 두고, img를 보여주기 위해 위와 같이 변경해주었습니다. 소스 .tt_category li ..