티스토리 툴바


미주한인주부들의 모임이 이번에는 미국산 쇠고기 수입협상을 반대하는 동영상을 공개했다.

미주한인주부들의 모임은 14일 세계 최대의 동영상 커뮤니티 ‘유투브’에 ‘Ribbons against Mad Cow(미친 소를 반대하는 리본들)’이라는 동영상을 올렸다.

3분22초 분량의 이 동영상에는 아리랑이 배경음악으로 흐르며, 고국에서 벌어지는 미국산 쇠고기 전면수입 반대운동에 뜻을 같이 하고자 진행 중인 ‘리본달기 운동’의 모습이 담겨있다.

이들은 지난 8일부터 미국산쇠고기 수입 재협상을 요구하며 자동차 번호판과 대문, 옷, 가방, 우편함 등에 리본을 달아 협상의 부당성을 알리고 있다. 리본은 흰색과 빨간색으로 함께 엮여있다. 흰색은 쇠고기 협상 백지화와 불공정거래의 부당성, 자연을 거스르는 행위(육골분사료)의 부당성을 뜻하며 빨간색은 쇠고기의 색과 광우병의 위험, 결사반대 등을 의미한다. ... ...

2008년 5월 14일 시청앞 서울광장에서 있었던 촛불문화제 에서, 미국에서 오셨다는 분이 이 미국에서 리본달기 운동을 소개해주시면서, 한국의 여러분도 리본달기운동에 동참해달라고 호소하셨습니다.
문득 블로그에도 리본을 다는것은 어떨까? 하는 생각이 들었습니다.
리본리본리본리본
적당히.. 이런느낌으로 리본이 완성됐습니다.

배너사용법

이 배너를 사용하는 방법은 다음과 같습니다.
티스토리 블로그의 경우 html 편집 모드로 들어가셔서 skin.html 의 </body>의 바로 앞에 다음의 내용을 추가합니다.(ctrl-f로 찾으면 검색하면 편리합니다.)

<div id="AntiMadCowRibbon">
<a class="png" href="http://kongbaguni.tistory.com/entry/AntiMadcowRibbon">미친소 수입반대</a>
</div>

그런다음. </head> 의 바로앞에 다음 4가지 베너중 맘에드는 하나를 골라서 추가합니다.

오른쪽상단베너 1차 디자인

검정색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/514308) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/514310) top right no-repeat;
}
</style>
파란색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/514312) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/514314) top right no-repeat;
}
</style>
초록색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/514322) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/514324) top right no-repeat;
}
</style>
빨간색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/514318) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/514320) top right no-repeat;
}
</style>

오른쪽상단베너 2차 디자인

검정색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516302) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516230) top right no-repeat;
}
</style>
파란색
사용자 삽입 이미지<style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516304) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516232) top right no-repeat;
}
</style>
초록색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516308) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516234) top right no-repeat;
}
</style>
분홍색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516310) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516236) top right no-repeat;
}
</style>
빨간색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
right:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516312) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516238) top right no-repeat;
}
</style>

왼쪽상단베너 1차 디자인

검정색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517462) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517464) top right no-repeat;
}
</style>
파란색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517466) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517468) top right no-repeat;
}
</style>
초록색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517470) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517472) top right no-repeat;
}
</style>
빨간색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517474) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517476) top right no-repeat;
}
</style>

왼쪽상단베너 2차 디자인

검정색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517490) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517478) top right no-repeat;
}
</style>
파란색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517492) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517480) top right no-repeat;
}
</style>
초록색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517494) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517482) top right no-repeat;
}
</style>
분홍색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517496) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517486) top right no-repeat;
}
</style>
빨간색
사용자 삽입 이미지 <style media="screen" type="text/css">
#AntiMadCowRibbon a{
position:absolute;
z-index:100000;
top:0;
left:0;
height:150px;
width:150px;
text-indent:-10000em;
overflow:hidden;
opacity:.95;
filter:alpha(opacity=95);
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517460) top right no-repeat;
}
#AntiMadCowRibbon > a {
background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/517488) top right no-repeat;
}
</style>

상단배너 고정하기(ie7이상,파이어폭스,사파리,오페라지원)

</head> 앞에 붙여넣기를 한 스타일시트의 다음부분에 position:fixed; 를 추가하면 배너가 고정됩니다. ie6이하는 지원하지 않습니다.

#AntiMadCowRibbon > a {
position:fixed;
background:url(그림주소) top right no-repeat;
}
</style>

본문삽입용 베너

아래는 게시글에 직접 삽입할수 있는 베너입니다. 스킨의 HTML 편집이 불가능한 서비스형 블로그에서는 아래 베너를 사용하시면 되겠습니다.

미친소 수입반대! <a style="background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516180); display:block; overflow:hidden; width:200px; height:50px; text-indent:-1000em;" href="http://kongbaguni.com/entry/AntiMadcowRibbon">미친소 수입반대!</a> 미친소 수입반대!<a style="background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516182); display:block; overflow:hidden; width:400px; height:100px; text-indent:-1000em;" href="http://kongbaguni.com/entry/AntiMadcowRibbon">미친소 수입반대!</a>
미친소 수입반대!<a style="background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516184); display:block; overflow:hidden; width:240px; height:200px; text-indent:-1000em;" href="http://kongbaguni.com/entry/AntiMadcowRibbon">미친소 수입반대!</a>
미친소 수입반대! <a style="background:url(http://kongbaguni.springnote.com/pages/1185278/attachments/516186); display:block; overflow:hidden; width:400px; height:333px; text-indent:-1000em;" href="http://kongbaguni.com/entry/AntiMadcowRibbon">미친소 수입반대!</a>

5월 15일 수정사항

  • 익스플로러 6.0이하에서 그림이 제대로 안나오는 문제 수정했습니다.
    혹시 익스플로러6.0에서 그림이 이상하게 나온다면 소스코드 다시 받아가주시기 바랍니다.
  • 5가지 새로운 디자인의 상단 베너를 추가했습니다.
  • 게시글에 직접 등록 가능한 베너 4종을 추가했습니다.

5월 16일 수정사항

  • 왼쪽상단에 붙는 베너 제작

관련글