스킨공방 - Dock 스타일 통합 링크 버튼 만들어봤습니다.

« 2012/05 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

2009/11/03 12:49

티스토리로 이전 준비중에 이전에 구글링하다 발견한 jquery Dock 이 생각나서 한번 설치해봤습니다.
아이콘은 [ Karang ]님 블로그에서 배포 하셔서 사용하였구요. 직접 만들면 더 좋겟지만.. 포토샵이 없는 관계로 일단은 부랴부랴 대충 해봤습니다.

!impotant 이 글은 티스토리 에만 적용됩니다. 타 블로그 서비스를 사용하시는분은 그에 맞게 편집 하셔야 사용가능합니다.

그럼 함 같이 해보실까요?
참고로 저는 java 는 1미리 만큼의 지식도 없고 HTML 이나 CSS 역시 초급 수준 밖에는 활용할줄 모릅니다.
그러니 미리 겁먹지 마시고 차근히 따라해 보시면 여러분 블로그에도 이쁜~ Dock 스타일 통합버튼바를 설치하실수 있을거에요.

일단 준비물은 첨부한 압축 파일을 다운로드 하신후,
압축파일을 해제하시고 모든 파일을 [스킨]->[HTML/CSS편집]->[파일업로드] 로 가신후 업로드 해주세요.

여기까지 문제없이 오셨다면 준비는 모두 마치셨습니다. ^^

다음으로 [스킨]->[HTML/CSS편집] 화면으로 이동 하신후에

아래 코드를 HTML편집 탭에서 <head></head> 태그 사이에 붙여넣기 해주세요.

그 다음은 <body>태그 바로 아래에 붙여 넣어주세요.

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="./images/twitter.png" alt="home" /><span>트위터</span></a>
<a class="dock-item" href="#"><img src="./images/i-han.png" alt="contact" /><span>한rss</span></a>
<a class="dock-item" href="#"><img src="./images/i-mixsh.png" alt="portfolio" /><span>믹시</span></a>
<a class="dock-item" href="#"><img src="./images/i-google.png" alt="music" /><span>구글</span></a>
<a class="dock-item" href="#"><img src="./images/i-allbl.png" alt="video" /><span>올블로그</span></a>
<a class="dock-item" href="#"><img src="./images/i-blko.png" alt="history" /><span>블로그코리아</span></a>
<a class="dock-item" href="#"><img src="./images/i-daum.png" alt="calendar" /><span>블로그뉴스</span></a>
<a class="dock-item" href="#"><img src="./images/me2_logo.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
<script type="text/javascript">

    $(document).ready(
        function()
        {
            $('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
        }
    );

</script>

마지막으로, CSS편집 탭으로 이동하신후에 아래 를 제일 하단부에 붙여넣어주세요.

/* dock - top */
.dock {
    position: relative;
    height: 50px;
    text-align: center;
}
.dock-container {
    position: absolute;
    height: 50px;
    background: url(./images/dock-bg2.gif);
    padding-left: 20px;
}
a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}
.dock-item span {
    display: none;
    padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
    width: 100%;
    bottom: 0px;
    position: absolute;
    left: 0px;
}
.dock-container2 {
    position: absolute;
    height: 50px;
    background: url(./images/dock-bg.gif);
    padding-left: 20px;
}
a.dock-item2 {
    display: block;
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px;
    color: #000;
    bottom: 0px;
    position: absolute;
    text-align: center;
    text-decoration: none;
}
.dock-item2 span {
    display: none;
    padding-left: 20px;
}
.dock-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}

자 이제 다 됐습니다. 적용하기 버튼을 누르시면 완료!

아참참 중요한걸 빼먹을뻔 하였군요.. ㅎㅎ
위 <body>태그 사이에 들어가는 태그중 a href="#" 부분의 # 을 지우시고 각 해당하는 주소를 링크 걸어주셔야
정상 작동합니다. 안하시면 버튼을 눌러도 무반응 액세서리 일뿐이죠 ㅎㅎ
또 각각의 링크 뒷부분을 보시면 한글로 써잇는 부분도 사용하고 싶은 문구로 바꾸셔도 됩니다^^

휴~ 이제 완성입니다. 주절주절 써내려간듯한 느낌의 허접한 포스트인데 끝까지 읽어주셔서 감사하고요.
기타 궁금하신 사항은 댓글로 문의 주시면 아는 한도내 에서 친절히 답하여 드릴게요.
그럼 모두 이쁜 블로그 꾸며보세요^^