2018. 7. 29. 19:42ㆍ블로그관련
카테고리 플로팅 하기
필자 블로그를 보면 현재 카테고리가 플로팅되어 계속 스크롤을 따라오는 것을 볼 수 있다.
CSS의 DIV 스타일을 하나 만들어 HTML의 카테고리 모듈에 적용했는데
방법은 다음과 같다.
스킨편집에 들어가 CSS를 누른 후 아래 코드를 제일 아래 추가해준다.
#fixed_layer
{
width:140px; '플로팅 박스 가로 크기, 카테고리 메뉴의 글씨가 길어질 경우 수정
font-size:11px; '플로팅 박스 글자의 크기
position:fixed;
z-index:999;
top:10px; '플로팅 박스를 상단에서 얼마만큼 띄울지
left:10px; '플로팅 박스를 좌측에서 얼마만큼 띄울지
background-color: #e6e6e6; '플로팅 박스의 배경 색
background-filter:alpha(opacity=50); opacity:0.8; '플로팅 박스의 투명도
border-radius: 10px;
}
이후 HTML로 들어가 <!-- 카테고리 모듈 --> 를 찾는다.
<div class="widget col-xs-12" id="fixed_layer">
</div>
class 뒤에 id="fixed_layer" 입력 후 저장
블로그를 새로고침하면 플로팅되어 카테고리가 스크롤은 좌측 상단에서 따라다니게 된다.
플로팅 박스의 배경이나 크기가 맞지 않는다면 fiexd_layer를 수정하여 다시 적용한다.
내용은 주석을 참고하여 수정
'블로그관련' 카테고리의 다른 글
| 애드센스 신청기 3. - 구글 애드센스 승인 (10) | 2018.08.07 |
|---|---|
| 네이버에 내 티스토리 노출시키기 (0) | 2018.08.05 |
| 애드센스 신청기 2. - 구글 애드센스 정책위반 (콘텐츠 불충분) (0) | 2018.08.04 |
| 구글에 내 티스토리 노출시키기 (0) | 2018.07.02 |
| 애드센스 신청기 1. - 구글 애드센스 가입 (0) | 2018.07.01 |