저는 예전 "IE6 보이콧 운동"이라는 글을 시작으로, 포스팅 하단에 구독 권장 호객 문구와 더불어 몇가지 저작권 관련 코멘트를 묶어서 삽입해오고 있습니다. 다음과 같이 생긴 놈이었지요.. (뭐 쓰다보니 점점 길어지고 커졌지만..)
이 글이 도움이 되었다면 RSS로 구독하세요.
http://blog.daum.net/xml/rss/miriya
이 블로그의 모든 글은 자유롭게 링크할 수 있으며, 오픈캐스트 발행을 허용합니다.
다음 블로그로 스크랩하거나, 출처와 함께 퍼가도 뭐라 안합니다.(출처 없으면 뭐라 할겁니다.)
처음에는 그냥 HanRSS 인기 블로그 순위 올리는게 재미있어서 구독자 수 늘릴 겸 해서 낚시용으로 달아왔는데, 이걸 쓰다보니 다른것도 넣고 싶어지는겁니다. 아니, 무엇보다도 모양새가 너무 구려서 디자인에 엄청 신경쓰는 제가 용납이 안되더라구요. 특히나 본문은 나눔고딕인데 글상자 안에는 글씨 속성이 잘 적용되지 않는고로 매번 돋움체로 나오기 일쑤라 영 껄쩍지근했습니다. 그래서 이번에 아예 변하지 않도록 싹 다시 만들어버렸습니다.
이렇게 만들어버렸지요.
이걸 블로그 글 하단에 추가하면 이 블로그를 HanRSS나 구글리더로 구독할수도 있고, 믹시나 블로그코리아, 올블로그 등으로 추천하거나 구독할수도 있습니다. 미투데이나 트위터, 페이스북으로도 공유할 수 있게요. 블로그 한 5년 써보니까 암만 글 잘 써도 아무 도움 안됩니다. 사람들이 많이 읽을 수 있게 공유가 되어야해요. 그래서 트위터도 좀 써보고 미투데이에 링크도 남기는거죠. 다음 블로그에서 블로깅하면 다음 메인 노출도 거의 안시켜주고 뭔가 홀로 블로깅하는 그런 느낌이라 이런식으로 유통 채널을 만드는건 중요합니다.
<div style="background-image: url(배경이미지주소); width: 가로사이즈px; height: 세로사이즈px; border: none;">
<div id="Buttons" style="position:relative; left: 186px; top: 120px; width: 195px; height: 99px;">
<div class="HanRSS" style="overflow:hidden; position:absolute; left: 3px; top: 3px; width: 45px; height: 45px; margin:0px;">
<a title="HanRSS로 구독하기" style="display:block; width:45px; height:45px; padding-top:45px;" href="http://www.hanrss.com/add_sub.qst?url=RSS주소" target="_blank">HanRSS로 구독하기</a>
</div>
<div class="GoogleReader" style="overflow:hidden; position:absolute; left: 51px; top: 3px; width: 45px; height: 45px; margin:0px;">
<a title="GoogleReader로 구독하기" style="display:block; width:45px; height:45px; padding-top:45px;" href="http://www.google.com/ig/add?feedurl=RSS주소" target="_blank">GoogleReader로 구독하기</a>
</div>
<div class="Mixsh" style="overflow:hidden; position:absolute; left: 99px; top: 3px; width: 45px; height: 45px; margin:0px;">
<a title="믹시에 믹스UP하거나 소식듣기" style="display:block; width:45px; height:45px; padding-top:45px;" href="http://mixsh.com/media/119" target="_blank">믹시에 믹스UP하거나 소식듣기</a>
</div>
<div class="BlogKorea" style="overflow:hidden; position:absolute; left: 147px; top: 3px; width: 45px; height: 45px; margin:0px;">
<a title="블로그코리아에 블UP하거나 친구등록하기" style="display:block; width:45px; height:45px; padding-top:45px;" href="http://www.blogkorea.net/bnmsvc/user_bloglist.do?userNum=561180" target="_blank">블로그코리아에 블UP하거나 친구등록하기</a>
</div>
<div class="me2day" style="overflow:hidden; position:absolute; left: 3px; top: 51px; width: 45px; height: 45px; margin:0px;">
<a title="이 글을 me2day에서 공유하기" style="display:block; width:45px; height:45px; padding-top:45px;" href="http://me2day.net/posts/new?new_post[body]=%22글제목%22:글주소&new_post[tags]=태그" target="_blank">이 글을 me2day에서 공유하기</a>
</div>
<div class="twitter" style="overflow:hidden; position:absolute; left: 51px; top: 51px; width: 45px; height: 45px; margin:0px;">
<a title="이 글을 트위터로 RT하기" style="display:block; width:45px; height:45px; padding-top:45px;" href="http://twitter.com/home?status=RT @트위터ID 글제목 글주소" target="_blank">이 글을 트위터로 RT하기</a>
</div>
<div class="allblog" style="overflow:hidden; position:absolute; left: 99px; top: 51px; width: 45px; height: 45px; margin:0px;">
<a title="올블로그에서 추천하거나 북마크하기" style="display:block; width:45px; height:45px; padding-top:45px;" href="http://search.allblog.net/?keyword=astralog&type=100&rssurlidx=19974" target="_blank">올블로그에서 추천하거나 북마크하기</a>
</div>
<div class="facebook" style="overflow:hidden; position:absolute; left: 147px; top: 51px; width: 45px; height: 45px; margin:0px;">
<a title="이 글을 페이스북에서 공유하기" style="display:block; width:45px; height:45px; padding-top:45px;" href="http://www.facebook.com/share.php?u=글주소" target="_blank">이 글을 페이스북에서 공유하기</a>
</div>
</div>
<p style="position:relative; left: 183px; top: 122px; width: 250px; font-family:돋움; font-size:10pt;"><u><span><a class="smarterwiki-linkify" href="RSS주소">RSS주소</a></span></u></p>
</div>
위의 소스를 주욱 긁어다가 HTML모드로 블로그 글 맨 밑에다 추가하시면 됩니다. 붉은 글씨 부분만 자기것에 맞게 수정하시면 오케이. 혹시 위 소스 긁어다가 안될 경우엔 공백이 이곳저곳 있어서 그럴수도 있으니 아예 아래의 텍스트 파일을 받아다가 써도 되겠습니다.
blog.txtHanRSS, 구글리더는 자기 RSS주소로 바꿔주기만하면 되니 간단하지만, 믹시, 블로그코리아, 올블로그는 자기 전용 페이지의 주소를 알아와야합니다. 이건 우월한 지능으로 잘 알아내서 넣어주세요. 이런 글 볼 정도면 저정도는 할 줄 알아야죠. 여기까지는 한번 만들어두면 계속 쓸 수 있지만 미투데이, 트위터, 페이스북은 매번 글 쓸때마다 수작업이 필요합니다. 글 제목과 주소를 그때그때 써서 넣어줘야해요. 다음 블로그가 이것저것 프레임이 많아서 어디 티스토리처럼 href="/" 이렇게 속편하게 넣으면 본문 주소가 들어가는게 아니라 매번 글 주소를 수동으로 복사해줘야합니다ㅠㅠ
허접한 제작 후기.
일단 글씨와 기본 레이아웃 배치는 Flash CS4를 사용했습니다. 아무래도 이 프로그램은 벡터 기반에 손에 엄청 익숙하다보니 저는 플래시를 그래픽 디자인 툴로 사용하고 있습니다. 플래시로 디자인하다니 참 변태적인 성향이죠.. 개발도 디자인도 따로 배우지 않고 그냥 개인이 야매로 취미삼아 만든 결과가 이렇습니다.. 참고로 플래시로 만들어 Export to Image로 빼면 모양이 이상하게 변하는 경우가 잦기 때문에 저는 그냥 스샷 뜬 다음 포토샵에서 붙여넣고 크롭해버렸습니다..
그리고 중간 부분의 아이콘 묶음은 포토샵으로 작업했습니다. HanRSS쪽 아이콘은 HanRSS에서 주는 아이콘이 좀 못생겨보여서 제가 웹에서 퍼온 아이콘을 적당히 축소해서 작업했습니다. 믹시의 경우 아이콘이 없어서 favicon 모양으로 직접 그려 넣었고요, 블로그코리아 역시 로고가 따로 나와있는게 없어서 잘라다가 귀퉁이만 다듬었습니다. 미투데이는.. 역시 favicon 모양으로 직접 벡터로 그렸습니다. 트위터 아이콘도 모양새가 좀 구려서 제가 픽셀작업 다 했고, 올블로그는 그냥 있는거 축소하니 잘 되더군요. 올블로그는 배너 페이지를 아예 따로 만들어둘 정도라 정말 좋았습니다. 페이스북도.. 글씨 색 반전시키고 픽셀 작업하고 노가다좀 했습니다. 그리고 각 버튼들 라운드처리 다 픽셀작업 했고요. 가로 사이즈가 45px 밖에 안되다보니 1px만 움직여도 왼쪽이나 오른쪽으로 치우친것처럼 보여서 영 신경쓰였습니다. 이리저리 축소하고 확대하며 대충 그럴싸해보이게 움직였어요.. 포토샵의 Smart Object 기능은 확대 축소가 잦을때 아주 좋습니다 ㅠㅠ
아래의 RSS 텍스트는 직접 긁거나 우클릭해서 복사할 수 있도록 텍스트로 넣었고요, 희한하게 드림위버에서 볼땐 제 위치에 나오는게 다음 블로그에 붙여넣으니 글씨가 12px 정도 위로 치우쳐서 아이콘과 겹치더군요. 아무튼 대충 수정해주고..
일단 모양새는 이렇게 다듬었고, 코드의 경우.. 다음 블로그에서는 이미지를 첨부할 경우 무조건 이미지에 링크를 걸어서 클릭시 원본이 새창으로 뜨도록 되어있습니다. 이미지를 넣으면 무조건 버튼이 되는거에요. 원본이 필요 없는 상황에서도 말이죠.. 좀 짜증나지만 이걸 우회하기 위해 이미지를 img 태그로 넣지 않고 DIV의 background로 깔아버렸습니다. 이러면 마우스를 올려도 아무 반응이 없지요. 휴우.
그리고 중간의 버튼들은 관리 편의상(나중에 버튼이 더 늘어날 수 있으니..) div로 박스하나 그려주고 안에 역시 div로 가로세로 45px의 영역을 만들어주었습니다. 그리고 링크는 여기 옴니아 블로그의 좌상단 배너 클릭하는 부분을 참조로 해서 상단 padding을 45px 줘서 만들어주었습니다. 투명 버튼 같은거 넣을 필요도 없고 괜찮더라구요. 그리고 링크에는 각각 타이틀 달아서 마우스 올렸을때 설명 나오도록 했습니다. 참고로 다음 블로그는 이미지를 첨부할 때 테두리를 무조건 1px씩 주기 때문에(소스를 바꿔버립니다.. 그래서 map 태그 쓰기도 힘듬.) 배치의 문제도 있고 해서요.
버튼들에 걸린 링크와 스크립트는 학주니님 블로그와 파르르님 블로그를 참조했습니다. 구글리더와 트위터, 미투데이, 페이스북은 학주니님, 올블로그, 블로그코리아, 믹시는 파르르님 블로그가 각각 좋더라구요. 뭐 아무튼, 소스 열어보면 아마추어 티가 팍팍 날겁니다. 이 부분에 대해서는 조언해주셔도 되고 까도 좋습니다. 제가 좀 얼치기라 혼자 뜯고 만지고 하다가 아마 산으로 가고 했을겁니다..
다음의 Yozm도 링크하고 싶었는데 Yozm은 넣는 스크립트를 몰라 패스.. 네이트 커넥트로 스크랩하는것도 기회 되면 추가하고싶네요. 아래가 완성작입니다. 한번 눌러서 테스트들 해보세요. 저는 일단 잘 작동하네요. 이 기능은 요 글 하단 우측에 있는 "이 글을..." 버튼과도 겹치겠네요.
나중에는 정용민님 블로그처럼 글 하단에 프로필도 만들어서 넣어보렵니다. 버튼 넣는것보단 간단하겠죠-_-a 다음 블로그에서 안만들어주니 이런식으로라도 해야겠네요.
'웹서비스 이야기 > 다음 기타' 카테고리의 다른 글
| 문디같은 다음 검색, 문디같은 다음 카페. 니들은 누구편이니 (0) | 2010.09.29 |
|---|---|
| 다음 검색, 하반기를 맞아 어떻게 바뀌었나 (0) | 2010.09.29 |
| 다음 블로그, 예약 포스팅 기능 사용해보니.. (0) | 2010.03.24 |
| 내 블로그 내 맘대로 못파나 (0) | 2010.03.12 |
| 다음 블로그 5주년, 1800일 사용. (0) | 2010.02.18 |