티스토리 View On 버튼 꾸미기

티스토리 View On 버튼 꾸미기

View On 버튼은 처음에 기본형으로 되어있는데
버튼주변을 꾸미려면 먼저 기본형에서 버튼형으로 바꾸어주어야 한다.
아래 내용은 View on 버튼을 나오게 하는 방법도 포함된다.

자신의 티스토리 블로그에 로그인해서 [관리 - 플러그인 - 플러그인 설정] 으로 이동한다.
Daum view를 찾아서 클릭한다. 저걸 활성화 화면 View on 버튼이 나오는것임

그럼 아래 사진처럼 펼쳐지는데 버튼형을 클릭..

선택했으면 저장버튼을 누른다.

그다음 View On 버튼에 맞는 이미지파일을 만들거나 퍼온다.
일단 아래 그림처럼 만들어보았다.
이미지파일은 대충 View On 버튼 자리만 비워두고 아래와같이 만들면된다.
(아래 그림은 우클릭->다른이름으로 사진 저장 하셔서 사용하시면 됩니다)

 

만든 그림파일을 티스토리 블로그(아니면 적당한 다른곳에) 에 올린다.
올린 그림파일에 우클릭해서 속성으로 들어가 주소를확인한다.

[ 관리 - 스킨 - HTML/CSS ] 로 이동한 후에
style.css 창의 맨 아래에 다음과 같이 쓰면 된다.

div.blogger-news-widget {
     background: url(그림파일 주소) no-repeat scroll center center;
     display:inline;
     clear:both;
     float:right;
     overflow:hidden !important;
     margin-top: 10px;
     margin-bottom: 10px;
 }

참고로 그림파일 크기나 모양이 달라지면 명령어도 달라지는데 이건 각자알아서;
...
예로 들어준 모양에서 크게 벗어나지 않으시면 명령어도 그대로 쓰시면되요
어쨌든 위 이미지 파일을 적용해보면

(사진을 클릭하면 크게 보입니다)

저장을 누르면 아래와 같이 적용된다.

자 여기까지 보셨으면 이제 밑에껄 한번 눌러봅시다.