블로그 꾸미기 - 공유버튼, 추천버튼 박스 정렬하기. 블로그독(블독) 추천버튼 다음뷰 추천 버튼 작게 만들기

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

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

좌측의 스크롤바를 따라 다니는 공유버튼 박스는 얼마전에 방법을 알려드렸고 하단의 메타 사이트와 구독 버튼도 언젠가 공개를 해드렸으니 해당 부분들은 링크를 참조 하시면 되겠습니다. "블로그 꾸미기 - 스크롤바를 따라다니는 추천버튼, 공유버튼 레이어 박스 만들기" 그리고 '블로그 스킨의 구독버튼과 공유버튼 소스 공유 합니다. + 무료 소셜미디어 아이콘 세트 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

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


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

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

신고