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

제가 사용하는 다음 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(https://t1.daumcdn.net/cfile/tistory/135F530E4AB8E06F57) 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(https://t1.daumcdn.net/cfile/tistory/15105D0E4AB8E06F03) 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(https://t1.daumcdn.net/cfile/tistory/175C580E4AB8E06F40) 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(https://t1.daumcdn.net/cfile/tistory/124AB20E4AB8E06F7B) 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(https://t1.daumcdn.net/cfile/tistory/134A090E4AB8E06F8C) 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(https://t1.daumcdn.net/cfile/tistory/185B030E4AB8E07052) 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(https://t1.daumcdn.net/cfile/tistory/1941270E4AB8E070A3) 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(https://t1.daumcdn.net/cfile/tistory/125B2F0E4AB8E07046) 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(https://t1.daumcdn.net/cfile/tistory/2054D80E4AB8E0707E) 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(https://t1.daumcdn.net/cfile/tistory/12588C0E4AB8E0715E) 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(https://t1.daumcdn.net/cfile/tistory/200CF1284BE2D0ED4C) no-repeat scroll center center;
    display:inline;
    clear:both;
    float:right;
    overflow:hidden !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

작업파일 다운로드

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

psd.rar

마무리

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] - 블로그 스킨 수정해 드립니다.

스킨공부에 도움이 될 책들