블로그에 롤오버 다운로드 버튼을 만들자
블로그들을 다니다 보면 링크로 가기나 다운로드 버튼이 예쁘게 생겨있는 것을 보면 내 블로그나 사이트에도 달고 싶은 마음이 듭니다. 하지만 Html 코드를 몰라서 그냥 글자만 적고 링크로 만족하는 경우가 많습니다. 이제부터는 남들처럼 좀 멋진 이미지 버튼을 달고 또 롤오버까지 되게하여 블로그를 보기 좋게 꾸며보자. 블로그는 Tstory를 기준으로 했지만 html 작성만 가능하다면 어느 블로그든 가능합니다.
글자에 링크걸줄만 알면 누구나 금방 쉽게 만들 수 있으니 잘 활용해 보세요.
마우스를 올리면 버튼 이미지의 색깔이 변하는 모양으로 만드는 것입니다.
먼저 준비해야될 것은 아래와 같은 2개의 이미지를 구하는 것입니다. 포토샵사이트나 무료이미지 사이트를 둘러보면 아래와 같은 무료이미지를 구하는 것은 쉬울 겁니다. 구하기 힘들다면 아래의 이미지를 사용해도 좋습니다. 그리고 이글의 아래쪽에 여기에서 사용한 버튼의 무료 이미지를 psd파일로 다운받은 사이트를 링크해 두었습니다.
상기 두개의 이미지를 블로그 글쓰기를 통해서 아무곳에나 올려 놓은 다음 이미지위에서 마우스 오른쪽버튼을 눌러 링크주소를 복사해 둔다. 그리고 아래의 소스코드중 바꿀부분인 이미지 주소와 링크시킬 사이트주소만 변경시킨다.
<a href="링크주소">
<img src="첫번째이미지" onmouseover="this.src='두번째이미지'" onmouseout="this.src='첫번째이미지'"/>
</a>
<a href="#">
<img src="1.png" onmouseover="this.src='2.png'" onmouseout="this.src='1.png'" width="100px" height="100px"/>
</a>
이제 변경 시킨 위의 소스코드를 본문 글중에 원하는 위치에 붙여넣기만 하면 된다. 단 꼭 글쓰기 에디터의 Html 모드에서 붙여 넣어야 한다. Tstory 블로그를 사용하시는 분은 서식으로 만들어서 사용하면 클릭한번으로 집어 넣을 수도 있다.
괜찮은 버튼 이미지가 있어서 아래에 링크를 올립니다. PSD파일로 다운로드할 수 있어서 포토샵으로 수정이 가능합니다. 웹페이지의 오른쪽 중간쯤에 Download 버튼이 있으니 잘 찾아보세요.
[사이트 주소: http://solidsilver.deviantart.com/art/Free-button-collection-166423627]
즐거운 하루 되세요