안녕하세요. 오늘은 티스토리 본문 하단 부분에 애드센스 광고나 플러그인
이미지 등등의 위치를 변경하는 방법에 대해서 알아보겠습니다.
티스토리의 경우에는 효율적인 블로그 운영을 위해 다양한 기능의 플러그인을
직접 제공하는 방식을 하고 있습니다.
플러그인에 대해선 할얘기가 많지만.. 아무튼 저렇게 직접적으로 제공하는 방식이
약이 될 수도 독이 될 수도 있습니다.
html 수정을 잘 모르는 초보자에게는 매우 손쉽게 플러그인 적용이 가능하다는 점이 있지만,
새로운 신기능의 플러그인 적용이 어렵다는 점, 플러그인 수정이 힘들다는 점
제공하는 플러그인의 업데이트가 매우 느리다는 점등이 있습니다.
아무튼 쉽게 적용하고 설치할 수 있는 장점도 있지만, 따로 html 수정이 불가능하고,
설치된 플러그인들의 위 이미지 처럼 위치도 자동으로 배치가 정해지기 때문에
위치 변경을 하기 위해서 따로 나타나게하는 html 코드로 수정을 해줘야 합니다.
html 위치 변경 코드를 사용하기 다음 진행을 해야합니다.
우선 제이쿼리라는 자바스크립트 프레임워크 모듈을 블로그에 설치 해야합니다.
제이쿼리는 자바스크립트의 라이브러리로써 다양한 자바스크립트의 코드의 간소화시키고
다양한 브라우저의 호환 가능하게 하여 최근 웹에 가장 널리 쓰이는 모듈입니다.
공식 홈페이지 : http://jquery.com/
공식 홈페이지 다운로드 링크 : Download the compressed, production jQuery 1.11.3
공식 홈페이지에 들어가서 다운로드 받으셔도 되고 위 다운로드 링크를 눌러서 다운받으셔도 됩니다.
여기서 버전이 중요한게 제이커리 v2.x 부터는 익스플로러 6, 7, 8 을 지원하지 않습니다.
당연히 맞는말이긴하지만.. 우리나라는 아직 윈도우 XP사용자들이 많기 때문에..
웬만하면 1.11.3 으로 다운 받아주시는게 좋습니다.
다운 받은 파일을 블로그 관리 [html/css 편집] -> [파일업로드] 에서 추가를 해줍니다.
이렇게 업로드만 시키면 자동으로 되는게 아닙니다. 대부분의 컴퓨터 언어들은 선언을 해줘야합니다.
이 블로그에서는 방금 업로드한 제이쿼리를 쓰겠다고 선언을 해줘야 합니다.
[HTML/CSS] 편집으로 들어갑니다.
헤드 부분에 넣으면 되기 때문에 </head> 를 찾아서 그 위에 붙혀 넣어줍니다.
위 코드 내용은 사실 구글 서버에 올라가 있는 제이쿼리를 우선 불러오는 방식입니다.
그게 페이지 로딩 속도에는 좀 더 빠를 수 있으니깐요. 그래도 에러를 대비해서 업로드 또한 해놓는 것입니다.
자 이제 선언이 끝났고 위치 변경 코드를 사용할 환경이 구축 되었습니다.
이전에 <div> 라는 코드를 간단히 알고 가시면 좋습니다.
하나의 영역 레이아웃을 잡아주는 코드로 <div id 와 <div class 가 대표 코드 소스입니다.
div id 한번 사용가능하고 class는 여러번 사용가능합니다. id가 우선 적용되고요.
아무튼 이게 중요한게 아니고
<div> 라는 코드로 영역을 정한다는 것만 알고, id랑 class 속성이 다르다고만 알면 되고
위치 변경 코드는 ★ </body> 위에 집어 넣으시면 됩니다.
자 예시를 보여드리면서 쉽게 설명드리겠습니다.
저는 블로그 하단 부분에 바로 위 출처 소스라는 이미지를 글 하단 부분 위치에
계속 뜨게 하고 싶었습니다.
div class= "ofsource" 라고 제 임의 영역을 적고 설정한 다음 본문에 아래 부착을 하였습니다.
그런데 결과는 플러그인 들이 자동으로 자리를 잡아버리기 때문에
본문과 태그 사이에 이미지가 껴버려서
플러그인들 가장 밑에 위치가 가버렸습니다.
이것을 저는 아래처럼 [출처이미지]를 다음 공감 위쪽으로 배치하고 싶어서
이제 위치 변경 소스 코드를 사용하겠습니다.
before(전에) 나 after(후에) 둘중 하나를 사용하시면 됩니다.
마우스 우측 클릭 후 요소 검사을 눌러보면
다음 공감뷰는 div class="daum_like_wrapper 로 지정 되어있는 게 보입니다.
아까 제가 사진에 적용 시킨 div class="ofsource 를 활용해서 적으면
이렇게 적으면 위치가 변경이 되겠죠?
여기서 주요 사항입니다. 소스 변경 코드에 수정을 할때
div class 일 경우에는 .ofsource 점을 찍었지만,
div id로 영역을 생성한 경우에는 #ofsource으로 변경을 해야합니다.
위에서 잠깐 언급한 것 처럼 두 코드 속성이 다르기 때문에요
꼭 두 개를 잘 확인해서 사용 하셔야 합니다.
애드센스 광고도 마찬가지입니다. 하나의 div 박스를 임의로 본인이 직접 만들면 됩니다.
다만 기존의 스킨 div 명이랑 겹치면 안되겠죠?? 광고 div로 영역을 만들고
위치 변경 코드를 통해서 플로그인 사이 라든지 위 아래든지 배치 시킬 수 있습니다.
사이드바에서도 유용하게 쓰일수 있고 물론 사이드바는 태크편집기라던지 따로 자체 관리가가능하지만..
div 영역설정은 id로 하든 class로 하던 임의로 설정하시면되고
befor나 after 코드중 하나를 잘 사용 하시면 될 것 같습니다.
잘 사용하시길 바라겠습니다.^^
