티스토리 따라다니는 배너 플로팅 메뉴 만들기

티스토리 운영을 하다보면 따라다니는 베너 또는 메뉴를 만들고 싶을때가 있다 배너가 따라다닌다면 눈길이 한번 더 가기때문에 클릭 확율을 높일 수 있으며 간단한 내용 삽입이기때문에 로딩도 늦지 않아 유용하게 쓰일 수 있다

필자는 컴퓨터 프로그래밍이나 홈페이지를 만들지 모르며 인터넷에 떠도는 내용을 주워 내 쓰임세에 맞게 고쳐 쓰는것일뿐 상세한 내용은 잘 모른니 참고해 주시길 바란다

플로팅을 적용하기 위해 어떤 위치에 삽입을 할건지 미리 생각을 하고 시작해보자

플로팅 적용하기

플로팅을 적용하기 위해서 자바스크립트를 받도록 하자 총 2개의 파일이 있다

jquery.sticky.js

0.00MB

jquery.sticky.min.js

0.00MB

 

다운받은 파일을 티스토리에 업로드하자 

티스토리 관리자메뉴 > html편집 > 파일업로드에 위에 받은 파일을 업로드하자
파일 업로드 후 html 편집으로 다시 들어가 /body 위에 복사하여 붙여 넣는다

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="./images/jquery.sticky.min.js"></script>
<script type="text/javascript">
		$(function(){ // document ready 
		  $('.sticky').sticky( {topSpacing: 100,bottomSpacing:$("#footer").outerHeight(true)} );
		});
	</script>
	<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

그다음 적용하고자하는 위치에 div를 만들면 끝이난다

필자는 사이드바에 적용하였다

<div class="widget sticky">
여기에 광고 코드 입력 또는 넣고자하는 것을 넣으면 된다
</div>

플로팅메뉴는 메뉴에다가 위 div를 넣어주면 되며 상하여백은 css에서 편집해도 되고 아까 html에 삽입한 자바스크립트 코드에서 가능하다

위에서 얼마만큼 공간을 띄우고 따라다니게 할지는 topspacing 옆 숫자를 사용하면 된다 숫자를 자유자재로 입력하여 높이를 맞춰보도록 하자