[블로그 팁] 블로그 하단 추천 위젯 깔끔하게 정리하기
이제서야 제가 사용하는 방법을 공개하게 되었네요. 오랜만에 블로그 팁에 대한 글을 쓰는 것 같은데요. 오늘은 자칫 잘 못하면 지저분하게 될 수도 있는 블로그 포스트 하단의 추천 위젯들을 깔끔하게 정리하는 방법에 대해서 알아보도록 하겠습니다. 오늘은 약간 HTML에 대한 이야기가 나올 수도 있으니 어렵더라도 끝까지 봐주세요. ^^
블로그를 운영하시는 분들이 많아 지면서 메타 블로그의 숫자도 늘어나게 되었습니다. 메타 블로그란 수 많은 블로거들이 작성한 글들을 모아서 주제별로 보여주는 블로그들의 모임정도 되는 곳입니다. 대표적인 메타블로그 사이트에는 다음뷰나 믹시, 블로그 코리아, 올 블로그 등이 있습니다. 지금도 조금씩 새로운 메타블로그 사이트들이 생겨나고 있구요.
이런 메타 블로그들이 좋은 글을 선별해내기 위해서 사용하는 방법이 가장 보편적인 방법인 투표에 의한 방법입니다. 보다 많은 독자들이 좋은 글이라고 추천을 한 글, 그 추천수가 많은 글이 좋은 글이라는 기본적인 생각이지요. 반대로 생각하면 블로거 입장에서도 추천을 많이 받는 것이 당연히 좋겠지요.
그래서 여기저기 메타블로그에 가입을 해서 추천 위젯을 블로그에 달아 놓게 됩니다. 정신을 차리면 블로그 하단 부분에 처음 보는 추천 위젯들이 주렁주렁 달려있는 것을 볼 수가 있지요.
하지만 이런 추천 위젯들은 사이즈가 제 멋대로여서 주렁주렁 달아놓으면 블로그에 미관상 좋지 않은 영향을 미칠 수도 있습니다. 들쑥날쑥한 추천위젯들이 제 멋대로 여기저기 달려 있으면 난잡해 보이고 심지어는 블로그 글의 신뢰도까지 떨어뜨릴 수 있습니다.
그래서 하단 위젯을 정리할 필요가 있는데요. 그 동안 몇몇분께서 하단 위젯의 정리 방법을 물어 오셨습니다. 곧 포스팅 한다고만 말을 하고 지금까지 시간을 끌어왔는데요. 다른 블로거 분들도 사용하는 지극히 평범한 방법이니 여러분들도 쉽게 따라 하실 수 있습니다.
꼬마낙타의 블로그 추천위젯 정리법
일단 제가 지금 사용하는 정리 방법은 이렇습니다.
다음뷰와 믹시 추천 위젯이 오른쪽에 붙어 있고, 왼쪽에는 링크프라이스의 CPC 광고가 달려 있습니다. 사실 이 방법은 재아님의 블로그에서 힌트를 얻어서 약간 응용한 것입니다. 재아님의 블로그 포스트도 한번 참조해 보세요. ^^
다음뷰 위젯을 사용 안함
믹시 추천위젯 사용안함
먼저 준비작업을 해야 합니다. 적용시킬 추천위젯( 여기서는 다음뷰와 믹시가 되겠네요. )을 표시안함으로 꺼야합니다. 실제로 사용 안하는게 아니라 티스토리에서 자동으로 스킨에 추천 위젯을 붙여주는 기능을 끄는 거니까 의심안하셔도 되요 ^^
View on 박스와 mixUP 위젯을 표시 안함으로 꺼 주셨다면 이제 더 이상 블로그 하단에 지저분하게 보였던( 그렇게 생각이 되었던 ) 추천위젯들이 보이지 않을 것입니다.
이제 블로그 하단의 추천위젯을 정리 할 차례입니다. HTML/CSS 편집메뉴를 들어갑니다.
skin.html 박스에서 ##_article_rep_desc_## 를 찾습니다. 이 부분은 치환자라는 것으로 실제로 다른 구독자가 여러분의 블로그를 봤을 때, 저 부분이 블로그의 본문 그러니가 블로그 포스트에 해당됩니다. 데이터 베이스에 저장되어 있는 것을 가져 오는 것이죠.
여러분은 블로그 본문 하단에 추천 위젯을 넣어 놓고 싶을 테니까 그 밑에 추천 위젯을 넣도록 하겠습니다. 다음 소스를 복사해서 붙여 넣으시면 됩니다.
<!--- 하단 추천 테이블 시작 -->
<fieldset style="border:3px solid #a1b0db;text-align:center;width:650px;height:250px;padding:0;margin:0 auto;position:relative;">
<legend align="center" style="margin:0 0 0 10px;padding:0 3px; border:1px;color:#3A5FCD">
<a href="http://v.daum.net/user/plus?blogurl=http://plusblog.tistory.com/" target="_new" onfocus="this.blur()" style="background-color:blue;color:white;padding:5 5 5 5;margin:5 5 5 5"> 제 블로그글이 마음에 드신다면 추천을 눌러주세요</a><br /></font>
</legend>
<table width="650" border="0" cellpadding="2" cellspacing="3" valign="bottom" style="background-color:#FFFFFF">
<tr>
<td align="center" width="220" height="210" rowspan="2" style="background-color:#FFFFFF">
이 부분이 여러분이 활용할 수 있는 공간입니다. ^^ 광고를 넣으셔도 되고 다른 추천 위젯들을 작게 만들어서 넣으셔도 됩니다. 저는 광고를 넣었구요
</td>
<td align=left style="background-color:#FFFFFF">
<!-- 다음뷰 추천 위젯 삽입 start-->
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox1.swf?nurl=http://plusblog.tistory.com/[ ##_article_rep_id_## ]" width="400" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox1.swf?nurl=http://plusblog.tistory.com/[ ##_article_rep_id_## ]" /></object>
</td>
</tr>
<tr>
<td alig=center style="background-color:#FFFFFF">
<!--믹시업 추천 위젯 삽입 start -->
<div id="MissFlash_Div">
<div class="MF_Left_Float" style="height:89px; margin-left:0;">
<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='399' height='89' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
<param name='allowScriptAccess' value='always'/>
<param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=47911&guid=http://plusblog.tistory.com/[ ##_article_rep_id_## ]&rdate=&showhitcnt=1&platform=2'/>
<param name='quality' value='high'/>
<param name='wmode' value='window'/>
<embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=47911&guid=http://plusblog.tistory.com/[ ##_article_rep_id_## ]&rdate=&showhitcnt=1&platform=2' quality='high' wmode='window' width='399' height='89' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
</object>
</div>
</div>
<!-- 믹시 추천 위젯 삽입 end -->
</td>
</tr>
</table>
<!--- 하단 추천 테이블 끝 -->
<fieldset style="border:3px solid #a1b0db;text-align:center;width:650px;height:250px;padding:0;margin:0 auto;position:relative;">
<legend align="center" style="margin:0 0 0 10px;padding:0 3px; border:1px;color:#3A5FCD">
<a href="http://v.daum.net/user/plus?blogurl=http://plusblog.tistory.com/" target="_new" onfocus="this.blur()" style="background-color:blue;color:white;padding:5 5 5 5;margin:5 5 5 5"> 제 블로그글이 마음에 드신다면 추천을 눌러주세요</a><br /></font>
</legend>
<table width="650" border="0" cellpadding="2" cellspacing="3" valign="bottom" style="background-color:#FFFFFF">
<tr>
<td align="center" width="220" height="210" rowspan="2" style="background-color:#FFFFFF">
이 부분이 여러분이 활용할 수 있는 공간입니다. ^^ 광고를 넣으셔도 되고 다른 추천 위젯들을 작게 만들어서 넣으셔도 됩니다. 저는 광고를 넣었구요
</td>
<td align=left style="background-color:#FFFFFF">
<!-- 다음뷰 추천 위젯 삽입 start-->
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox1.swf?nurl=http://plusblog.tistory.com/[ ##_article_rep_id_## ]" width="400" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox1.swf?nurl=http://plusblog.tistory.com/[ ##_article_rep_id_## ]" /></object>
</td>
</tr>
<tr>
<td alig=center style="background-color:#FFFFFF">
<!--믹시업 추천 위젯 삽입 start -->
<div id="MissFlash_Div">
<div class="MF_Left_Float" style="height:89px; margin-left:0;">
<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='399' height='89' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
<param name='allowScriptAccess' value='always'/>
<param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=47911&guid=http://plusblog.tistory.com/[ ##_article_rep_id_## ]&rdate=&showhitcnt=1&platform=2'/>
<param name='quality' value='high'/>
<param name='wmode' value='window'/>
<embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=47911&guid=http://plusblog.tistory.com/[ ##_article_rep_id_## ]&rdate=&showhitcnt=1&platform=2' quality='high' wmode='window' width='399' height='89' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
</object>
</div>
</div>
<!-- 믹시 추천 위젯 삽입 end -->
</td>
</tr>
</table>
<!--- 하단 추천 테이블 끝 -->
Source.txt소스가 필요하신 분은 텍스트 파일 형태로 올려놨습니다. 다운로드 받으시거나 위 소스를 복사하시면 됩니다.
위 소스에서 색이 칠해져 있는 부분은 여러분이 바꾸셔야 할 부분인데, 빨간색 부분은 제 블로그로 설정이 되어 있는 부분이니 여러분의 블로그 주소로 바꾸시면 되구요. 중간에 빨간색 글씨가 쓰여져 있는 부분은 추천 위젯 정리 할 때, 왼쪽의 광고가 나오는 부분입니다. 거기에 여러분 나름대로 광고를 넣으시거나 다른 추천 위젯으로 꾸미시면 됩니다. ( 제 광고 소스가 있어서 뺏습니다. )
그리고 녹색으로 칠해져 있는 부분은 '[' 글자와 '##' 글자 사이에 공백문자가 하나 있습니다. '[ ##..' 이렇게 되어 있는 것을 빈칸을 없에고 '[##' 이렇게 만들어 주시면 됩니다. 뒤 쪽도 마찬가지로 '## ]' 이렇게 되어 있는 부분은 '##]' 이렇게 만들어 주시면 됩니다. 공백을 지워야 제대로 적용이 되니 주의하시기 바랍니다. ^^ ( 블로그 글을 쓸 때에도 치환자가 적용이 되어서 부득이하게 이렇게 썼습니다. 올려놓은 텍스트 파일에는 치환자가 제대로 되어 있으니 참조하시기 바랍니다.
참고 !!
여러분의 글 주소가 글 제목이 들어가는 형태로 되어 있다면, http://plusblog.tistory.com/[ ##_article_rep_id## ]가 아니라 http://plusblog.tistory.com[ ##_article_rep_link## ] 라고 해야 한다고 합니다.
id가 link로 바뀌었고, 블로그 주소와 치환자 사이에 '/' 가 없어졌습니다.
주의하시기 바랍니다. ^^
여러분의 글 주소가 글 제목이 들어가는 형태로 되어 있다면, http://plusblog.tistory.com/[ ##_article_rep_id## ]가 아니라 http://plusblog.tistory.com[ ##_article_rep_link## ] 라고 해야 한다고 합니다.
id가 link로 바뀌었고, 블로그 주소와 치환자 사이에 '/' 가 없어졌습니다.
주의하시기 바랍니다. ^^
마지막으로 믹시 추천 위젯에 muid라는 번호가 있습니다. 이 번호는 따로 알아내야 하는데, 다음을 따라하시면 쉽게 얻을 수 있습니다.
믹시에 로그인을 합니다. 상단에 빨간색으로 되어 있는 마이믹시를 클릭합니다.
마이믹시 화면 왼쪽에 등록된 블로그를 클릭합니다.
만약 등록된 블로그가 여러개라면 스킨을 편집하고 있는 블로그를 선택합니다.
그러면 화면이 바뀌면서 주소창의 주소가 바뀌는데, media/ 다음에 오는 숫자가 바로 여러분 블로그의 muid가 되겠습니다. 이 숫자를 아까 편집하고 있던 HTML에서 muid에 해당하는 곳에 넣어주시면 됩니다. ^^
그리고 미리보기를 클릭해서 어떻게 적용이 되었는지를 봅니다.
적용이 잘 되었다면 이렇게 나옵니다. ^^
이게 기본 뼈대이고 여기서 여러분의 HTML지식을 이용해서 여러가지 응용을 할 수 있습니다. 세부적인 응용은 추후로 미루거나 여러분의 손에 맡기도록 하겠습니다. ^^
이제 블로그 하단 추천 위젯 부분이 깔끔해 지셨나요? ㅎㅎ