현재 두가지 스킨을 배포중인데요. 스크롤하면 왼쪽에 따라다니는 뷰온 버튼이 있습니다. 얼마전에 다음 뷰온 버튼의 디자인이 변경돼서 이를 수정해줘야합니다. 두개의 스킨이 조금 다른데 우선 첫번째 스킨인 아래의 스킨을 수정해보겠습니다.
HTML/CSS 편집창에서 아래와 같은 코드를 찾습니다.
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://martian36.tistory.com/[ ##_article_rep_id_## ]" width="53" height="67" style="border:1px solid #ccc;margin-top:4px;">
<param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://martian36.tistory.com/[ ##_article_rep_id_## ]"></object>
위 코드를 다음과 같이 수정합니다.
<iframe width="76" height="90" src="http://api.v.daum.net/widget2?nurl=http://martian36.tistory.com/[ ##_article_rep_id_## ]" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
위 코드에서 http://martian36.tistory.com 부분은 자신의 블로그 URL을 입력하면 됩니다.
그런 다음 style.css 창에서 아래와 같은 코드를 찾습니다.
#floating-box {
display:none;
position: absolute;
left: -66px;
border: 1px solid #CCC;
border-right: 0px;
padding: 5px;
background: white;
box-shadow:-3px 3px 5px rgba(125,125,125,0.2);
}
#floating-box .arrow {
padding: 5px 0 5px 7px;
}
아래의 코드로 변경해줍니다.
#floating-box {
display:none;
position: absolute;
left: -87px;
border: 1px solid #CCC;
border-right: 0px;
padding: 5px;
background: white;
box-shadow:-3px 3px 5px rgba(125,125,125,0.2);
}
#floating-box .arrow {
padding: 5px 0 5px 12px;
}
수정한 데모 사이트 -->http://explorer36.tistory.com/
해당 글 --> http://martian36.tistory.com/952
위 스킨은 iframe 태그의 코드를 수정하는 것은 같지만 스타일시트에서 아래처럼 해줘야합니다.
#floating-box { position: absolute; left: -87px; border: 1px solid #CCC; border-right: 0px; padding: 5px; background: white; box-shadow:-1px 1px 3px rgba(125,125,125,0.2); z-index: 1000; } #floating-box .arrow { padding: 5px 0 5px 12px; } #viewon iframe { z-index:1 !important; }
수정한 데모 사이트 --> http://saaien.tistory.com/
수정한 스킨 파일은 해당 글에 올리겠습니다.
해당 글 --> http://martian36.tistory.com/1074
수정코드.txt아울러 두번째 스킨의 눈내리는 효과는 겨울에 만들어서 사용한 것인데 skin.html 화면의 하단에서 아래의 코드를 제거하면 됩니다.
<script src="./images/jsnow.js"></script>
<script type="text/javascript">
$(function() {
$().jSnow();
});
</script>
