Posted at 2010.07.22 00:19 | Posted in 블로그이야기


카테고리 다른글 오른쪽 이미지 넣기 - 티스토리


위 화면처럼 카테고리 다른글 보기에서 오른쪽에 이미지 넣는 방법을 설명 드리고자 합니다.
자신만의 상징적인 로고나 이미지 사진 같은걸 넣으면 블로그가 조금은 산듯해 보이지 않을까
합니다.

카테고리 다른글 옆에 광고를 넣으시는 분들도 많으신데 제 생각에는 광고보다는 이미지로
블로그를 꾸며 보는 것도 괜찮지 않을까 생각합니다. 솔직히 하단에 광고는 거의 클릭을 안하드
라구요. 그래서 전 하단에 광고를 다 내려 버렸습니다. 블로그에 너무 광고가 많아도 보기가 안 좋
아서 수익이 없는 광고는 거의다 짤라 버렸지요..제 개인적인 생각이니 나무라지 마시길..

이 방법은 시디맨님의 블로그에서 눈팅한 정보입니다. 전 컴맹이라 눈팅 밖에 할 줄 몰라서요.
포스팅 연습삼아 한번 올려봅니다.

자 그럼 한번 만들어 볼까요?

   카테고리 글 더보기 기능 활성화 하기  

먼저 카테고리 글 더보기 기능이 활성화가 되어 있어야 겠지요?
플러그인 > 꾸미기 클릭하셔서 카테고리 글 더 보기 활성화 시킵니다.




   카테고리 글 더보기 여백화면에 넣을 이미지 업로드  

활성화 시키셨으면 이제 이미지를 구해야 겠지요?
이미지는 직접 로고를 만든다든지 이미지를 만들 수 있으면 좋겠지만 저는 그럴 능력이 안되어서
완성된 이미지를 사용했습니다. 이미지를 구하시기 어려우신 분들은 아래글을 참조하시면 쉽게
구하실 수 있을겁니다.

[무료프로그램] - 무료 이미지 사이트,무료 아이콘 사이트 모음

제가 주로 이용하는 아이콘파인더에서 귀여운 호박이미지를 가지고 왔습니다. 저 이미지를
삽입해 보도록 할게요. 여러분도 이미지 구하셨어요? 이미지를 구하셨다면 다음단계로 갑니다.


   이미지 파일을 블로그 스킨에 업로드  

구하신 이미지파일을 자신의 스킨에 업로드를 시켜줍니다. 파일 이름을 쉬운걸로 하세요.
나중에 css란에 넣어야 되니깐요. 기억하기 쉬운 이름을 지어주세요.

혹시 스킨에 파일업로드를 어떻게 하는지 모르시는 분들을 위해 설명 올립니다. 사실 저도 몰라서
고생했던 기억이...ㅜㅜ

스킨 > 스킨선택 누르시면 아래 화면이 뜹니다.


파일업로드를 누릅니다..


다시 위에 화면이 열리면 파일업로드 클릭합니다. 그러면 폴더가 열릴겁니다. 거기서 구하신
이미지를 업로드 시킵니다.


업로드가 다 되셨다면 아까 정한 이름의 파일명이 보일겁니다. 전 호박이미지라고 지었어요.
정하신 이미지파일을 클릭하시면 위와같이 이미지도 같이 뜨게 됩니다.
그러면 작업이 완료된 겁니다. 이해가 되셨나요? 전 스킨에 업로드하라고 하는데 어떻게 하는지
몰라서 고생했기 때문에 이렇게 올리는 겁니다. 아시는 분들은 그냥 넘어가세요^^


   CSS(style.css) 맨하단에 소스 추가하기  


.another_category {
    background: transparent url(./images/업로드한파일명) no-repeat right bottom;
}
.another_category td {
    display: none;
}

위 소스에 아까 업로드한 파일명을 넣으시고 css란 맨 아래부분에 추가하시면 됩니다.
저의 업로드파일명은 호박이미지.jpg 입니다. 저 이름 그대로 넣으셔야 됩니다. 꼭 업로드한
파일명과 소스 첨가하는 파일명과 일치해야 화면 출력이 됩니다.


자 그럼 완성된 모습을 보실까요?



이미지가 잘 들어갔군요..흐흐 여러분도 한번 해보세요. 크게 어려운건 없는것 같습니다.

[배경 이미지 위치 조정 팁]

background: transparent url(./images/업로드한파일명) no-repeat
right bottom

오른쪽 하단에 위치

background: transparent url(./images/업로드한파일명) no-repeat right top;
오른쪽 상단에 위치

background: transparent url(./images/업로드한파일명) no-repeat 600px 50px;
세로축 600px,가로축 50px에 위치

위치를 조금씩 바꿔가면서 맞춰보시면 될듯합니다. 도움이 되셨으면 합니다.

저작자 표시 비영리 변경 금지
신고


구르마

  1. 힝;; 소스가 드레그가 안되네요 ㅠ
  2. 오오 이렇게 하는거군요!! 저는 왜이리 티스토리가 어려운지 말입니다 ㅠㅠ
    어서어서 배워서 티스토리 블로그도 열심히 하고 싶어요 흑흑
    저같은 컴맹에게는 네이버 블로그도 벅차긴 하지만요 ㅠㅠ
  3. 좋은 블로그 팀 감사합니다.^^
    저도 개인 블로그에 시도 해봐야겠어요!!
  4. 님처럼 글 제목에 물결효과 생기게 하려면 어떻게 해야 되나요?? 초보라 조금만 자세히 설명해주시면 ㄳ ㅡㅡ;
  5. 근데 제 블로그 상단을 보면 "my tistory" 이렇게 이미지로 돼어 있어서 그걸 내가 원하는 그림으로 바꾸려고 하는

    데 아무리 잘 만드려고 해도 실력이 미천한지라, 뒷배경과 색깔이 잘 안 맞게만 제작되네요 ;;

    전 그냥 "my tistory" 이 글자만 바꾸고 싶을 뿐인데 이렇게 어려울줄이야...;; 도움 주실 수 있나요??
  6. 좋은정보 감사드립니다^^ 그런데 그림이 너무커서그런지 자꾸 잘리네요..ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
  7. ㅎ잘보고 갑니다,
    태그는 아무리 해봐도 재미있네요!
    적용이 비슷비슷 하지만 시간날때 다시 수정해봐야겠요!
    보세요,ㅎ
  8. 좋은글 잘보고 갑니다.

    글자색을 지정된 색 외 다른색으로 바꿀 수는 없나요?
  9. 좋은 정보 감사합니다.
  10. 음 저는 카테고리에서 선택된 글이 전체적으로 색이 변해서 흰색을 적용시켜보니 아이콘이 가려지는데 어떻게 해야하나요?
  11. 그대로 적용을 했는데 왜 안될까요?ㅠㅠ

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

티스토리 툴바