다음뷰 추천버튼 개인의취향 에 맞게 꾸며보자!! - viewON 추천버튼 꾸미기
작성자 : 해커 C 요약 : 다음뷰 추천버튼 꾸미기 (viewON 버튼 꾸미기) 자료 : 이미지 , CSS소스 첨부 (본문 중간 중간 참고) 주의 : 실제와 다른 내용이 포함 될 수도 있음 |
안녕하세요!!
오늘은 다음뷰 추천버튼 개인의취향에 따라 꾸미는 내용을 포스팅 하겠습니다 !!
일단 어떻게 꾸며졌는지 봐야 겠죠??
해커 C 블로그에 적용된 모습입니다!!
어때요? 괜찮죠?? 이미지를 '해커 C'가 직접 만들어서 ~ 저작권 문제도 없습니다!!
자 그럼 꾸미는 방법을 소개 해드리겠습니다.
오늘 시간이 조금 없어서 .. 조금 간략하고.. 스샷도 좀 이상하게 찍혀버렸어요!!
그래도 설명을 최대한 ~ 해드릴께요..!!
'해커 C 이야기' 본문사이즈는 680px 입니다. 그렇기 때문에 포스팅 내용 자체가
680px 기준입니다.!!
그리고 스킨편집모드에서 [style.css] 스타일시트 부분에서
요기 밑에 소스를 다운받으셔서 넣으세요!!
다음뷰추천버튼.txt
2010년6월4일 오후 5시 20분 업데이트 (이미지 첨부했습니다. 빠트려 버렸네요 ㅎㅎ;;)
hackerC.zip
이미지가 좌,우,위,아래 방향으로 이동 합니다!! 자신의 추천버튼 위치에 맞게
이동시켜 주시면 됩니다.!!
앞쪽 00px 은 가로 이구요, 뒤쪽 00px은 세로 입니다.
기호 없이 그냥 수치를 적으시면 가로기준은 오른쪽방향, -기호는 왼쪽으로 이동합니다.
그리고 세로기준은 기호없이 하시면 아래쪽, -기호를 붙이시면 위쪽으로 이동합니다.
추가내용
/* 다음뷰 */
div.blogger-news-widget {
background:url(https://t1.daumcdn.net/cfile/tistory/15225B1B4C268F1134)
no-repeat scroll 3px -2px transparent; clear:both; display:inline; float:right; height:104px;
margin-top:2px; overflow:hidden !important; padding-top:10px;
}
빨간색부분은 가로세로 위치조절, 파란색부분은 이미지높이 입니다.
div.blogger-news-widget {
background:url(https://t1.daumcdn.net/cfile/tistory/15225B1B4C268F1134)
no-repeat scroll 3px -2px transparent; clear:both; display:inline; float:right; height:104px;
margin-top:2px; overflow:hidden !important; padding-top:10px;
}
빨간색부분은 가로세로 위치조절, 파란색부분은 이미지높이 입니다.
현재 '해커 C' 가 제공 해드리는 이미지는 104px에서 최적화를 했기 때문에 이미지 높이가 104px입니다.
이렇게 하시면 , 다음뷰 추천버튼의 뒷부분에 배경이 들어 가게 됩니다.!!
현재 소스에는 '해커 C' 가 사용하는 다음뷰 이미지 입니다. 제가 직접 만든 이미지 이기에
저작권 걱정 없이 사용하셔도 됩니다. !! 마음에 안드시면...
직접 만드신 다음, 이미지 사이즈 설정 하신다음.. 가로 세로 위치만 수정 하시면 사용이 가능합니다 !!
오늘 스샷 찍고 있다가 .. 갑자기 일이 생겨서 .. 중간에 템포가 끊겨 버려써!!!!!!!~~
이미지가 많이 첨부 되지 않았네요.. ㅈㅅ합니다.!!
즐거운 하루 되시구요~~ 이쁜 다음뷰 추천 버튼 만드세요~~!!!!