블로그 본문 하단 추천버튼 이쁘게 모아서 꾸며보자..

제 블로그 본문 하단바에 보면 추천버튼과, 추천 아이콘을 이쁘게 잘 ?? 정리 해둔것을 알수 있습니다... 예전부터 어떻게 만드느냐에 대한 문의가 있었는데요 이 소스가 워낙 많은분들의 소스를 조합하여 만든거라서 조잡 합니다.. 그러니 좀 이해 하시길 바랍니다.

다음과 같이 하면 되겠습니다...

오늘 만들어 낼 작업은 아래와 같습니다.

이걸 오늘 만들겁니다.. 왼쪽의 메타 추천버튼은 여러분에게 맞도록 변경하셔도 상관은 없습니다.
제가 자주 쓰거나 현재 이용중인 아이콘을 이용했습니다.
오른쪽에 다음뷰와 그 아래에 믹시가 잘 어울리게 할려면 위와 같이 메타 추천 아이콘은 8개가 가장 잘 어울릴것 같습니다.

파폭이랑, 크롬, ie에서 모두 잘 보입니다..

▶ 메타사이트 추천 아이콘 다운로드 하고, 업로드 하기

먼저,  왼쪽 추천버튼의 아이콘을 다운받아서 자신의 블로그에 올려야 합니다.

icon.zip

위의 모든 아이콘 (42px * 42px) 의 파일이 압축파일에 포함되어 있습니다.

다운 받으신후에 스킨 -> 파일업로드로 올려주시면 됩니다.

위의 아이콘은 제가 만든 아이콘이 아닙니다. 

수다공작소의 soodaa  님이 만드셨습니다 http://thinkgood.tistory.com/129

▶ 다음뷰 위젯를 표시하지 않음으로 체크 해주세요

그 다음에 환경설정 -> 플러그인 -> 글보내기 -> 다음뷰 에 가서, 다음뷰 위젯을 표시하지 않음으로 하여야 합니다.

이렇게 해야지만 아래에 추가할 다음뷰위젯이 중복되지 않습니다.

▶ 믹시업 위젯 또한 표시하지 않음으로 체크 해주세요

환경설정 -> 플러그인설정 -> 추천 -> 믹시 -> mixUP위젯 표시 안함에 체크

를 해주셔야지 아래 넣을 소스와 중복이 되지 않습니다.


자 이제 소스를 넣을겁니다.
소스를 넣는 위치는 스킨 skin.html 에서 아래와 같은 부분을 검색합니다.

CTRL + F 을 눌러서 [샵샵_article_rep_desc_샵샵] 을 찾아 줍니다.

그 바로 아래에 소스를 삽입하여 줍니다.

위처럼 노란색 부분을 넣을것입니다. 소스는 아래에 있습니다.
넣기전에 해야 할일은 아래에 보시면 각 메타 사이트의 자신의 주소와 아이디 등이 있기 때문에 그 부분을 자신의 주소로 변경하는 작업을 해주셔야 합니다.

▶ 아래 소스 태그를 skin.html 에 넣어주세요

아래의, 빨간색 부분을 자신의 주소나 피드 주소로 변경하여 주시면 됩니다.

<!--- 하단 추천 테이블 시작 -->
<fieldset style="border:3px solid #a1b0db;text-align:center;width:530px;height:220px;padding:0;margin:0 auto;position:relative;">
<legend align=center style="margin:0 0 0 10px;padding:0 3px; border:1px;color:#3A5FCD"><strong>포스팅이 유익하셨다면 추천 부탁드립니다. ^^&nbsp;</strong></legend>
<table width="530" border="0" cellpadding="2" cellspacing="3"  valign="bottom">
<tr>
         <td width="100" height="180" rowspan="2">

<!-- 메타 사이트 구독버튼 삽입 소스 시작-->
<!--<div class="metablog_Div_1">-->

<!-- 한rss RSS피드 -->
<a href="http://www.hanrss.com/add_sub.qst?url=http://feeds2.feedburner.com/jaea" onclick="window.open(this.href); return false" alt="iGoogle or 한RSS로 구독하기" title="한RSS로 구독하기">
<img src="./images/icon_hanrss.png" title="한RSS로구독하기" width="42" height="42" alt="한RSS로 구독하기" /></a>

<!-- Google RSS피드 -->
<a href="http://fusion.google.com/add?feedurl=http://feeds2.feedburner.com/jaea" onclick="window.open(this.href); return false" alt="iGoogle or 구글리더로 구독하기" title="iGoogle or 구글리더로 구독하기">
<img src="./images/icon_feedburner.png" title="iGoogle or 구글리더로 구독하기" width="42" height="42" alt="iGoogle or 구글리더로 구독하기" /></a>

<!-- 다음뷰 RSS피드 -->
<a href="http://v.daum.net/user/plus?blogurl=http://www.jaea.net" onclick="window.open(this.href); return false" alt="다음뷰로 구독하기" title="다음뷰로 구독하기">
<img src="./images/icon_daumview.png" title="다음뷰로 구독하기" width="42" height="42" alt="다음뷰로 구독하기" /></a>

<!-- mixsh RSS피드 -->
<a href="http://mixsh.com/media/551" onclick="window.open(this.href); return false" alt="믹시로 구독하기" title="믹시로 구독하기">
<img src="./images/icon_mixsh.png" title="믹시로 구독하기" width="42" height="42" alt="믹시로 구독하기" /></a>

<!-- 오픈케스트 RSS피드 -->
<a href="http://opencast.naver.com/JA652" onclick="window.open(this.href); return false" alt="오픈케스트 구독하기" title="오픈케스트로 구독하기">
<img src="./images/icon_opencast.png" title="오픈케스트로 구독하기" width="42" height="42" alt="오픈케스트로 구독하기" /></a>

<!-- Blogkorea RSS피드 -->
<a href="http://www.blogkorea.net/bnmsvc/user_bloglist.do?userNum=22071" onclick="window.open(this.href); return false" alt="블로그코리아로 구독하기" title="블로그코리아로 구독하기">
<img src="./images/icon_blogkorea.png" title="블로그코리아로 구독하기" width="42" height="42" alt="블로그코리아로 구독하기" /></a>

<!-- 다음 요즘 추가 -->
<a href="http://yozm.daum.net/jaea" onclick="window.open(this.href); return false" alt="요즘" title="요즘">
<img src="./images/icon_yozm.png" title="요즘" width="42" height="42" alt="요즘" /></a>

<!-- 트위터 추가 -->
<a href="http://twitter.com/jaeanet" onclick="window.open(this.href); return false" alt="트위터" title="트위터">
<img src="./images/icon_twitter.png" title="트위터" width="42" height="42" alt="트위터" /></a>


<!-- 메타사이트 구독버튼 삽입 소스 끝-->


         </td>
  <td align=left>
<!-- 다음뷰 추천 위젯 삽입 start-->
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox1.swf?nurl=http://www.jaea.net/" width="400" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox1.swf?nurl=http://www.jaea.net/" /></object>
  </td>
  </tr>
<tr>
  <td alig=center> 
<!--믹시업 추천 위젯 삽입 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=551&guid=http://www.jaea.net/&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=551&guid=http://www.jaea.net/&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>
<!--- 하단 추천 테이블 끝 -->

위의 소스에서 제가 빨간색으로 표시된 부분은 모두 여러분의 주소로 변경하여야 합니다.

위의 소스에서는 티스토리의 치환자가 표시가 되질 않습니다.
그럼으로 긁으셔도 치환자가 표시가 되질 않아서 소스가 제대로 인식하지 않습니다.
그러니 아래의 tag.txt 를 이용하여 소스를 삽입하시고 위의 빨간색 부분을 참고하셔서 수정하시길 바랍니다.

tag.txt

위처럼 변경하시고 넣어주시면 됩니다.

블로그의 포스팅 주소가 한글 주소로 쓰이는 경우는... 아래 방법을 이용하시면 됩니다.
다음뷰 부분에서 아래 블로그 주소가 나온 부분 뒤에 치환자가 나옵니다. 그 앞에 있는 / 는 빼주셔야 합니다.
블로그 포스팅 주소가 숫자일경우는 블로그주소/[치환자] 이렇게 되지만, 포스팅 주소가 한글일 경우는
블로그주소[치환자] 이렇게 합니다. 차이점은 아래처럼 빨간색 부분으로 변경을 하고
블로그 주소와 치환자 사이에 슬래쉬 가 없습니다.

꼭 주의하세요!


<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox1.swf?nurl=http://www.jaea.net[# #_article_rep_link_##]" width="400" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox1.swf?nurl=http://www.jaea.net[# #_article_rep_link_##]" /></object>

tag2.txt

위의 txt 파일을 이용하여 넣으세요! 포스팅 주소를 한글로 할경우 이용하세요!

2010. 10. 21 추가
위에 공개된 소스는 제가 만들어낸 소스랑 아이콘이 아닙니다.
티스토리 블로거에서 활동하시는분들에 의해서 만들어진 소스를 제가 제 블로그에 맞도록 배열을 하고 테이블을 짜서 만들어진 소스입니다.

많은분들이 하단이 깔끔하다 하시고, 공개를 요청하셔서 공개 하게 되었습니다.

소스를 제공해주신 러브드웹 : http://loved.pe.kr/ 님에게 감사 합니다.^^

자신의 블로그에 본문의 폭이 저랑 틀릴수 있습니다.
왼쪽에 메타 아이콘을 2단에 4줄이 아니라, 3단에 4줄로 하셔도 상관 없습니다.
위에 아이콘이 추가 되어 있으니 해당 아이콘에 맞도록 변경하여 이용하시면 되겠죠!

아래에 구독요청 파랑색바 까지 추가 하고 싶다면.. 해당 위의 소스 바로 위에 넣어주면 됩니다.

2010/10/04 - [나이스팁/블로그] - 본문 하단에 보이는 다음뷰 구독멘트 한줄을 이미지로 만들었습니다.

이 글을 참고하세요!