블로그 팁 다음뷰 버튼 배경 꾸미기



제가 사용하는 다음 view on 추천 위젯 입니다. 뭔가 좀 다르죠? 그렇습니다. viewon 위젯 뒤로 그림을 넣었습니다.

지금부터 view on 위젯을 이렇게 꾸미는 방법에 대해서 간단히 소개하며 응용하는 방법도 소개합니다.
11개의 제가 미리 만들어둔 다음뷰 배경을 공개하니 하나씩 다 적용해보고 맘에드시는걸 써보시고 그리고 가능하다면 직접
편집도 해서 사용해보시길 바랍니다.

다음뷰(Daum view) 추천버튼 배경 셋팅 방법 (11가지 프리셋 제공)


1. 먼저 다음 view on 추천버튼을 버튼형으로 만들어야 합니다.


티스토리 관리자 페이지 > 플러그인 > 글보내기 > Daum view > View on 박스 > 버튼형




2. CSS 코드를 복사한뒤 style.css 의 맨하단에 붙여넣기 한다.

아래의 프리셋에서 맘에드는 CSS 코드를 복사하여 자신의 스킨의 style.css 맨 하단에 붙여넣기 합니다.



저장을 한뒤, 다음뷰버튼의 배경이 변경되었는지 확인합니다. 변경이 되지않는다면 F5 를 누르거나 임시폴더를 삭제하여 다시 확인해줍니다. (캐쉬가 지워지지 않은상태로는 변경되지 않은 것 처럼 보일 수 있습니다.)




CDMANII 가 공개하는 다음뷰 배경 꾸미기 프리셋 11종 세트




div.blogger-news-widget {
    background: url(http://cfile21.uf.tistory.com/image/135F530E4AB8E06F57F03E) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile27.uf.tistory.com/image/15105D0E4AB8E06F039428) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile8.uf.tistory.com/image/175C580E4AB8E06F404040) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile24.uf.tistory.com/image/124AB20E4AB8E06F7BFA50) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile2.uf.tistory.com/image/134A090E4AB8E06F8CC9BB) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile25.uf.tistory.com/image/185B030E4AB8E07052A40C) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile9.uf.tistory.com/image/1941270E4AB8E070A32237) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile2.uf.tistory.com/image/125B2F0E4AB8E070467C55) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile10.uf.tistory.com/image/2054D80E4AB8E0707EC029) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



div.blogger-news-widget {
    background: url(http://cfile4.uf.tistory.com/image/12588C0E4AB8E0715E1AEE) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}



특별 공개 버전




div.blogger-news-widget {
    background: url(http://cfile4.uf.tistory.com/image/200CF1284BE2D0ED4C4FF7) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}




작업파일 다운로드


제가 만든 11개의 이미지파일과 작업했던 PSD 파일을 올려봅니다. 제가 올린 이미지는 모두 흰색배경에 최적화가 되어있습니다. 다른색이나 투명 이미지를 만들고 싶다면 이미지를 직접 작업하셔서 자신의 스킨에 맞게 수정하셔서 사용하실 수 있습니다.



마무리


CSS 는 이미지를 제 블로그에 올리고 절대주소로 넣어놓았습니다. 제 블로그에서 이미지를 삭제하는 일은 없겠지만, 혹시라도 염려되시는 분은 다운로드에서 이미지를 자신의 스킨에 올린뒤 경로를 ./images/viewonbg.gif 등으로 수정하여 이미지 이름과 맞춘뒤 사용하시면 될것같습니다. 보통의 경우에는 위에 CSS 를 그냥 자신의 style.css 에 붙여넣는것만으로 마무리가 됩니다.

이미지크기는 저도 트래픽에 민감하기에 gif 로 최대한 색을 적게 써서 이미지의 용량 사이즈를 줄였습니다. 넣더라도 블로그가 무거워지거나 하는 일은 없으니 써보시는게 좋겠네요. 댓글로 전용 배경을 만들어달라는 요청 해주시면 제가 블로그 분위기에 맞게 전용 배경을 만들어서 드리도록 하겠습니다 ^^*

스킨 관련 링크


2009/09/20 - [Useful Tips] - 파이어버그로 티스토리 스킨 미리 수정하기
2009/08/16 - [Useful Tips] - 블로그 서식 꾸미기 #1 (동영상)
2009/09/01 - [Useful Tips] - 블로그 서식 꾸미기 #2 - 플래쉬 소제목 활용하기 (동영상)
2009/07/23 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 둘째편
2009/04/21 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 처음편
2009/09/22 - [Useful Tips] - 블로그 광고수익 모델 CPC 광고 다음 애드클릭스 팁


스킨 무료로 최적화 해 드립니다.


2009/09/11 - [Hardware/Tuning/Lab] - 블로그 스킨 수정해 드립니다.

스킨공부에 도움이 될 책들




이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

:)   :(   --;   :D   :O   :x   r:r   g;g   i;t   s;s

     이미지 업로드  [무료이미지 업로드 방법 설명]

  1. 이전 댓글 더보기
  2. wordplayer 2011.03.21 02:58 신고

    사실 드러내놓고 다음뷰 버튼을 달기 민망할 정도로 인적 없는 블로그이긴 합니다만 이 글을 보니 저도 용기내어 한 번 달아보고 싶어졌습니다. 이런 소중한 것을 인사 한 마디 없이 그냥 쓰는 것이 마치 도둑질 하는 것 같아 감사의 한 줄 올립니다. 감사합니다.

    perm. |  mod/del. |  reply.
    • 씨디맨 2011.03.21 07:52 신고

      댓글도 남겨주시고 감사합니다. ㅋ 저도 추천은 잘 안눌러주네요 ㅋ 그래도 이렇게 찾아주시고 팁을 써주시는분들이 있어서 저는 기쁘답니다. ^^

      perm. |  mod/del. | 
  3. 포도잼 2011.04.26 16:38 신고

    멋지네요. 감사합니다.
    버튼 배경이나 이미지가 주목을 끌수 있도록 움직이는 동적인 버튼도 있으면 더 좋을 듯 합니다.

    perm. |  mod/del. |  reply.
  4. 2011.05.16 10:53

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  5. 프레스토 2011.05.17 11:26 신고

    많이 궁금하던 기능이었는데 포스팅 감사합니다. 공개해주신 소스 활용해보고 제 스킨도 만들어 봐야 겠네요.. ^^

    perm. |  mod/del. |  reply.
  6. 천풍비 2011.06.04 23:42 신고

    시디맨님이 배포해주신 버튼 너무나 마음에 드네요.
    처음뵈었는데 무작정 컨트롤C V만 해버렸네요.
    너무 감사해서 댓글 남겨봅니다..

    perm. |  mod/del. |  reply.
  7. 새로운삶 2011.08.04 01:31 신고

    덕분에 더 잘 쓸수 있게 됐습니다. 감사드려요.^^

    perm. |  mod/del. |  reply.
  8. soybbay 2011.08.20 16:28 신고

    잘 보았습니다~
    조금 변경해서 나만의 이미지를 만들어보아야 겠어요 ㅋ:x

    perm. |  mod/del. |  reply.
  9. 비와그대 2012.02.02 03:52 신고

    소중한 자료 감사합니다~ 수정해서 사용좀 할게요 ~

    perm. |  mod/del. |  reply.
  10. 하얀잉크 2012.02.21 17:44 신고

    블로그 컨텐츠 하단이 허전하셨던 분들, 추천을 늘리고 싶었던 분들이라면
    꼭 참고할 컨텐츠~ 씨디맨 님 감사합니다. ^^ 잘 적용했습니다.

    perm. |  mod/del. |  reply.
  11. 테리아박 2012.07.11 11:01 신고

    소중한 정보 감사합니다. 씨디맨 님 덕분에 편하게 적용했습니다.
    감사해요 ^^

    perm. |  mod/del. |  reply.
  12. 짓기 2012.07.12 14:17 신고

    스킨 정말 감사하게 쓰겠습니다. 씨디맨님 정말 감사드립니다.!

    perm. |  mod/del. |  reply.
  13. 짓기 2012.07.12 14:17 신고

    스킨 정말 감사하게 쓰겠습니다. 씨디맨님 정말 감사드립니다.!

    perm. |  mod/del. |  reply.
  14. Pezay 2012.10.07 16:22 신고

    씨디맨님 뷰 스킨 감사히 가져갈게요. 너무 갖고 싶었었네요~
    좋은 자료 종종 얻어 갈까 합니다.ㅎㅎ 그럼 좋은하루되세요^^

    perm. |  mod/del. |  reply.
  15. 제이진 2013.02.08 12:12 신고

    감사합니다! 정말 많이 배우고 가요. 잘 쓰겠습니다 헤헤

    perm. |  mod/del. |  reply.
  16. 핑크스쿨 2013.02.18 20:32 신고

    좋은 정보와 상세한 설명 감사합니다~s;s

    perm. |  mod/del. |  reply.
  17. 캣대디 2013.05.24 17:14 신고

    정말 감사합니다^^ 잘 사용하겠습니다~~

    perm. |  mod/del. |  reply.
  18. 시애틀 홈스쿨맘 2013.06.06 12:11 신고

    감사합니다. 덕분에 잘 적용했습니다. ^^

    perm. |  mod/del. |  reply.
  19. jonggyu324 2013.11.02 16:28 신고

    다음뷰 스킨 멋지네요

    따라 해보고 적용 연습중입니다.

    감사합니다.

    그런데 사진의 크기에 따라 다음뷰 스킨 크기도 변하네요

    perm. |  mod/del. |  reply.
  20. jaket 2013.11.12 11:35 신고

    난 정말 당신의 잘 쓰여진 기사를 읽고 즐기는입니다. 귀하의 블로그에 노력과 많은 시간을 보내는 것 같습니다. 나는 그것을 북마크하고 난 새로운 기사를 읽고 기대하고있다.좋은 일을 계속!

    perm. |  mod/del. |  reply.
  21. Seac 2014.03.01 04:58 신고

    감사합니다 ^^^

    perm. |  mod/del. |  reply.