간단한 Tip으로 내 블로그 이용자 배려하는 기능

부제 : 간단한 Tip(팁)으로 블로그 이용자에게 편리함 주기~!

Extremely Loud and Incredibly Close by matt.hintsa 

제가 글 재주가 없어서 항상 블로그 포스팅을 하면 길이 항상 길게 늘어지게 됩니다. 그런데도 고맙게 많은 이웃분들은 아무런 불평도 안하고 저의 길고 긴.... 마우스를 스크롤 노력만큼 도움도 안되는 글을 항상 끝까지 읽어주시고.... 

까마득하게 밑에 있는 댓글쓰기까지 움직여 댓글을 달아주시더군요. 그런 분들에게 얼마나 고맙던지.... ㅜ.ㅠ 

함께 해주는 분들에게 항상 고마움이 있기에 무식쟁이가 인터넷 뒤져서 간단한 기능 2가지 기능을 추가하였습니다. 
1. 떠다니는 레이어 메뉴 달기.
2. 댓글 위치 옮기기.

그중에 가장 많이 궁금해 하시는 떠다니는 레이어 메뉴 달기에 대해서 설명을 드리겠습니다.

본 내용은 저 같이 html, javascript 등을 잘 모르는 초보님들을 기준으로 작성되었습니다. ^^ 천천히 보시면 이해를 할 수 있지 않을까..... 헉..ㅡ.ㅡ;; 그래도 어려운가??? 모르겠습니다 .^^

프로그램에 놓은지 오래되어 스크립트를 짠다는 것은 저에게 너무나 큰 고통입니다.ㅡ.ㅡ;;. 그래서... 이곳 저곳 돌아다니며 소스를 구해서 저 한테 맞게 약간의 수정을 했습니다.
(그런데..ㅡ.ㅡ;; 어디서 소스를 구했는지... 도통.... ㅡ.ㅜ 혹시 원 제작자가 어이~ 강팀장 너 뭐야?!! 그러신다면... 쩝.... 제가 잘하는 배째십시오~~~~ ^0^  간단한 소스를 함께 나눌 수 있다면 얼마나 좋습니까아~~ ^0^  홍홍홍~~ 그래도 혹시나 원 제작께서 이 포스팅을 보신다면 댓글이라도 남겨 주십시오... 포스팅을 수정하도록 하겠습니다. ^0^)

먼저 뭘 말하는데? 하시는 분들을 위해... 화면을 잠시 보겠습니다. 떠다니는 레이어 메뉴 입니다. ^^

파란색 영역에 있는 메뉴를 말합니다. ^^.

일단.. 굉장히 간단하다는 말씀부터 드리겠습니다. 그리고 본 설명은 제가 티스토리를 운영하니... 티스토리 기준으로 말씀 드리겠습니다. ^0^.  (하지만..... 다른 블로그에서 스킨이나, html 소스를 손댈 수 있는 기능이 있다면? 이용하셔도 됩니다. ^^)

그럼 먼저 소스를 부터 올립니다. html, javascript을 아시는 분이시라면 입맛에 맞춰 수정해서 사용하시면 되고... 에이 복잡해서 뭔지 모르겠어 하시는 분은... 소스를 내용을 그대로 복사해서 올리셔도 됩니다. 물론 내용은 살짝 수정해야 합니다. 수정하는 부분은 소스안에 표시해 두었습니다. ^^

source.txt

소스를 다운 받으셨다면 내용을 잠시 보시겠습니다~ 

위 소스파일을 열면 <div id="floatdiv"....> 로 시작해서 </div>로 끝나는 영역과 <script type=....> 에서 </script>로 끝나는 영역으로 구분됩니다.

<div...> 로 감싸진 영역은 블로그에 실제로 메뉴가 노출되는 모양이 정의되어 있는 것이고, <script...>영역은 메뉴가 떠다니도록 하는 자바스크립트 영역입니다.  

화면에 메뉴를 꾸밀려면 <div...> 영역을 수정하면 되고, 움직임을 수정할려면 <script...> 영역을 수정하면 됩니다. 그런데... <script...> 영역을 잘못 수정하면 작동이 안되는 경우가 생기니...... 자바스크립트를 잘 이해하시는 분이 아니라면 패스~ 저도 수정 안하고 그대로 사용하고 있습니다. ^^

그럼 영역별 내용을 보겠습니다. 먼저 <div...> 영역입니다.

<!--- 떠다니는 레이어 메뉴 시작 : 화면 노출 부분 ---->
<!--- 레이더 디자인을 마음대로 수정할 수 있습니다. -->
<!--- 하지만  id="floatdiv" 만 수정하지 마세요~ ^^ -->

<div id="floatdiv" style="background-color:#ffffff; padding:0px; border-width:1px; border-color:#0049ce; border-style:solid; width:100px; height:120px; position:absolute; left:0px; top:0px; z-index:1;">   

<!--- 입맛에 맞게 수정하세요~~ --->
<table border=0 align=center>
<tr><td><a href="#top">* 제일위로</a></td></tr>
<tr><td><a href="#ccl-icon-505-2">* 추천하기</a></td></tr>
<tr><td><a href="#recomm">* <b>댓글달기</b></a></td></tr>
<tr><td><a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fwww.ebizstory.com%2Frss" target=_blank>* <b>구독하기</b></a></td></tr>
<tr><td><a href="#end">* 제일아래로</a></td></tr>
</table>

<!--- 입맛에 맞게 수정하세요~~ --->

</div> 

<!--- 떠다니는 레이어 메뉴 끝 : 화면 노출 부분 ---->

위 내용에서 주의 하셔야 할 곳은 <div id="floatdiv" 부분입니다. 여기가 잘못 수정되면 레이어가 안 움직일 수 있습니다. 주의해 주시고... 혹시나 floatdiv 명칭이 마음에 안드면... <script...>영역에 있는 것들도 모두 수정해 주어야 합니다. (넘 번거로우니 그대로 두시고 사용하셔도 무방합니다. ^^)

<div id="floatdiv" 뒷부분에 있는 영역은 떠다니는 메뉴의 틀 디자인을 수정합니다. ^^

<div id="floatdiv" 
style="background-color:#ffffff; ==> 메뉴 배경 색상입니다. #ffffff 이렇게 해 놓으면 흰색입니다. 
padding:0px;   ==> 여백을 조절하는 부분입니다. 수정할 필요는 거의 없을듯 하기도 한데...
border-width:1px;  ==> 메뉴 테두리 선의 두께 입니다. 숫자를 올리면 올릴 수록 두꺼워집니다.
border-color:#0049ce; ==> 선 색상 입니다. 선색상도 #0049ce 부분을 수정하시면 됩니다.
border-style:solid; ==> 선 모양입니다.  
width:100px;  ==> 메뉴 배경의 가로 크기입니다. 메뉴 길이거 커지거나 수정할 경우 적당하게 수정하시면 됩니다.
height:120px; ==> 메뉴 배경의 세로 크기입니다. 

position:absolute; left:0px; top:0px; z-index:1;">   ==> 수정 필요 없습니다. ^^ 

수정할때 제일 끝에 ; 표시 안 지워지도록 주의해 주십시오. ^^

<div..> 부분이 수정이 되었다면 <div> 안 쪽 영역입니다. 

이 영역에 메뉴가 들어가게 됩니다. 설명하기가 조금 어려워서 이미지로 설명을 드리겠습니다. ^^;;

각 줄친 부분이 메뉴의 한줄씩을 뜻합니다. html을 아시는 분들은 저 같이 텍스트가 아닌 이미지등으로 하셔도 됩니다.

그럼 주의 할 부분입니다.

<tr><td><a href="#top">* 제일위로 </a></td></tr> 

a href 영역에 #top 부분을 주의 하셔야 합니다.  #top가 아니라 다른 것을 적으셔도 되지만, 반드시 기억하고 있어야 한다는 것입니다. 그리고 주소 전체를 넣는 것이 아니라. 위치 정보만 넣는데 #이름  형태로 넣으셔야 합니다.

외부로 링크를 걸거나 다른 기능을 넣고 싶다면... <a href="http://주소"> 를 넣으셔도 됩니다. 

제 블로그에는 제일위, 추천하기, 댓글달기, 제일아래로 본문 이동과 RSS 등록 주소를 각각 넣어 두었습니다. 적절하게 응용하셔서 추가하셔도 되고.. 빼셔도 됩니다. 더 추가하거나, 빼면 메뉴 크기를 조절하기 위해 <div...> 안에 width, height 부분을 수정하시면 됩니다. 

이제 <script....> 영역입니다. 솔직히 <script...>영역의 내용을 모두 이해하긴 어렵습니다. (전문적으로 하시는 분들이야....  하늘날며 MB 욕하기 처럼 쉽겠지만... 저 같은 사람들이야...ㅡ.ㅜ 그래서 중요한 부분만 설명하겠습니다. )

<!--- 자바스크립트 부분입니다.  그대로 붙여 넣으시면 됩니다. ---->
<!--- 수정하는 부분은 위치 숫자만 손대면 됩니다. ----->
<script type="text/javascript">
<!--
var floatingMenuId = 'floatdiv';

var floatingMenu =
{

    targetX: 926,     // 레이어 가로 위치를 설정합니다. 0 을 넣으면 제일 왼쪽에 붙습니다.         
    targetY: 66, // 레이어 세로 위치를 설정합니다. 0을 넣으면 제일 상단에 붙습니다.

    hasInner: typeof(window.innerWidth) == 'number'
    hasElement: document.documentElement...............

- 중 략 -

위에 진한 부분의 숫자만 수정하시면 됩니다. 숫자는 메뉴가 화면에서 위치할 곳을 표시한 곳입니다. 제 블로그는 926, 66으로 설정하니깐.. 오른쪽에 적당한 곳에 위치하게 되는 것 같더군요.

저곳을 절적하게 수정하면....  메뉴위치를 마음대로 바꿀 수 있습니다.

이제 위의 소스 내용을 다 설명 드렸습니다. 이만큼 해 놓았다고.... 작동되는 것은 아니구요. ^^  위 <div>영역 설명드릴때 <a href=#top> 의 #top을 기억하시라 말씀 드린 부분에 대해서 설정할 차례 입니다. ^^

메뉴를 클릭했을때 화면에서 실제로 이동하는 곳을 설정하는 것입니다.

먼저.. 스킨 설정 영역으로 갑니다. 

html 부분에 #top 지정해 놓은 것을 설정해야 합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><a id="top"></a> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="alternate" type="application/rss+xml" title="강학주의 e-Biz Story" href="https://ebizstory.tistory.com/rss" /> <link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> <link rel="shortcut icon" href="https://ebizstory.tistory.com/favicon.ico" /> <title>강학주의 e-Biz Story :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능</title> </head> <body> <div class='db-left' style='margin:0; position:absolute; left:0; top:0;' align='left'> <a href="http://detailbox.tistory.com/517" target="_blank"><img src="https://t1.daumcdn.net/cfile/tistory/13557E0C4A193FFFC8" alt="사랑합니다. 편안히 잠드소서" border="0"/></a> </div> ......................

- 중 략 -  

<a id="top"></a> 부분이 입니다. top은 제일 위로 이동하는 것이라... 제일 윗 부분에 넣어 둔것입니다. <html>다음 어디든지 상관은 없습니다.

주의 할 것은 <a href="#top"> 이였다면... <a id="top"></a> 으로 넣어야 한다는 것입니다. <a id=..></a> 사이에 아무것도 없다는 것도 보시면 되겠구요. ^^ (넣어도 상관은 없습니다.)

그럼 응용해서.... 댓글 달기 메뉴를 클릭했을때 이동할 곳을 설정하는 것을 볼까요?

- 중 략 - 

  </s_tb_rep>

</ol> </div> </div> </s_tb> <!-- 댓글 --> <s_rp> <div class="comment"><a id="recomm"> </a> <!-- 댓글 타이틀 --> <h3>댓글을 달아주세요:: <span class="address">네티켓은 기본, 스팸은 사절</span></h3> <!-- 댓글 쓰기 양식 --> <div class="write"> <s_rp_member> <s_rp_guest> <p> <input type="text" id="name_506" name="" value="" /> <label for="name_506"> : 이름 (name) </label> - 중 략 -

메뉴에서 <a href="#recomm">* <b>댓글달기</b></a> 으로 되어 있습니다. 그래서... 댓글이 있는 영역 바로 위에 <a id="recomm"> </a> 를 넣었습니다.

그럼 이제 다른 영역도 설정하실 수 있겠죠? ^^

마지막으로 다운받은 소스를 넣는 방법입니다. 

소스는 2가지 방법이 있습니다. 위에 html 스킨을 수정할때 그곳에 넣는 방법과 사이드바에서 넣는 방법입니다. 어떤 방법을 사용하던 편리한 방법을 사용하시면 되는데... 

전, html 스킨 제일 하단에 넣었습니다. 

html 스킨에 넣을때는 <body>....</body> 사이 아무곳에 넣어도 되는데.... 전 하단에 넣으니깐 관리하기 쉽더군요.

사이드바에 넣을실때는 태그입력기 기능을 더 추가하셔서.... 소스를 넣으시면 됩니다.

이제 설정을 다했습니다. 블로그에 제대로 붙었는지 확인만 하시면 됩니다. ^^

저 같이 포스팅이 길거나, 댓글 달기 쉽게 이동할 수 있도록 블로그를 방문하는 이용자에게 편의를 주고 싶다면 굉장히 좋은 tip 입니다.

블로그는 이제 방문자들이 쉽게 이용할 수 있도록 화면을 구성하고, 기능을 추가하는 것도 상대방을 존중하고, 배려하는 마음이 아닐까 생각합니다.  블로그가 소통의 도구인 만큼 함께 하는 도구라고 믿기 때문에...

덧붙임말 : 

방명록에 떠다니는 메뉴에 대해서 질문을 해 주신... 해피쿠스님, TongCast님 제가 포스팅을 올려 드린다고 한뒤 늦게 포스팅을 올린 것이 아닌지 모르겠습니다. ^^

사회적 이슈가 계속 나오고.. 업무도... 계속..ㅡ.ㅜ 흑흑 너그러이 이해 바랍니다. ^^

덧붙임말 2009.06.10 :

위 팁에 대한 문제점 해결 Tip 에 대해서 포스팅을 추가하였습니다. ^^

2009/06/10 - [Blog 이야기(*추천방)] - 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2

위 기능을 조금 더 강화 했으니.. 참조하시면 도움이 될 것 같습니다. ^^