티스토리 마우스 대면 움직이고 색이바뀌는 링크버튼 만들기(클릭전환높이기)

 

티스토리는 전면광고 수익이 높다고 합니다
포스팅하면서 바로가기 링크버튼을 만들고
버튼을 클릭하면 전면광고가 뜨게되죠
 
이 전면광고가 수익률이 있기 때문에 
블로그 글쓰기 하는 사람들은 
정보를 원하는 사람들의 needs에 맞게
글을 쓰고 일일이 검색하게 할 필요 없이
바로가기 할 수 있는 링크버튼을 만든다면
수익향상에 더 도움이 되겠죠~

 

참고로

내 티스토리 모바일에서는 

버튼이 보이지 않습니다.

 

모바일에서 구글 네이버 다음 등

사이트를 통해서 내 글을 확인해보면

링크버튼이 생성되어 보여집니다.

 

나도 다른 사람들의 포스팅을 보고 
링크버튼을 만들어 보았으나 상세히
서술되지 않은 부분도 있어 그 부분에 대해서도
더 추가해서 설명할게요
 
먼저 우리가 코딩을 할 필요 없이 
링크버튼을 만들어주는 사이트가 있습니다.
 

css 버튼만들기 바로가기

 
 
 
 
 
위 버튼을 누르면 위와같은 이런 화면이 뜹니다.
 
 
아래 사진을 보면 
외곽선, 글자색, 배경색, 등을
바꿀 수 있는 색상표가 있어요
이곳에서 내가 원하는 색상을 지정하고
 
 
 
 
 

 
 
 
 
 
아래 사진에서 글자크기와 그림자
외곽선의 굵기
모서리 조정 
버튼 사이즈 등을
설정하세요
 
하나하나 눌러보면
버튼이 그에 맞게
변하기 때문에
알기 쉽습니다.
 
 
 
 
 

 
 
 
 
 
아래 그림과 같이 코드 만들기를 클릭하세요
 
 
 
 
 
 

 
 
 
 
 
 
아래사진과 같이
html코드가 나오죠
 
먼저 2번을 복사한 후
티스토리 설정->스킨편집->html->css
눌러주세요
 
css의 다른 글자들은 손대지말고
맨아래로 스크롤을 내려 2번을 
붙여넣기 해주세요
 
다른 디자인을 만들어
여러개 붙여넣기 해도
상관 없습니다.
 
서식관리에서 
자주쓰는 링크 몇개 만들어 두면
편하거든요.
 
 
 
 
 
 

 

 
 
다음은
서식관리로 들어갑니다.
 
구분하기 쉽게 제목을
링크버튼(색상)으로 하고
html모드로 바꿔
1번을 붙여넣기 합니다.
 

 
 
 
 
 
링크주소는 포스팅 할때 
html화면전환 후 
1번 "링크주소"의
링크주소를 지우고
붙여넣기 해야
오류가 없습니다
 
2번 링크버튼 이름도
html모드에서
하는게 좋습니다
 
일반모드에서
링크주소를 달아보니
링크설정이 안되어 있거나
연결된 사이트로 넘어가지를
않더군요.
 
한가지 더 알려드리자면
폰트 사이즈와
링크버튼 길이를
css에 복사한 코드에서
수정할 수 있는데
 
글자크기는 위에서 알려드린
사이트에서 나오는 최대치가
가장 좋고, 길이도 모바일로
봤을 때 가장 괜찮아보였습니다.
 
css에 봍사한 코드란에서
폰트사이즈와 padding 필셀값을
변경해주시는게 좋은데
사이트에서는 76픽셀이 최대치네요.
 
좀 더 길게 눈에 뛰게 하고 싶다면
8~90픽셀 정도로 수정하고
포스팅하면서
미리보기로 확인해보시기 바랍니다.