다음뷰 추천 위젯 배경 꾸미기 하이 퀄리티 테마 블로그팁

다음뷰 배경 꾸미기 그 시작


다음뷰 추천 위젯이 있습니다. 다음뷰에 추천을 할 수 있는 위젯이죠. 이 추천 위젯에 배경을 주어서 더 부곽을 시키고 스킨과 어울리게 하는데 그 첫번째 의도가 있습니다. 제가 배경을 만들어서 배포를 했었고 알게 모르게 많은 분들이 잘 쓰고 계시네요.

어떻게 사용하는지에 대해서는 아래 링크를 자세히 참조해 주세요. 여기에서는 코드만 공개하도록 하겠습니다. 넉두리지만 혼자서만 쓰려고 만들었던 코드도 하나 있는데 결국 공개해버렸네요.




다음뷰 배경 꾸미기 방법 (꼭 읽어보세요)


다음뷰 배경 꾸미는 방법 설명 및 다음뷰 배경 꾸미기 공개 코드 링크 : http://cdmanii.com/1046




다음뷰 배경 꾸미기 흰색 배경 전용


다음뷰 배경 꾸미기 방법



div.blogger-news-widget  {
background:url("https://t1.daumcdn.net/cfile/tistory/130BF5154BDD21D602") no-repeat scroll 85px -36px transparent; clear:both; display:inline; float:right; height:175px; margin-top:40px; overflow:hidden !important; padding-top:35px;
}



다음뷰 배경 꾸미기 방법



div.blogger-news-widget  {
background:url("https://t1.daumcdn.net/cfile/tistory/112597154BDD21D7B3") no-repeat scroll 85px -36px transparent; clear:both; display:inline; float:right; height:290px; margin-top:40px; overflow:hidden !important; padding-top:16px;
}



다음뷰 배경 꾸미기 방법



div.blogger-news-widget  {
background:url("https://t1.daumcdn.net/cfile/tistory/130DE4154BDD21D701") no-repeat scroll 85px -36px transparent; clear:both; display:inline; float:right; height:140px; margin-top:40px; overflow:hidden !important; padding-top:49px;
}





다음뷰 배경 꾸미기 검은색 배경 전용


다음뷰 배경 꾸미기 방법



div.blogger-news-widget {
background:url("https://t1.daumcdn.net/cfile/tistory/1508F8274BEAB5962C") no-repeat scroll 162px 0 transparent; clear:both; display:inline; float:right; height:140px; margin-top:10px; overflow:hidden !important; padding-top:54px;
}



다음뷰 꾸미기 간략 설명


흰색 배경으로 3가지 테마를 적용해서 꾸며보았습니다. 발랄한 분위기의 케릭터도 이용했고, 권총모양의 특이한 디자인의 스킨에도 어울릴만한 것을 만들어보았습니다. 검은색에 어울리는 다음뷰 배경도 만들어보았습니다. 많이 활용해주세요.

해당 코드를 style.css 의 맨하단에 넣어줍니다. 적용된 부분을 확인합니다. 끝

블로그 팁 모음 링크 : 티스토리 블로그 팁 모음


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

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

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

댓글 입력 폼

s;s s;s

     이미지 업로드

  1. 이전 댓글 더보기
  2. CSKIN 2010.05.16 11:11 신고

    쩝 하나 만들어 봤습니다. ^^
    http://sungjun.tistory.com/99

    어떤가요??

    아 그리고 다음뷰 버튼 위치 바꾸는 방법좀 부탁드립니다 ㅠ_ㅜ

    perm. |  mod/del. |  reply.
  3. 버섯공주 2010.05.16 14:03

    해바라기 들고 있는 아이, 너무 귀여워요. 저 아이로 냉큼 바꿔야겠어요., +_+ 흐흐.

    perm. |  mod/del. |  reply.
  4. 팩토리사장 2010.05.16 17:55 신고

    좋은 글 감사합니다 잘 쓸께요

    perm. |  mod/del. |  reply.
  5. 라라윈 2010.05.17 06:31

    씨디맨님의 추천버튼 옆의 그림들이 넘 부러웠는데
    공개해 주셔서 감사합니다~ ^^

    perm. |  mod/del. |  reply.
  6. 해커 C 2010.05.17 08:17

    좋은 정보 감사합니다 !!

    권총이 아주 멋있네요 ㅎㅎ

    감사합니다 !!~~

    perm. |  mod/del. |  reply.
  7. 마음의 꿀단지 2010.05.17 20:14

    네모난 박스만 덜렁~~뻘쭘하던 참에..ㅋㅋ ...참 ! 전에도 이런 팁 소개해주신 적있었는데요

    perm. |  mod/del. |  reply.
  8. demun 2010.05.21 16:21

    유용한 팁입니다. 잘 봤습니다.

    perm. |  mod/del. |  reply.
  9. 2010.05.21 16:22

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2010.05.21 18:15 신고

      감사해요. 알려주셔서 수정했습니다. 근데 다음뷰 배경쪽 문제가 아니라 그 아래 추천리스트에 float 를 지정안해줘서 크롬에서 잘못나왔었네요. 보면 width 를 반드시 넣어야할 속성값은 아니지만 width 를 빼면 크롬이 잘못인식하고 float 도 넣지 않으면 position: relative 를 잘못띄워주네요. 다음부터는 크롬은 꼭 확인해야겠네요. 지적해주셔서 감사합니다. ~

      perm. |  mod/del. | 
  10. 지식아이 2010.06.15 00:51 신고

    항상 올 때마다 궁금했었는데 이렇게 공개해 주셔서 감사합니다.
    유용하게 잘 쓸께요.^^

    perm. |  mod/del. |  reply.
  11. 모기사냥 2010.06.17 06:00 신고

    어떻게 하는지 궁금 했었는데

    정보 알려주셔서 감사합니다 ~

    perm. |  mod/del. |  reply.
  12. thinkingpig 2010.07.30 20:27

    매번 너무나 좋은 자료만 가져갑니다^^
    저는 드릴게 별로 없네요.ㅜㅜ^^
    너무나 감사합니다...바로 적용했습니다~~~

    perm. |  mod/del. |  reply.
  13. 촌스런블로그 2010.08.31 16:27

    저도 평소에 참 궁금했는데 너무 감사해요~~
    제 블로그에도 적용을 시켰습니다~~

    perm. |  mod/del. |  reply.
  14. 하늘반지 2010.09.13 00:24

    너무 이쁘네요^^
    잘쓸께요~~ 블로그 번창하세요

    perm. |  mod/del. |  reply.
  15. 애드젯 2010.12.06 10:45

    안녕하세요^^ 애드젯입니다.
    돈 버는 위젯, 애드젯을 아시나요?

    블로그 예쁘게 꾸며주는 위젯 + 광고 수익을 창출 하실 수 있는 위젯입니다.
    간단한 위젯 설치이기 때문에 어려운 점은 없습니다!!

    애드젯 구경해 보시고 예쁜 위젯 설치하세요!
    >> 애드젯 : www.adget.co.kr

    애드젯 위젯으로 수익을 많이 창출해 보세요!^_^
    앞으로도 더 많은 애용 부탁드립니다.
    감사합니다.(--)(__)

    perm. |  mod/del. |  reply.
  16. 웹디 2011.01.08 19:06

    정말 궁금했던건데 한방에 싹 해결됐습니다.
    감사합니다.^^

    perm. |  mod/del. |  reply.
  17. 달콤한 하루 2011.02.09 10:12

    다음 뷰 버튼달려고 이리저리 찾다가 여기까지 왔어요 ^^
    제공해주신 버튼 잘 쓸께요 ^^
    감사합니다. 좋은 하루 되세요. ^^:)

    perm. |  mod/del. |  reply.
  18. 바닐라로맨스 2011.03.17 00:23 신고

    저는 글의 맨아래와 중간에 두번 추천 버튼을 넣고 싶은데 중간에 추천 버튼을 넣을때 배경을 할수 있는 방법은 없나요?

    perm. |  mod/del. |  reply.
    • 씨디맨 2011.03.17 00:28 신고

      서식으로 해결하시는 방법이 있습니다.

      가능하면 div 로 박스를 만들고 해당 div 에 이름을 준뒤 해당 이름의 CSS 를 제어해서 이미지를 배경으로 넣는게 좋습니다.

      <div id="recommandButton">
      <!-- 다음 추천 버튼 -->
      </div>

      CSS 부분

      #recommandButton { width: 100%; height: 45px; background: url(백그라운드이미지주소) no-repeat center center; }


      이런식으로 제어해서 쓸 수 있겠죠. 이렇게 해두면 장점이라면 만약 본문에 다음추천버튼의 배경을 바꾸고 싶을때 CSS 만 다시 조정하면 모든 문서의 값을 다 바꿀 수 있습니다. 그냥 서식 자체에 span 등으로 지정해두면 모두 바꾸지는 못하게 됩니다. 일일이 수작업으로 바꿔줘야겠죠.

      근데 또 한가지 의견은 본문 중간에 다음추천버튼을 넣는건 그렇게 좋지는 않다고 봅니다. 먼저 추천을 강요하는것이기도 해서 별로 않좋아하는 분도 있으니까요. 사이드바등에 떠다니도록 띄워주는것도 좋을듯합니다.

      perm. |  mod/del. | 
    • 바닐라로맨스 2011.03.17 02:23 신고

      앗이렇게 답변을 달아주시고! 감사해요! 다만 제가 엄청난 초보라;;;; ㅎㅎㅎㅎ;;; 박스만드는것부터 막히네요;;;; 소스를 예제로 만들어주시면...제가 수정까지는... 해볼수 있을텐데...ㅜ_ㅠ 너무 무식해서 죄송합니다 ㅜ_ㅜ

      perm. |  mod/del. | 
  19. LoveMusic 2011.07.26 11:54

    ........................험.....

    perm. |  mod/del. |  reply.
  20. 걷다보면 2012.01.17 23:11

    바로 응용하였습니다^^
    감사합니다^^

    perm. |  mod/del. |  reply.
  21. 김후락 2012.12.09 02:15

    항상좋은 자료 잘보고 있습니다.

    다음뷰 꾸미는데 잘 쓰겠습니다.^^

    perm. |  mod/del. |  reply.