CSS part
#ribbon {
position:absolute;
left:100%;
top:0;
overflow:visible;
height:100px;
width:100px;
border:0;
float:none;
margin:0 0 0 -100px;
padding:0;
}


css에 위 코드를 추가하시고 리본을 설치하려는 페이지의 가장 상단 body부분에

HTML part
<div id="ribbon"><img src="http://www.5pix.com/img/bfriend_rib.gif" border="0" usemap="#rib" alt="B'Friend!!" /></div>
<map id="rib" name="rib"><area alt="BFriend" shape="poly" coords="0,0,100,100,100,76,24,0" href="http://www.bfriend.org/" target="bfriend" ></area></map>

위 html 코드를 삽입하시면 제 블로그의 리본처럼 표시되게 됩니다.

기존 자신이 사용하는 CSS 에 추가하지 않고 특정 페이지에 스타일을 삽입하시려면 시려면 CSS PART를 <style type="text/css"> 과 </style> 으로 묶어주시면 되겠죠.

리본 이미지를 다운받아 자신의 서버에 저장하셔서 쓰서도 됩니다.
(리본은 띠만 보이는, 배경이 투명한 이미지입니다)


위 소스는 기타 다른 목적으로 물론 사용하셔도 되구요.
변형하면 여러위치에 표시할수 있으며 재밌는 모양도 많이 만들수 있습니다.

요긴한 소스죠~!!

PS. 다양한 브라우저에서 테스트 하지 못했습니다. 기본적으로 익스플로러와 파이어폭스에서만 확인했구요. (집 컴퓨터에 2개 브라우저만 깔려서요;;) 작동 안되는 브라우저 있으면 말씀해주세요.

추가수정 ----------------------------

제 블로그에선 오른쪽 상단에 Style 변경 링크가 있는데 리본과 겹치는 일이 생기네요. 그래서 리본을 왼쪽 상단으로 변경하였습니다. 변경된 소스는 아래와 같습니다.

CSS part
#ribbon {
position:absolute;
right:100%;
top:0;
overflow:visible;
height:100px;
width:100px;
border:0;
float:none;
margin:0 -100px 0 0;
padding:0;
}

HTML 소스
<div id="ribbon"><img src="http://www.5pix.com/img/bfriend_rib1.gif" border="0" usemap="#rib" alt="B'Friend!!" /></div>

<map id="rib" name="rib"><area alt="BFriend" shape="poly" coords="0,74,0,100,100,0,74,0" href="http://www.bfriend.org/" target="bfriend" ></area></map>

이상! 오른쪽/ 왼쪽 상단 리본을 블로그에 마춰 넣을수 있습니다. ^^