안녕하세요. 오늘은 간단한 HTML 및 CSS로 스크롤바에 움직임에 따라
화면에서 따라다니는 메뉴를 만들어 보겠습니다.
화면에서 따라다니는 광고를 만들 수 도 있고, 추천 모듈 또는 즐겨찾기 메뉴 등을 만들 수 있습니다.
자바스크립트를 사용해 부드럽게 스크롤되는 방법도 있지만,
html 및 CSS 편집 만으로 간단하게 화면에 고정시켜
스크롤 이동을 시켜도 보이는 방식으로 소개하겠습니다.
※구글애드센스는 플로팅 방식의 설치는 정책위반이므로 참고 바랍니다.
지금 제 개인블로그는 플로팅 메뉴 및 광고를 사용하고 있지 않습니다.
따라다니는 플로팅 메뉴는 예시는 아래와 같습니다.
우측의 광고부분이 스크롤을 내려도 가려지지 않고 같이 화면 아래로 내려오게 됩니다.
스크롤바에 붙어서 따라다니는 것 처럼 보이지만,
화면에 고정되어 있는 상태이므로 화면 변환에 반응 하지 않습니다.
자 이제 플로팅 광고 만들기 따라해봅시다.
skin.html 안 </body> 윗 부분에 아래 코드를 적어줍니다.
<div class="floating">
광고코드붙혀넣는곳
</div>:
style.css 안 아무곳에 아래 코드를 붙혀 넣어줍니다. 젤 아래쪽이 괜찮겠죠?
.floating {
position: fixed;
right: 50%;
top: 180px;
margin-right: -720px;
text-align:center;
width: 120px;
}
그럼 끝입니다. CSS에서 수치를 조정하면
광고의 위치조절이 가능합니다.
이번엔 플로팅 추천 및 공유 메뉴 만들기 따라해봅시다.
이번에도 마찬가지로 skin.html안 </body> 윗 부분에 적어줍니다.
<div class="floating">
<div> 다음뷰 추천위젯코드 삽입</div>
<div>트위터 공유코드 삽입</div>
<div> 페이스북 공유코드 삽입</div>
</div>
다음 뷰의 경우는 2014년 6월30일부 로 서비스 종료가 됩니다.
새로운 공감 이라는 서비스로 돌아온다고 하니 추가되면 다시 수정하겠습니다.
트위터 공유코드도 화면에 보이는 것 처럼 상단에 숫자 카운팅 코드는
공식적으로 지원하지 않습니다.
https://about.twitter.com/ko/resources/buttons
여기서 트위터 새로운 코드로 버튼 생성이 가능합니다.
위에 보이는 옛버전(카운팅박스가 윗쪽에 위치) 코드는 다음과 같습니다.
트위터 공유 버튼 위젯(구버전)소스코드.rtf페이스북 공유코드는 아래 주소에서 생성가능합니다.
https://developers.facebook.com/docs/plugins/like-button
위 공유추천 외에도 구글+ 및 다양한 소셜SNS 공유버튼을 설치 가능합니다.
그 뒤 style.css 안에 아래 코드를 삽입해줍니다. 마찬가지로 젤 아랫부분이 좋겠죠?
.floating {
background-color:#f9f9f9;
border:2px solid #000;
position: fixed;
right: 50%;
top: 180px;
margin-right: -615px;
text-align:center;
width:70px;
border-radius: 8px;
-webkit-border-radius: 8px;
}
.floating div:nth-child(1){
border:2px solid #ff3535;
border-radius: 8px;
}
.floating div:nth-child(2){
border:2px solid #ff3535;
border-radius: 8px;
}
.floating div:nth-child(3){
border:2px solid #ff3535;
border-radius: 8px;
}
위 코드의 완성된 모습입니다. 정상적으로 배치 되었다면 해당 박스가 나타 나야합니다.
메뉴박스 색상을 #f9f9f9; 에서 투명으로 하고싶으면 #transparent;를 적어주면 됩니다.
border-radius: 코드는 박스 테두리를 둥글게 만들어 주는 코드입니다.
자세한 강의는 아래 링크를 참조하세요.
http://cocosoft.kr/147 - [CSS3]border-radius:테두리 및 모서리 둥글게 표현
자 그럼 다들 플로팅 메뉴를 잘 활용해서 좀더 편리하고
효율성있는 블로그를 만들길 바랍니다. 문의사항은 댓글 남겨주세요.^^
