-
top,다음뷰,구독 버튼을 해상도에 관계 없이 블로그 좌우에 고정 설치하기Life/knowledge 2013. 9. 26.
블로그를 운영하게되면 자연스럽게 html을 배우게 되며 세련되고 편한 디자인이 만들어진다. 오늘 설명하려는 것은 top 버튼을 해상도에 상관없이 본문 사이드에 원하는 위치에 고정시킬 수 있는 방법이다. top 버튼은 물론 구독과 추천버튼등 설치가 가능하게 되며 배우게 되면 다양하게 적용할 수 있다는 것을 알 수 있다. 오른쪽 하단에 있는 세팍타크로 공과 top 버튼이 적용된 예로 티스토리 블로그 기준이다.
첫째, 이미지를 준비하여 파일 업로드를 한다.
둘째, html 소스를 html/css 편집에서 코드를 넣는다.
셋째, 파일 업로드된 이미지 주소와 링크 주소 연결하고 위치 설정값을 조절하여 원하는 위치를 찾는다.
어떻게 하는 방법을 알면 아주 간단하다. 제일 먼저 <head> </head> 사이에 아래 코드를 넣는다.
<head>
<script>
function floating_close(divid) {
var strObj = document.getElementById(divid);
strObj.style.display = "none";
}
</script>
</head>
다음 순서는 <body> </body>에서 본문에 해당하는(
) "article" 아래에 코드를 넣는다.블로그를 운영하게되면 자연스럽게 html을 배우게 되며 세련되고 편한 디자인이 만들어진다. 오늘 설명하려는 것은 top 버튼을 해상도에 상관없이 본문 사이드에 원하는 위치에 고정시킬 수 있는 방법이다. top 버튼은 물론 구독과 추천버튼등 설치가 가능하게 되며 배우게 되면 다양하게 적용할 수 있다는 것을 알 수 있다. 오른쪽 하단에 있는 세팍타크로 공과 top 버튼이 적용된 예로 티스토리 블로그 기준이다.
첫째, 이미지를 준비하여 파일 업로드를 한다.
둘째, html 소스를 html/css 편집에서 코드를 넣는다.
셋째, 파일 업로드된 이미지 주소와 링크 주소 연결하고 위치 설정값을 조절하여 원하는 위치를 찾는다.
어떻게 하는 방법을 알면 아주 간단하다. 제일 먼저 <head> </head> 사이에 아래 코드를 넣는다.
<head>
<script>
function floating_close(divid) {
var strObj = document.getElementById(divid);
strObj.style.display = "none";
}
</script>
</head>
다음 순서는 <body> </body>에서 본문에 해당하는() "article" 아래에 코드를 넣는다.
<div class="fixed-top" >
<div id="fixed-top">
<table border="0" cellpadding="10" cellspacing="0" bgcolor="#000000">
<tr>
<td align="center" >
<a href="http://koreatakraw.com/" title="메인화면"><img src="./images/takrawball01.jpg" title="메인화면"></a>
</td>
</tr>
<tr>
<td align="center" ><a href="#" title="Go toTop"><img src="./images/top3.png" title="Go to Top"></a></td>
</tr>
</table>
</div></div>
마지막은 styl. css 편집에서 아래 코드를 넣으면 끝이다. 원하는 위치를 조정하면서 본문에 맞는 위치를 찾는다.
.fixed-top
{position:fixed;bottom:4px; top:auto;margin-left: 690px;}
* html .fixed-top
{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+50));}
티스토리 블로그를 운영하는데 추천, 구독, top버튼을 좌우에 설치하고 싶은 분에게 유용한 팁이 될 것이다. html 편집에서 더 응용한다면 다음 뷰 추천, 구독 버튼등 링크 소스를 넣기만 하면 쉽게 완성할 수 있다. 블로그 스킨을 수정하는 방법은 다양하게 알려져 있지만 자세히 보면 고수들의 소개하는 방법들을 찾아 볼 수 있다. 같은 원리를 구현하는 방법이지만 보다 쉽고 편리한 방법을 알기까지는 오랜 시간이 걸리는 것은 다른 일과 마찬가지인 것 같다.
[관련글]
▶ 티스토리 '카테고리 다른 글' 디자인 변경 완벽 해부
▶ 블로그 '지식'은 공유할 수 있으나 '경험'은 어렵다.
▶ 애드센스 수익 확인 어플, 실시간 스마트폰 볼 수 있다.
▶ 블로그 방문자수 늘리는 방법, 이미지 파일 이름 저장 할 때 꼭!
<div class="fixed-top" >
<div id="fixed-top">
<table border="0" cellpadding="10" cellspacing="0" bgcolor="#000000">
<tr>
<td align="center" >
<a href="http://koreatakraw.com/" title="메인화면"><img src="./images/takrawball01.jpg" title="메인화면"></a>
</td>
</tr>
<tr>
<td align="center" ><a href="#" title="Go toTop"><img src="./images/top3.png" title="Go to Top"></a></td>
</tr>
</table>
</div></div>
마지막은 styl. css 편집에서 아래 코드를 넣으면 끝이다. 원하는 위치를 조정하면서 본문에 맞는 위치를 찾는다.
.fixed-top
{position:fixed;bottom:4px; top:auto;margin-left: 690px;}
* html .fixed-top
{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+50));}
티스토리 블로그를 운영하는데 추천, 구독, top버튼을 좌우에 설치하고 싶은 분에게 유용한 팁이 될 것이다. html 편집에서 더 응용한다면 다음 뷰 추천, 구독 버튼등 링크 소스를 넣기만 하면 쉽게 완성할 수 있다. 블로그 스킨을 수정하는 방법은 다양하게 알려져 있지만 자세히 보면 고수들의 소개하는 방법들을 찾아 볼 수 있다. 같은 원리를 구현하는 방법이지만 보다 쉽고 편리한 방법을 알기까지는 오랜 시간이 걸리는 것은 다른 일과 마찬가지인 것 같다.
[관련글]
▶ 티스토리 '카테고리 다른 글' 디자인 변경 완벽 해부
▶ 블로그 '지식'은 공유할 수 있으나 '경험'은 어렵다.
▶ 애드센스 수익 확인 어플, 실시간 스마트폰 볼 수 있다.
▶ 블로그 방문자수 늘리는 방법, 이미지 파일 이름 저장 할 때 꼭!
댓글
로그인 유지가 안 돼서 댓글 쓰기가 안 된다면 [여기]를 클릭하여 작성하면 됩니다.
