[티스토리]다음뷰 추천버튼 위에 클릭구걸 이미지 넣기

  다음뷰 추천버튼.. 생긴게 그다지 직관적이지 못한 것 같습니다.

  저도 처음에는 뭐하는건지 몰랐으니깐요.. 다른 분들 블로그 돌아다니다가 추천이라는 걸 알았고, 제 블로그에도 '추천해주세요~' 하는 텍스트를 넣었죠

다음뷰 추천버튼위에 텍스트를 추가하는 방법을 알고싶으신 분은 여기를 클릭하세요.
'위즈'님의 블로그로 연결됩니다.(새창)

  이번에는 이걸 조금 응용해서 텍스트 대신 이미지를 넣어봤습니다.

▲ 다음뷰 추천박스 위에 넣을 이미지 입니다.

  먼저 이미지를 준비합니다. 저는 이미지 편집 프로그램으로 Paint .Net(프리웨어) 을 사용중인데 텍스트 꾸미기는 영.. 불편하네요~  텍스트 편집은 파워포인트를 이용하시는 편이 훨씬 수월하고 이쁘게 꾸밀 수 있을 것 같습니다.

  이미지를 만들었으면 티스토리 블로그에 먼저 업로드를 해야 합니다. 업로드 하는 방법은 관리자 페이지로 들어가서 스킨 > HTML/CSS 편집 > 파일업로드 순서로 이동한 후 [파일업로드] 버튼을 클릭하셔서 만드신 이미지를 선택해주면 됩니다.

▲ 업로드가 완료된 화면입니다. 경로와 파일명을 기억하세요.

  업로드가 완료 되었으면 HTML/CSS 편집창으로 이동합니다. 그런다음 기존 스크립트 함수를 수정해줍니다.

▲ 스크립트를 수정해 줍니다.

  저기서 빨간색으로 표시된 부분만 수정해주시면 됩니다. 기존 텍스트 대신에 "img" 테그를 이용해서 이미지가 출력되도록 해주시면 됩니다. 경로 다음에 오는 파일명은 각자 편집하신 이미지의 파일명으로 수정해주세요.

  아래는 결과 화면입니다~

▲ 최종 반영된 화면입니다. 

  음.. 괜찮아 보이나요??ㅋ

  제 블로그에 적용한 이미지파일 첨부합니다~

daumview_click.zip