플로팅 배너(또는 플로팅 레이어)는 많은 블로그에서 쉽게 찾아볼 수 있습니다. 본 블로그에도 우측과 상단에 플로팅 레이어가 위치해 있습니다. 이 내용을 지난번 '떠다니는 다음 뷰 / RSS구독버튼 달기(플로팅 배너)'라는 포스트를 통해 다뤄드린바 있습니다. 그러나 설명이 장황한면이 없잖아 있고, 특정 스킨에서는 정상적으로 작동하지 않는 등의 문제점이 있던 바, 보다 일반화 하고 간단하게 다시 포스팅하고자 합니다.
두 번째 포스팅이기 때문에 자세한 설명을 추가하지는 않고 방법적인 측면에 중점을 두겠습니다. 보다 자세한 설명을 필요로 하실 경우 지난번 포스트를 확인해주시길 바랍니다. 이번 포스트는 다음의 순서대로 작성되어 있습니다.
1. 블로그 레이아웃(화면)이 좌측정렬일 때
2. 블로그 레이아웃(화면)이 중앙정렬일 때
(1) 플로팅 레이어를 우측에 위치하려고 할 때
(2) 플로팅 레이어를 좌측에 위치하려고 할 때
3. 플로팅 레이어 내부에 삽입하고자 하는 내용들의 예
4. 레이아웃이 중앙정렬이고 플로팅 레이어를 우측에 위치하고자 하는 경우의 예
자신의 블로그의 속성, 위치하고자 하는 레이어의 위치를 파악하신 후 1번과 2번의 내용 중 자신에게 알맞은 부분을 선택하셔서 글을 삽입하시고, 3번에서 제시되어 있는 예를 참고하여 레이어 내부에 내용을 삽입해주시면 됩니다. 그 후 삽입되어져 있는 내용을 4번에 제시되어 있는 내용과 비교해보시면 됩니다. 띄워져 있는 플로팅 레이어의 배경이나 테두리 등을 꾸미는 세부적인 방법들은 추후에 다시 포스팅하도록 하겠습니다.
덧붙여서, 이번 포스트는 어디까지나 플로팅 레이어를 띄우는 법에 관련한 글입니다. 레이어 내부에 들어가게 될 내용물에 대해서 간략하게나마 예시를 드리지만 완벽하지 못합니다. 조만간 어느 블로그에서라도 소스를 복사하여 바로 사용할 수 있는정도의 모양이 만들어지면 그때 소스를 공개하고 다는 법에 대해서 자세히 다루도록 하겠습니다.
블로그에 플로팅 배너(플로팅 레이어) 달기source.txt
블로그 레이아웃이 좌측정렬일 때
이 경우에는 블로그 이용자의 해상도가 변한다 하더라도 블로그의 위치는 변하지 않습니다. 때문에 특정 위치에 레이어를 고정시켜놓으면 됩니다.
사이드바 > 태그 입력기
<div id="float_layer">
원하는 내용
</div>
HTML/CSS편집 > Style.css
#float_layer{
position : fixed; absolute;
text-align: center;
left: 브라우저의 좌측에서 이격하고자 하는 거리px;
top: 브라우저의 상단에서 이격하고자 하는 거리px;
margin: 0px;
padding: 0px;
}
블로그 레이아웃이 중앙정렬일 때
이 경우에는 블로그 이용자의 해상도에 따라 블로그 위치가 변하게 됩니다. 유동적이기 때문에 레이어 역시 유동적으로 움직여야 할 필요가 있습니다. 블로그 접속자의 해상도값을 2로 나눠 절대값으로 배치하는 방법등이 있을 수 있으나 모든 브라우저에서 사용될수 없다는 한계가 있는 관계로 다음의 방법을 사용해주시면 됩니다.
1. 우측에 위치하고자 할 때
사이드바 > 태그 입력기
<div id="cont">
<div id="float_layer">
원하는 내용
</div>
</div>
HTML/CSS편집 > Style.css
#cont{
position : fixed;
left: 50%;
height: 0px;
}
#float_layer{
top: 브라우저의 상단에서 이격하고자 하는 거리px;
margin-left: 블로그 레이아웃의 중앙으로부터 좌측으로 이격하고자 하는 거리px;
text-align: center;
}
2. 좌측에 위치하고자 할 때
사이드바 > 태그 입력기
<div id="cont">
<div id="float_layer">
원하는 내용
</div>
</div>
HTML/CSS편집 > Style.css
#cont{
position : fixed;
right: 50%;
height: 0px;
}
#float_layer{
top: 브라우저의 상단에서 이격하고자 하는 거리px;
margin-right: 블로그 레이아웃의 중앙으로부터 우측으로 이격하고자 하는 거리px;
text-align: center;
}
플로팅 레이어 내부에 삽입하고자 하는 내용들의 예
아래의 제시되어 있는 예들을 참고하여 레이어 내부의 내용물을 채워넣으실 수 있습니다. 이미지 같은 경우는 직접 구하셔서 업로드 해주시길 바랍니다. 이 부분은 블로그에 이용할 수 있는 아이콘이라는 주제로 추후에 포스팅 하겠습니다. 현재 이 블로그에서 사용중인 아이콘들의 경우에는 지난번 포스트에 올라와 있으니 참고해주세요.
※ 다음 뷰온 버튼을 삽입하고자 하실때에는 이용중인 블로그의 스킨에 따라 다소 차이가 있을 수 있으나 플로팅 레이어의 소스를 사이드바가 아닌 'HTML/CSS편집 > skin.html'에서 article_rep_desc를 찾으신 후 위에 넣어주시는 편이 정상적으로 출력될 수 있습니다.
※ article_rep_id 양옆에 있는 빈칸은 없애주셔야 합니다,
※ blogurl에는 블로그 주소를, imgurl에는 이미지 주소를 넣어주세요.
다음 뷰온 손가락 버튼
<embed src='http://api.v.daum.net/static/recombox3.swf?nurl=[BLOGURL]/[ ##_article_rep_id_## ]' quality="high" bgcolor="#ffffff" type="application/x-shockwave-flash" width="67" height="82"></embed>
다음 뷰온 작은 버튼
<embed src='http://api.v.daum.net/static/recombox3.swf?nurl=[BLOGURL]/[ ##_article_rep_id_## ]' quality="high" bgcolor="#ffffff" type="application/x-shockwave-flash" width="82" height="21"></embed>
다음 뷰 구독 버튼
<a href='http://v.daum.net/user/plus?blogurl=[BLOGURL]' target='_blank'><img src='[IMGURL]'></a>
한 RSS 구독 버튼
<a href="http://www.hanrss.com/add_sub.qst?url=[BLOGURL]" title="한RSS에 추가" target='_blank'><img src="[IMGURL]"></a>
네이버 이웃커넥트 버튼
<a href=http://section.blog.naver.com/connect/PopConnectBuddyAddForm.nhn?blogId=[사용자코드] target="_blank"><img src="[IMGURL]" alt="이웃추가"></a>
(※ 사용자코드를 받기 위해서는, 이웃커넥트 관리화면 > 위젯 관리 > 위젯 관리 하단의 '심플 위젯 코드 복사'를 선택하신 후 blogId뒤로 오는 곳을 복사하여 넣으시면 됩니다.)
레이아웃이 중앙정렬, 레이어는 우측에 위치하고자 하는 경우의 예
사이드바
<div id="cont">
<div id="float_layer">
<a href='http://v.daum.net/user/plus?blogurl=http://kakku.tistory.com' target='_new'><img src='http://cfs.tistory.com/custom/blog/22/221632/skin/images/8221view.png?=17435392970.9058901472213519'></a> <br>
<a href="http://www.hanrss.com/add_sub.qst?url=http://kakku.tistory.com" title="한RSS에 추가" target='_new'><img src="http://cfs.tistory.com/custom/blog/22/221632/skin/images/8221hanrss.png?=13474004030.35185323944106245"></a> <br>
</div>
</div>
style.css -
#cont{
position : fixed;
left: 50%;
height: 0px;
}
#float_layer{
top: 50px;
margin-left: 500px;
text-align: center;
}
다음번 포스트에서는 레이어를 꾸미는 법에 대해서 알아보겠습니다.
'Blog Tip > Design' 카테고리의 다른 글
| 최근 글과 댓글을 스크롤링 형태로 출력시키기 (8) | 2013.02.19 |
|---|---|
| 배경과 테두리, 그림자로 레이어 꾸미기 (6) | 2013.02.12 |
| 트위터 리트윗(Retweet) 버튼 달기 (4) | 2013.01.29 |
| 페이스북 좋아요(Like) 버튼 달기 (4) | 2013.01.28 |
| 떠다니는 다음 뷰 / RSS구독버튼 달기(플로팅 배너) (5) | 2013.01.23 |
댓글