정말 티스토리 블로그 복잡하고 어렵네요. css라는 단어는 티스토리 블로그 하면서 진짜 처음 들어봤습니다만ㅋㅋ 하지만 저를 무참히 깠던 네이버 외부계정등록 담당자에게 파워블로거가 되주기로 해서 악으로 두서없이 막 배웠습니다. 제가 두 달동안 야생으로 배운 css 및 블로그 유용 팁을 몇 가지를 소개 할께요.
1. 티스토리 상단 메뉴바 없애기
설정-꾸미기-화면설정-화면출력 메뉴에서 스킨을 바꿀 수 있는 티스토리 블로그유저라면 다 가지고 있는 오른쪽 상단에 표시되는 메뉴바를 없앨 수 있습니다.
설정-꾸미기-HTML/CSS 편집 메뉴로 들어가시면 오른쪽 하단에 style.css 창 맨 하단에 소스를 붙혀넣고 저장을 누르시면 상단 메뉴바가 사라집니다.
tistorytoolbarid.txt#tistorytoolbarid { display:none; }
2. 포스트에 SNS버튼 설치하기
티스토리 플러그인에서도 제공하지만 페이스북이나 트위터같은 대형 소셜밖에 지원하지 않는 관계로 다양한 소셜버튼을 제공하는 Add This 서비스를 이용해 봅시다.
저도 저렇게 포스트 하단에 보이도록 설치를 했는데요.
https://www.addthis.com/get/sharing#.UOfiUW8z28A
대표적으로 페이스북, 트위터, 메일, 핀터레스트 버튼으로 구성된 디자인버튼을 제공하지만 +Share버튼 누르면 위와 같이 즐겨찾기에서부터 텀블러, 구글, PDF 온라인으로도 내보낼 수 있는 327가지 소셜을 지원하는 팝업이 뜹니다. 유용하지요.
가입을 요구하지만 페이스북 계정 또는 트위터 계정으로 연동이 가능하므로 추가 가입작성이 필요없습니다. 링크로 들어가셔서 버튼스타일을 선택하는 화면이 나오고 오른쪽 창에 소스코드가 나오는걸 복사해서 Skin.html에 붙혀넣으면 됩니다.
소스코드의 위치는,
skin.html
<div class="article">
정말 티스토리 블로그 복잡하고 어렵네요. css라는 단어는 티스토리 블로그 하면서 진짜 처음 들어봤습니다만ㅋㅋ 하지만 저를 무참히 깠던 네이버 외부계정등록 담당자에게 파워블로거가 되주기로 해서 악으로 두서없이 막 배웠습니다. 제가 두 달동안 야생으로 배운 css 및 블로그 유용 팁을 몇 가지를 소개 할께요. 1. 티스토리 상단 메뉴바 없애기 설정-꾸미기-화면설정-화면출력 메뉴에서 스킨을 바꿀 수 있는 티스토리 블로그유저라면 다 가지고 있는 오른쪽 상단에 표시되는 메뉴바를 없앨 수 있습니다. 설정-꾸미기-HTML/CSS 편집 메뉴로 들어가시면 오른쪽 하단에 style.css 창 맨 하단에 소스를 붙혀넣고 저장을 누르시면 상단 메뉴바가 사라집니다. #tistorytoolbarid { display:none; } 2. 포스트에 SNS버튼 설치하기 티스토리 플러그인에서도 제공하지만 페이스북이나 트위터같은 대형 소셜밖에 지원하지 않는 관계로 다양한 소셜버튼을 제공하는 Add This 서비스를 이용해 봅시다. 저도 저렇게 포스트 하단에 보이도록 설치를 했는데요. https://www.addthis.com/get/sharing#.UOfiUW8z28A 대표적으로 페이스북, 트위터, 메일, 핀터레스트 버튼으로 구성된 디자인버튼을 제공하지만 +Share버튼 누르면 위와 같이 즐겨찾기에서부터 텀블러, 구글, PDF 온라인으로도 내보낼 수 있는 327가지 소셜을 지원하는 팝업이 뜹니다. 유용하지요. 가입을 요구하지만 페이스북 계정 또는 트위터 계정으로 연동이 가능하므로 추가 가입작성이 필요없습니다. 링크로 들어가셔서 버튼스타일을 선택하는 화면이 나오고 오른쪽 창에 소스코드가 나오는걸 복사해서 Skin.html에 붙혀넣으면 됩니다. 소스코드의 위치는, skin.html <div class="article"> </div> 소스코드 위치 <!-- article close --> [ div class=article ] 하단에 복사해 넣습니다. 그래야 포스트 부분에 들어갑니다.[ # # article rep dece # # ] 위에 삽입하면 제목 밑에 위치하고 밑에 삽입하면 포스트 하단에 위치합니다. 적당히 맘에 드는 위치에 복사해 넣으세요. 3. 블로그에 소셜 Follow 버튼 설치하기 - Add This로 설치하기 https://www.addthis.com/get/follow#.UOf4FW8z28A Follow Buttons 링크로 들어가서 각 빈 칸에 자신의 소셜아이디를 넣으면 오른쪽에 자동으로 소스가 추가 됩니다. 그럼 맘에 드는 위치에 복사해서 넣으면 끝. 저는 블로그 하단에 위치하도록 skin.html 에 추가했지만 꾸미기-사이드바 메뉴에 태그입력기 모듈로 추가하면 사이드바 부분에 표시됩니다. 꾸미기-사이드바 메뉴에 태그입력기 모듈이 없으신 분들은 플러그인설정에서 추가 하시면 됩니다. 저처럼 하단에 설치하실 분들은 카피라이트 태그 바로 위로 복사하면 하단에 위치하게 됩니다. skin.html <div id="footer"> 소스코드 위치 <div class="copyright"> - go2web20 로 트위터 위젯 달기 http://www.go2web20.net/twitterFollowBadge/ 오로지 트위터 계정 위젯만 달고 싶다면 이걸 더 추천합니다. 심플하고 이쁘지요. 색깔부터 위젯 위치까지 쉽게 설정할 수 있습니다. 맘에 드는 스타일을 정하면 손가락이 가르키고 있는 오른쪽 라벨이 변하면서 미리보기 기능을 수행합니다. Update code 을 누르면 소스코드가 나오는데 친절하게 그 밑에 어디에 넣으면 된다고 빨간글씨로 써져 있습니다. BODY 태그 사이에 복사해 넣으라고 하네요. ctrl+F로 body 태그를 찾은 뒤 그 밑에 아무데나 적당한 곳에 넣으면 됩니다. skin.html <body> 소스코드 위치 </body>
</div>
소스코드 위치
<!-- article close -->
[ div class=article ] 하단에 복사해 넣습니다. 그래야 포스트 부분에 들어갑니다.[ # # article rep dece # # ] 위에 삽입하면 제목 밑에 위치하고 밑에 삽입하면 포스트 하단에 위치합니다. 적당히 맘에 드는 위치에 복사해 넣으세요.
3. 블로그에 소셜 Follow 버튼 설치하기
- Add This로 설치하기
https://www.addthis.com/get/follow#.UOf4FW8z28A
Follow Buttons 링크로 들어가서 각 빈 칸에 자신의 소셜아이디를 넣으면 오른쪽에 자동으로 소스가 추가 됩니다. 그럼 맘에 드는 위치에 복사해서 넣으면 끝.
저는 블로그 하단에 위치하도록 skin.html 에 추가했지만 꾸미기-사이드바 메뉴에 태그입력기 모듈로 추가하면 사이드바 부분에 표시됩니다.
꾸미기-사이드바 메뉴에 태그입력기 모듈이 없으신 분들은 플러그인설정에서 추가 하시면 됩니다.
저처럼 하단에 설치하실 분들은 카피라이트 태그 바로 위로 복사하면 하단에 위치하게 됩니다.
skin.html
<div id="footer">
소스코드 위치
<div class="copyright">
- go2web20 로 트위터 위젯 달기
http://www.go2web20.net/twitterFollowBadge/
오로지 트위터 계정 위젯만 달고 싶다면 이걸 더 추천합니다. 심플하고 이쁘지요. 색깔부터 위젯 위치까지 쉽게 설정할 수 있습니다. 맘에 드는 스타일을 정하면 손가락이 가르키고 있는 오른쪽 라벨이 변하면서 미리보기 기능을 수행합니다. Update code 을 누르면 소스코드가 나오는데 친절하게 그 밑에 어디에 넣으면 된다고 빨간글씨로 써져 있습니다.
BODY 태그 사이에 복사해 넣으라고 하네요. ctrl+F로 body 태그를 찾은 뒤 그 밑에 아무데나 적당한 곳에 넣으면 됩니다.
skin.html
<body>
소스코드 위치
</body>
- 티스토리
- 디스커스
