내 블로그 이용자를 배려하자 - 텍큐버전

이번에는 강팀장님의 간단한 팁으로 내 블로그 이용자를 배려하는 기능을 보고 티스토리버전인거

같아서 텍큐버전으로 글을 올려보려고 합니다.

(물론 허락을 받았고 올려도 좋다는 댓글을 받았기에..^^;)

 

 

제 블로그에 오른쪽 상단이 보이시나요? ^^

위에 사진처럼 떠다니는 메뉴를 설정하실수 있습니다.

 

source.txt

 

먼저 위에 파일을 받아보시면 아래와 가치 HTML,JAVA가 나오게 됩니다.

글을 보고 아 정말 모르겠다 하시는분은 그냥 바로 올리셔도 되구 좀 아시는분은

자신이 원하는데로 변경해서 올리셔도 상관없습니다.

 

하지만 수정해야할부분이 있습니다.

 

<!--- 떠다니는 레이어 메뉴 시작 : 화면 노출 부분 ---->
<!--- 레이더 디자인을 마음대로 수정할 수 있습니다. -->
<!--- 하지만  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>

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

 

여기서 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;">   ==> 수정 필요 없습니다. ^^

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

 

그리고 위에 위에를 보시면 <a href="#top"> ,end등이 있는데 나중에 스킨편집으로 따로 수정해주셔야

합니다. 그 설명은 조금 뒤에..

 

자신의 블로그의 사이즈에 따라 달리는데가 다른데요 여기서 또 targetX,targetY 부분을 수정해주셔야

합니다. 저는 targetX:1140이 적당하더군요..

 

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

var floatingMenu =
{

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

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

- 중 략 -

 

여기까지  완료하셧다면 이제 본격적으로 스킨을 수정해주셔야 합니다.

 

TOP 부분

 

 

<a id="top"></a> 를 </head> 왼쪽에 복사해서 붙여 넣어주시면 됩니다.

 

댓글 부분

 

 

Ctrl+F를 눌러 commentList를 찾아주시고 그옆에 <a id="recomm"></a>를 붙여 넣어주시면 됩니다

 

추천 부분

 

추천버튼은 메타블로그의 추천버튼이 있는곳 위쪽에 <a id="ccl-icon-505-2"></a>를 붙여넣어주시면 됩니다. 저는 편의상 up으로 변경했습니다.(up으로 변경하실시 txt에 있는 ccl-icon-505-2 이걸 up으로 변경해주셔야 합니다.

 

구독 부분

 

 

위에 보이듯 RSS 구독하기를 오른쪽 클릭하셔서 "바로 가기 복사"를 하신후

<tr><td><a href="여기!!" target=_blank>* <b>구독하기</b></a></td></tr>

여기부분에 넣어주시면 됩니다. 혹은 http://자신블로그/rss 를 넣어주셔도 됩니다.

 

END 부분

 

 

<a id="end"></a>는 </body> 안쪽에만 넣어주시면 됩니다.

 

이렇게 스킨편집은 완료 되었습니다. 그다음 수정하신 source.txt 파일에 내용 모두를 복사하셔서

HTML 코드 위젯에 붙여넣기하시면 된답니다.

 

원본글은 http://www.ebizstory.com/506 여기 있으며 만약 모르는부분이 있으시다면

댓글로 질문해주세요 친절하게 설명해드리도록 하겠습니다.

 

제 설명이 많이 미숙할지도 모르겠네요