몽리, 꿈속으로

2010.06.08 07:40  인터넷/블로그팁

공유버튼, 추천버튼 박스 정렬하기

오늘은 지난 블로그 꾸미기 팁들에 이어지는 글로 '러브드웹의 인터넷이야기' 제 블로그 스킨에 사용중인 추천 버튼과 정렬 방법에 대한 글입니다. 많은 분들이 블로그독, 믹시, 다음뷰 등의 추천 버튼을 작게 만들어 박스안에 넣어 정렬을 시켜 사용하는 방법을 문의 하셔서 작년쯤에 정리해서 올려둔 글이 있긴 하지만 요즘 추천 버튼 형태가 조금 변형도 있었고해서 새로 정리를 해봤습니다.

좌측의 스크롤바를 따라 다니는 공유버튼 박스는 얼마전에 방법을 알려드렸고 하단의 메타 사이트와 구독 버튼도 언젠가 공개를 해드렸으니 해당 부분들은 링크를 참조 하시면 되겠습니다. "블로그 꾸미기 - 스크롤바를 따라다니는 추천버튼, 공유버튼 레이어 박스 만들기" 그리고 '블로그 스킨의 구독버튼과 공유버튼 소스 공유 합니다. + 무료 소셜미디어 아이콘 세트 2가지' 와 오늘 소개해드리는 추천버튼 박스와 몇일전 소개해드린 '다음 뷰애드(view AD)가 시작되었습니다. 구글 애드센스와 나란히 넣는 방법, 좌측 정렬 하는 방법' 글 까지 적용을 하시면 블로그 스킨의 메인과 본문 영역은 얼추다 정리가 되지 싶네요. 블로그 사이드바 영역은 그다지 특이한건 없지만 마찬가지로 요청을 하시면 정리해서 올려드리긴 하겠습니다.



공유버튼, 추천버튼 박스 정렬하기



익스플로러6 접속시 이런 형태로 보이며


파이어폭스, 사파리, 구글 크롬, 익스플로러7 이상 웹브라우저는 지난번 알려드린 방법으로 좌측 공유버튼 박스에 몇가지 버튼이 출력되어 이런 형태로 출력이 됩니다. 브라우저 모두 동일하게 출력되게 하거나 원하는 공유버튼이나 추천버튼을 선택적으로 사용할수가 있습니다. '블로그 꾸미기 - 스크롤바를 따라다니는 추천버튼, 공유버튼 레이어 박스 만들기' 지난 글에서 알려드린 방법은 IE6에서 구현이 안되어 이런 꼼수로 해결을 하는것이니 해당 부분을 사용하지 않으신다면 조건 구문으로 나눠서 소스를 사용하지 않아도 됩니다.

마우스 우클릭이 막혀있어 드래그가 안되시는 분들은 소스 첨부파일을 받으시면 됩니다. 언제나 그렇듯 줄따위는 맞쳐서 쓰지 않습니다.~ 그리고 아래의 소스 내용으로 블로그독(블독) 추천버튼, 믹시 추천버튼, 다음뷰 추천버튼의 이해가 어려운 분들은 스크롤바의 압박이 있어 별도의 게시물에서 첨부 이미지와 함께 좀더 상세하게 설명을 드리겠습니다.

블로그독(블독), 믹시, 다음뷰 추천버튼 작게 만들기

공유버튼, 추천버튼 박스 정렬하기 소스 수정 내용


익스플로러6 브라우저 기준으로 좌측부터 블로그독, 믹시, 구글버즈, 미투데이, 마이픽업, 페이스북, 리트윗, 다음뷰 버튼 순서 입니다. 제경우 공유버튼과 추천 버튼이 뒤죽 박죽 섞여 있으나 원하시는 기능의 버튼을 모아서 사용을 하시면 되겠습니다. 편의를 위해 제가 사용중인 실제 소스로 설명 드립니다.

티스토리 치환자의 표기 문제로 # # = ## 으로 표기를 하니 주의 하세요.

추천버튼 공유버튼 공통 수정내용 :
mongri.net 은 본인의 블로그 도메인 주소로 수정을 하시고 lovedweb 트위터 계정으로 변경하시면 됩니다. 이미지는 반드시 해당 경로에 동일명으로 존재 하거나 대체 이미지를 사용하시면 됩니다.  

블로그독 추천 버튼 수정내용 :
블로그독 마이페이지에서 등록한 블로그의 글리스트에서 위젯달기중 스킨에 넣기를 통해 소스코드를 생성하여 필수 변경하세요.

믹시추천 버튼 수정내용 :
muid=46729  을 믹시의 블로그관리에 등록된 블로그 media_uid=46729 값으로 필수 변경해주세요. 추천 버튼의 가로 세로 테두리 색은 width='67' height='68' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA 변경이 가능합니다.

구글버즈 공유버튼 수정내용 :
공통 수정내용 이미지와 도메인 주소 필수 변경해주세요.

미투데이 공유버튼 수정내용 :
공통 수정내용 이미지와 도메인 주소 필수 변경해주세요.

펌플 북마클릿 수정내용 :
없음, 블로그 본문 가로폭의 크기문제로 주석처리되어 출력되지 않음.

페이스북 공유 버튼 :
공통 수정내용 도메인 주소 변경해 주세요, badge_text: 'C0C0C0' badge_color: '3B5998' 색상은 원하시는 색상으로 변경이 가능합니다.

마이픽업 북마클릿 위젯  버튼 :
공통 수정내용 트위터 계정명과 도메인 주소 필수 변경해주세요.

트위터 리트윗  버튼 :
공통 수정내용 트위터 계정명 필수 변경해주세요.

다음뷰 추천 버튼 :
공통 수정내용 도메인 주소 필수 변경해주세요. 주의 하실 점은 블로그 게시물 주소를 문자 형식으로 사용하는 블로그는 http://mongri.net[# #_article_rep_link_##]  형식으로 블로그 게시물 주소를 숫자 형식으로 사용을 하신다면 http://mongri.net/[# #_article_rep_id_##] 형식으로 사용을 하시면 되겠습니다. 티스토리의 경우 플러그인에서 daum view(다음 뷰) view on 박스는 표시하지 않음으로 설정을 해야 정상 출력됩니다.

익스플로러6 에서만 출력 되도록 설정을 하려면 아래 브라우저 조건 구문 사이의 '구글버즈, 미투데이 공유버튼' 에 원하시는 버튼 소스를 넣어주시면 파이어폭스, 사파리, 구글 크롬, 익스플로러7 이상 웹브라우저등에서는 해당 버튼이 보이지 않습니다.

<!--[if lte IE 6]> 구글버즈, 미투데이 공유버튼  <![endif]-->

위에서 언급했듯디 '블로그 꾸미기 - 스크롤바를 따라다니는 추천버튼, 공유버튼 레이어 박스 만들기' 이것은 IE6에서 구현이 안되어 이런 꼼수로 해결을 하는것이니 이 소스를 사용하지 않으신다면 조건 구문으로 나눠서 소스를 사용하지 않아도 됩니다.

<!--[if lte IE 6]> 구글버즈, 미투데이 공유버튼 <![endif]--> 붉게 표시한 브라우저 조건구문 2곳을 삭제하면 모든 브라우저 공통으로 똑같이 출력이 됩니다.


공유버튼, 추천버튼 박스 정렬하기 소스

마우스 우클릭이 막혀있어 드래그가 안되시는 분들은 하단의 첨부파일을 받으시면 됩니다.

skin.html 추가내용
<div class="metablog_Div">

<div class="widget_div">
<div class="blogdoc_widget"><script type='text/javascript'>document.write("<scr"+"ipt type='text/javascript' src='http://w.blogdoc.nate.com/widget.php?c_seq=7689&p_url=http://"+document.domain+"[# #_article_rep_link_##]'></scr"+"ipt>");</script></div>
</div>

<div class="widget_div">
    <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='67' height='68' 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=46729&guid=http://mongri.net/[# #_article_rep_id_##]&rdate=[# #_article_rep_date_##]&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=46729&guid=http://mongri.net/[# #_article_rep_id_##]&rdate=[# #_article_rep_date_##]&showhitcnt=1&platform=2' quality='high' wmode='window' width='67' height='68' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
    </object>
</div>

<!--[if lte IE 6]>
<div class="widget_div">
<a href="http://www.google.com/reader/link?url=http://mongri.net[# #_article_rep_link_##]&title=[# #_article_rep_title_##]&srcURL=http://mongri.net&srcTitle=[# #_title_##]" onclick="window.open(this.href); return false"><img src="./images/small_verti_this.png" alt="Buzz this" /></a>
</div>

<div class="widget_div">
<a href="http://me2day.net/posts/new?new_post[body]=[# #_article_rep_title_##]-&quot;[# #_title_##]&quot;:http://mongri.net[# #_article_rep_link_##]" onclick="window.open(this.href); return false"><img src="./images/me2DAY.jpg" width="52" height="52" alt="me2DAY" /></a>
</div>
<![endif]-->

<!-- <div class="widget_div">
<a href="http://www.pumpl.com/submit" onclick="document.location.href = 'http://www.pumpl.com/submit?url=' + encodeURIComponent(location.href)+ '&title=' + encodeURIComponent(document.title); return false"><img src="http://www.pumpl.com/sites/all/themes/drigg_theme/img/pumplus.png" border="0" width="52" height="52" /></a>
</div> -->

<div class="widget_div">
<script>var fbShare = {
url: 'http://mongri.net[# #_article_rep_link_##]',
size: 'large',
badge_text: 'C0C0C0',
badge_color: '3B5998',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
</div>

<div class="widget_div">
<script src="http://2u.lc/packer/js/rt.js/default"></script>
<script>
  var fn = 'table_s';  
  var username = 'lovedweb';
  var hosturl = 'http://mongri.net';  
  var url = hosturl+('[# #_article_rep_link_##]');
  var title = ('[# #_article_rep_title_##]').
replace('"','');
  _rt(fn, username, url, title);
</script>
</div>

<div class="widget_div">
<script type="text/javascript">
tweetmeme_service = 'bit.ly';
tweetmeme_source = 'lovedweb';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
</div>

<div class="widget_div">
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://mongri.net[# #_article_rep_link_##]" width="67" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://mongri.net[# #_article_rep_link_##]" /></object>
</div>

</div>


style.css 추가내용
 .metablog_Div {border:1px solid #E5E5E5; margin:0 0 10px 0; padding:5px; width: 578px; height: 80px;}

.widget_div {float:left; margin-right: 5px;}

.blogdoc_widget{
float:left;
background-color : #ffffff;
border-right : 1px solid #CCCED3;
height : 72px;
margin: 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
width : 74px;
overflow : hidden;
}


공유버튼, 추천버튼 박스 정렬하기 소스 다운로드


recommendation buttons.TXT

다음뷰 추천버튼, 블로그독 추천버튼 작게 만들기


위의 내용으로 잘 이해가 안되시는 분들을 위해 별도로 글을 올려두었으니 참고하세요.

블로그 꾸미기 - 블로그독(블독) 추천버튼 위젯 크기 작게 만들어 블로그 스킨 원하는곳에 넣는 방법
블 로그 꾸미기 - 다음뷰 추천버튼 크기 작게 만들어 블로그 스킨 원하는곳에 넣는 방법

신고
몽리, 꿈속으로의 모든 게시물은 사전 동의 없이 펌질, 재배포, 재사용을 할 수 없습니다.
직접 링크를 선호합니다. [저작권 규약]
트랙백4개 댓글 32 개가 달렸습니다.
욕설, 비방 글과 음란,사행성,상업적 광고의 댓글은 삭제와 동시에 스팸 필터링 합니다.
닉네임 및 정확한 사이트 주소 (개인블로그, SNS 또는 이메일)가 없는 댓글은 무대응 및 삭제될 수 있습니다.

    이전 댓글 더보기
  1. BlogIcon 배리본즈님의 댓글

    잘 보고 갑니다. 즐거운 하루 되세요.

  2. BlogIcon 러브드웹님의 답글

    감사합니다

  3. BlogIcon 안다님의 댓글

    러브드웹님~유용한 정보 감사드립니다.
    요거 참고해서 적용해 보도록 하겠습니다.
    좋은하루 보내세요~!!!

  4. BlogIcon 러브드웹님의 답글

    해보시고 안되면 오세요~ ^^

  5. BlogIcon 영민C님의 댓글

    왼쪽에 따라다니는 형태의 버튼 배열 맘에 드네요~ ^^

  6. BlogIcon 러브드웹님의 답글

    그것도 정리해서 올려두었어요 관련 게시물 링크에 있어요~

  7. BlogIcon 건강천사님의 댓글

    오.. 소스
    감사히 잘 보고 갑니다.
    요것 조것 붙여도 보고 떼어도 보고 연습좀 해야되는데 ^^
    즐거운 날 되세요 :)

  8. BlogIcon 러브드웹님의 답글

    이것 저것 해보시고 맘에 드시는것만 쓰윽 넣어두시고 사용하세요~

  9. BlogIcon LiveREX님의 댓글

    추천 버튼 정리의 종합판이네요 ㅎㅎ
    근데 블로그독(블독), 믹시, 다음뷰 추천버튼 작게 만들기 부분은 원래 공란이에요??

    깔쌈(?)한 팁 추천 쾅!! ^^

  10. BlogIcon 러브드웹님의 답글

    링크로 대체인디 링크가 빠졌나?

  11. BlogIcon 중계사님의 댓글

    제가 찾던건데 여기에 있었군요^^
    몇개는 넣었는데 나머지들이 여기에 모여있으니 반했습니다.^^

  12. BlogIcon 모렌님의 댓글

    뭐가뭔지 잘 모르겠어요.. 제가 컴맹이라 그런걸까요 ㅠㅠ
    항상 도움 많이 받고 갑니다.
    제 블로그에 러브드웹님 블로그 링크해놔도 될까요? 자주 찾아뵐께요~

  13. BlogIcon 윤뽀님의 댓글

    적용했는데

    가로로
    ㅇ ㅇ ㅇ ㅇ ㅇ
    이렇게 되어야 하는데 지금




    이렇게 나와요

    시간 되시면 한번 봐 주실 수 있으세요? ㅠ

  14. BlogIcon 윤뽀님의 답글

    어라. 지금보니 다시 제대로 나오네요
    이상해요 ㅋㅋㅋㅋ
    옆풀떼기에 따라다니는 것도 하고싶은데
    그건 하다 접었어요 ;; -_-

  15. BlogIcon 터프가이님의 댓글

    좋은 정보 잘 보고 갑니다 ~

  16. BlogIcon 러브드웹님의 답글

    감사합니다~~

  17. BlogIcon 박성웅님의 댓글

    감사합니다. 러브드웹님의 강좌를 보고 제 블로그에 적용시켜 봤어요.
    컴퓨터를 못하는 편은 아닌데 태그가 당췌 적응이 안되네요.-_-
    하루 종일 삽질했어요.ㅋ 적용시켜 보니 정말 이쁘군요.
    감사합니다^^

  18. BlogIcon 러브드웹님의 답글

    잘 적용하셨다니 다행이네요~
    뭐 어찌 되었던 잘 적용하고 잘 쓰는게 장땡이죠~

  19. BlogIcon yemundang님의 댓글

    전엔 수동이라시더니 자동이네여. -_-;
    조금 수정했는데, 냉중에 와서 더 바꿀께용.
    역시 검색하면 러브드웹님 글이 나오네용. 감사합니당. ^^

  20. BlogIcon 러브드웹님의 답글

    그당시에는 해당 기능이 없었는데 얼마전에 새로 기능이 생겼어요 ^^

  21. BlogIcon yemundang님의 답글

    코드 수정했어요. 러브드웹님 덕분에 티는 안나지만 블로그 꾸미기 조금씩 해나가고 있습니다.
    감사합니다!!!

  22. BlogIcon 리포터-조님의 댓글

    블로그를 하게 되면서 처음으로 방명록을 남기네요 ^^

    처음에는 파소월드라는 분에게 소스를 받아서 해봤는데 안되서 검색하다 러브드웹님의 방식대로 해보아도 저는 사이드 바에 뷰 온의 손은 보이는데 숫자가 안보입니 다른 추천 버튼은 아직 계정도 안 만든 것이 많아서 우선 뷰온 추천 버튼 부터 만들어 놓으려 했는데 안됩니다.

    뭐~! 님이 잘못알려준 것이 아니고 제가 못하는 것이지만 님의 블로그에는 정말로 양도 질도 좋은 내용이 많이 있는 것 같습니다.

    그런데 저 같이 초보 블로거인(소스 잘모름) 사람에게는 설명이 어렵다는 생각이 듭니다. (처음부터 꾸준하게 님에게 정보를 얻었다면 다를지 모르지만요)

    24시간 동안 뷰온 한번 올려보려고 하다가 걍~! 포기할까 생각중입니다.

    아무튼 간혹 정보를 얻기위해 검색하다 보면 종종 들리게 되는데 많은 사람에게 큰 도움 되실길 바라겠습니다. ^^; (괜히 투정하고 가는것 같네요)

  23. BlogIcon 카오님의 댓글

    이 글보고 버튼정리 깔끔하게 잘 했습니다.^^
    좋은 정보 감사합니다.

  24. BlogIcon 저수지님의 댓글

    안그래도 믹시랑 다음뷰랑 다른 줄에 나와서
    정리하고 싶었는데
    이 글 보고 따라해봐야겠네요.
    고맙습니다.

  25. BlogIcon 멍이님의 댓글

    오... 감사합니다. 안그래도 기본으로 제공되는거 링크 시키니 커보여서 그랬는데... 저녁에 해봐야겠네요.

  26. BlogIcon tomoka님의 댓글

    블로그가 깔끔하게 잘 정리되어있는거 같아요 :)

  27. BlogIcon 김선웅님의 댓글

    안녕하세요. 올려주신 자료 항상 감사하게 잘 사용하고 있습니다. 유용한 정보가 많아서 자주 들어와서 보다가 덧글은 처음이네요.

    알려주신 방법 대로, 왼쪽 스크롤바 버튼을 삽입했는데, 다른건 다 정상 작동을 하나, 뷰온버튼이 손가락 안에 숫자도 안뜨고, 눌러도 별 반응이 없습니다. id, link 다 변경해보고 종류별로 다 적용해봤는데 별 반응이 없네요.

    혹시 이런 문제가 발생하는 원인들중에 짐작가는 것이 있으신지요..?
    해결할 수 있는 힌트를 조언해주세요..^^

  28. BlogIcon 톨™님의 댓글

    감사합니다.
    적용시켜봤는데 잘 되는군요.
    열심히 삽질하다가 비교적 마음에 들게 바꿔놨습니다.
    정말 많은 도움이 되었어요.^^

  29. BlogIcon 드자이너김군님의 댓글

    요즘 시간이 초큼~ 남아서 공유버튼 정리를 하고 있는데 생각보다 어렵내요..ㅎ
    즐거운 하루 되세요~~

  30. BlogIcon 꾸러기밤바님의 댓글

    잘봤습니다 ^^