티스토리 다음뷰 손가락 버튼 자리 옮기는 방법
티스토리 이용자 분들은 대부분 다음뷰를 이용하고 계실텐데요.
이 버튼의 위치를 옮기거나, 혹은 다른 요소를 다음 뷰 버튼쪽으로 옮기고 싶지만, skin.html수정으로는 한계가 있음을 알고계실겁니다.
이번 글에서는 jQuery의 append문을 이용해 요소들의 자리를 바꾸는 방법을 알아보겠습니다.
다음뷰 아래에 클릭 구걸(..)달기
1. 다음뷰 밑에 넣을 말을 만들고 skin.html어딘가에 넣습니다.(어짜피 옮겨지므로 아무데나 상관없음)
그리고 첫 태그에 id를 plzclck으로 지정해줍니다.
예시)
<p id="plzclck" style="text-align: center;"><b><span style="font-family: 'Times New Roman';font-size: 14pt; background-color: rgb(168, 196, 13); color: rgb(255, 255, 255);">손가락 꾹! ↑↑ 눌러주세요<img src="http://i1.daumcdn.net/mimg/mypeople/sticker/edit/sticker_003.png" alt="좋은하루"></span></b>
</p>
2. skin.html에서 </body> 바로 위쯤에 다음 코드를 삽입해줍니다.
<!-- 다음뷰 밑으로 옮기기 -->
<script type="text/javascript">
function reLocate() {
$(".blogger-news-widget").append($("#plzclck"))
}
$('document').ready(reLocate());
</script>
※본 스크립트는 jQuery를 사용합니다. 스크립트가 작동하지 않는다면 스크립트 윗줄에 다음을 추가해주세요.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <![endif]-->
응용
$(".blogger-news-widget").append($("#plzclck"))
여기서 파란색이 다음뷰의 class 값이고, 빨간색의 id를 가진 태그를 다음뷰 태그 아래로 보낸다는 구문입니다.
다음뷰를 옮기려고 한다면, 옮기고 싶은 위치에 예를들어
<div id="viewhere"></div>를 삽입해놓고
위의 스크립트에서 append문을
$("#viewhere").append($(".blogger-news-widget"))
로 바꾸면 다음뷰 버튼이 div를 삽입한 곳으로 이동하게 됩니다.
본문 작성시 본문 위쪽에 div를 삽입해두면 본문 위쪽으로 다음뷰를 옮기는 것도 가능하겠죠?
여러분이 원하는 곳에 view버튼을 이동시켜보세요.
