시험 전에 책상 정리만 열심히 하는 아딸라가 다시 왔습니다 - ;

공부하려고 하면 여기 저기 지저분한 데가 눈에 띄고 꽃도 꽂고 싶고 메모지도 예쁜 걸로 바꾸고 싶어하는 여학생이 바로 공부못하는 학생 - 포스팅만 하려고 하면 여기저기 눈에 걸기적거리는 데가 보여 계속 만지고 또 만지고...흑...ㅜㅠ 별로 바람직한 블로거가 아닙니다만, 그래도 힘들여 하나 팠는데 공유하려고 하는 착한 블로거가 저 -

자... 지금 이 블로그 하단을 한번 봐 주시기 바랍니다. 맘이 바뀌어 다시 삭제해버릴 지도 모르므로 캡쳐 본을 하나 올려 두지요.

 

 

애드 디스 버튼입니다. 주황색  +Share 버튼이 안 보인다구요? 예, 제가 소스에서 지워서 그렇습니다. 한 두개 지울 수도, 몇 개 다른 걸로 넣을 수도 있습니다. 제일 왼쪽편의 페이스북 버튼은 보내기 버튼입니다. 자기 페이스북 계정에 담벼락에 붙일 수있는 게 '보내기'라는 거죠. 그리고 그 옆 메일모양 옆에 있는 것이 제가 전에 소개해 드렸던 졸리프린트입니다.  애드디스 사이트를 둘러 보니까 설정을 마음대로 할 수가 있더라고요.

그런데 제가 이 애드디스를 붙였다가 떼었다가 하는 이유는 이 애드디스 버튼이 익스플로러 구버전에서는 사라진다는 이유때문입니다. 버전 8 이하에서는 안 보입니다. 애드디스 홈페이지 설명으로는 6 이하에서 안 보인다고 하던데 8 이하에서 위에 믹시바나 뷰바나 뭐든지간에 상단바가 하나 걸쳐져서 들어오면 애드디스 버튼이 안 보입니다. 그 칸이 휑하니 한 줄 여백으로 나오는 것이 아니라 원래부터 그 버튼들이 없었던 것처럼 그 자리 자체가 없어져 있습니다.

그래서 수동으로 하나씩 버튼을 설정했다가 다시 애드디스버튼을 붙였다가 하고 있습니다. 졸리 프린트랑 메일 보내기등 깜찍한 기능들이 눈에 삼삼해서요.

오늘은 또 어떤 장난질을 쳤냐 하면요 - 티스토리나 다음블로그에 있는 "SNS 보내기 설정 버튼' 요 - 그거를 없애지 못하는 이유가 미투 보내기랑 페이스북 보내기 기능때문이었거든요. 좋아요 버튼은 좋아요만 되지 보내기가 안되니까요. 그리고 다음 쪽과 네이버 쪽을 연결시켜 주는 게 저 미투 버튼이잖습니까?

SNS 보내기 버튼SNS 보내기 버튼

만약 미투 버튼이랑 페이스북 보내기 버튼만 추가될 수 있다면 저 SNS 보내기 플러그인은 굳이 쓸 필요가 없다는 거죠 -

많은 분들이 뷰 박스 위에다가 추천과 구독 유도글을 적기도 하는데 아무래도 그런 글과 뷰 추천 박스가 조금 멀리 떨어지다 보면 추천 버튼에 대한 집중도도 떨어지게 마련이구요. - 나름 머리굴리고 있는 중 ;; -

그래서 오늘은 두 가지 작업을 해 보겠습니다.

먼저 미투 버튼을 만들고 -
두번째 이것을 마치 애드디스와 원래부터 하나였던 마냥 예쁘게 한 줄로 줄을 세워 보는 작업이 되겠습니다.

먼저 미투 버튼부터 소스를 구해야죠 -


 


미투 버튼 설치하기

 

http://me2day.net/  여기 가셔서요 -

1. 미투데이 로그인 - 화면 상단 바 눌러서 환경 설정 선택(혹은 미투플러그인) - 환경 설정 항목들 중 맨 아래의 소셜 플러그인 을 선택 - 소셜 플러그인 활성화 - 사용하고자 하는 도메인 입력 (http://atala.tistory.com 처럼 풀 도메인을 적어줍니다) - 그 다음 코드를 받으러 갑니다. 바로 가기가  아래, 클릭 -

미투버튼 플러그인 설치하기미투버튼 플러그인 설치하기

 

플러그인 설치하기 누릅니다.

 

미투버튼 코드받기미투버튼 코드받기

 

제대로 플러그인을 설치했다면 다음이 나올 것입니다.

 

 

로그인하지 않고 플러그인설치가 안되었다면 더보기 안의 화면을 볼 것입니다. 위에서 웹페이지 URL은 위처럼 http:// 를 포함한 전체 주소를 다 적어 줍니다. 일단 복사해서 메모장에 넣어 두세요.

 

이걸로 끝난 게 아니라 <head> 안에다가 다른 소스 두개를 더 넣어야 됩니다. 메타 소스와 스크립트 소스, 2개입니다.

위 소스를 보여주는 화면 아래 쪽으로 내려가 보면 다음이 보입니다.


이게 메타소스입니다. 옵션입니다. 안하셔도 됩니다.  위의 메타소스 아래 내려가보면 아래와 같은 스크립트 소스 부분이 보입니다. 이 두개를 붙여야 하는데요, 스크립트 소스 먼저 붙이고 그 아래 메타소스를 붙입니다. 어디다 붙이냐면요, <head> 다음에 붙입니다.




1) script 소스는 긁어 복사한 뒤에 head 뒤에다가 붙입니다. 2) 미투 메타데이터 코드 위에 붙여야 됩니다.


메타소스 수정하는 법 :  content 안에는 제 블로그의 메세지^ ^;; 가 있구요, 그 아래에는 태그로 쓸만한 것을 쉼표로 연결해서. 안 쓰고 공란으로 둬도 되요. 그리고 그 아래에는 블로그에다가 대문 사진올려두든지 아니면 프로필 사진있으면 그것 주소를 저렇게 붙여 넣으면 됩니다.


 위의 두 개를 붙인 다음 미투버튼을 붙여야죠. 앞서 메모장에 복사해 두었던 미투버튼 플러그인 소스를 붙이고 싶은 부분에 넣습니다. 본문 위에 두거나 본문 아래에 두거나 -

일단 위 스크립트 소스만 먼저 붙여 두시고요,  메모장의 미투 소스는 잠깐 놔 두세요. 애드디스와 나란히 붙일 거니까요.
 

애드디스 버튼 설치하는 방법은 여기 있습니다. ->    SNS 공유 통합버튼 AddThis 를 쓰면 뭐가 좋나요?



 

미투 버튼과 애드디스 나란히 두기



테이블을 짜서 두 개를 둘 겁니다. 두 개 나란한 테이블을 짠 뒤 애드디스는 오른쪽으로 정렬하고 미투버튼은 왼쪽으로 붙일 거에요 

 <table width="본문폭" border="0">
<tbody><tr>
<td align="right">

애드디스버튼들
</td>
<td align="left"> 

미투버튼
 </td>
</tr>
</tbody></table>

애드디스버튼들 위의 right는 오른쪽으로 본문내용을 붙이는 거고 미투버튼 위의 left는 왼쪽으로 붙인다는 뜻이지요. 어떤 식인지 테두리 border를 1로 하고 보여드리겠습니다.

 
애드디스 버튼   미투 버튼 

위의 미투버튼 자리에는 아까 메모장에 붙여 두었던 그 버튼 소스를 넣을 거예요.  애드디스 버튼 소스를 살펴 봅시다.
 

 <!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style" style="float:right; margin-right:9px">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_email"> </a>
<a class="addthis_button_joliprint"> </a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f4af8b0473cd657"></script>
<!-- AddThis Button END -->

제가 임의로 바꾼 부분들이 굵은 글자로 되어 있습니다. 페이스북보내기버튼 추가했구요, 졸리프린트 버튼을 추가했습니다. 메일버튼도 넣었어요.

그리고 맨 첫줄의 소스요. 원래 애드디스 버튼 홈페이지의 소스는 첫 줄이 다음입니다.

<div class="addthis_toolbox addthis_default_style ">

이건데 제가 뒤에 style="float:right; margin-right:9px" 를 붙였습니다.  div 안에서도 다시 오른쪽으로 붙으라고 float:right 를 붙였구요, margin-right:9px 는 그 옆의 미투버튼과 딱 달라붙지 말라고 살짝 띄운 것입니다. (구글 추천이 하나도 없을 때는 붙어 보이지 않으나, 버튼 안에 숫자가 생기기 시작하면 달라붙습니다.)

그리고 테이블 소스의 맨 첫 줄 '본문폭'을 봐 주세요. 제 블로그 본문폭은 800 입니다. 여기서 800 으로 기입해 넣으면 버튼들이 약간 오른쪽으로 치우치게 되구요. 숫자가 작아질수록 조금씩 왼쪽으로 움직입니다. 현재 위치는 730으로 셋팅해 둔 상태입니다. 미리보기 보시면서 조금씩 조정하시면 됩니다.

전체 본문폭 안에서 유동적으로 움직일 수 있게 되어 있는 거라서 혹 트윗이 만단위가 넘어가고 (헉 ;;) 좋아요가 수만단위의 숫자가 되어서 가로폭이 넓어진다고 하더라도 테이블이 깨질 위험은 없습니다. 괜한 걱정 미리 한다구요?ㅎㅎ

제 소스 한번 보여드리고 첨부 파일로도 올려 드립니다.
 

 
<br></br><!- 믹시박스와 간격을 두기 위한 줄바꿈-->

<table width="730" border="0">
<tr>
<td align="right">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" style="float:right; margin-right:9px">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_email"> </a>
<a class="addthis_button_joliprint"> </a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <!--이 다음의 쉐어버튼줄은 삭제했음-->
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f4af8b0473cd657"></script>
<!-- AddThis Button END -->
</td>
<td align="left">
<!--미투버튼-->
<me2:metoo profile_images="off" color="dark" layout="small" pingback="unchecked" href="http://atala.tistory.com" plugin_key="z-KQTTasTveAvpQncAWDAA"></me2:metoo>
 </td>
</tr>
</table>

 

사실 제가 div 에 관해 잘 모릅니다. 혼자서 이리 저리 만지다가 괜찮은 결과물이 나온 거라 이것보다 더 좋은 방법이 있을 수도 있어요. ^ ^;;



부록으로 세 개 소스를 더 공개합니다.

 

■ 본문 최 상단, 뷰 애드 옆에 애드디스 버튼을 둘 때의 소스

 

뷰 애드 소스 맨 윗줄을 다음으로 교체합니다.

<div style="width:528px;height:60px;margin: 0 0 0 +3px;float:left">

width 조정하시구요, height가 높아질수록 본문과의 간격이 더 띄워집니다.

 

■ 미투 버튼 없이 애드디스 버튼만 가운데 아닌 어느 부분에 두고 싶을 때

카테고리 박스 위에 두고 싶을 때 이걸 씁니다. 광고 상자 위에 두다 보면 아무래도 헛클릭질이 생길 것이고 단정해 보이지 않으니 약간 오른쪽으로 옮기는 게 좋거든요. 이것도 소스 맨 첫 줄만 다음으로 바꿉니다.

<div class="addthis_toolbox addthis_default_style" style="width:300px; margin-left:260px">

왼쪽에서 띄우기하는 방식으로 원하는 위치에 둡니다. 260보다 커지면 왼쪽에서 더 띄워지겠지요. width는 버튼들이 들어갈 전체 폭인데 너무 좁아지면 버튼들이 세로로 겹쳐져 버립니다. 너무 넓으면 본문 폭에 꽉 차서 버튼 상자(div)가 움직일 여분 공간이 없으니 미리보기 보시면서 잘 조절하셔야합니다.


미투 버튼 없이 딱 정중앙에 두고 싶을 때

뷰 추천박스와 믹스 박스 사이에 둔다든지, 아님 추천 박스 아래 두고 그 다음 줄과 두 세 줄 이상 떨어지게 둬서 가운데에 두는 게 낫겠다 싶을 때가 있을 겁니다.

역시 첫 줄을 바꿉니다.

<div class="addthis_toolbox  addthis_default_style" style="width:200px; margin:0 auto">

위의 모든 소스들을 첨부파일로도 올려 드립니다.

애드디스버튼정렬하는몇가지방법.txt

 

이걸 뷰로 올려야 되나 마나 좀 고민을 했는데요 ;; 저로서는 송고해봐야 별 재미가 없지만 ( 재미없는 글이잖아요. ㅎ) 송고해두면 혹 필요하셨던 분들 찾아 보는 데 도움될까 하고 올려 봅니다. -  ^ ^;; 추천버튼이 옆에 붙어 있는 글은 뒤로 잘 안 빠진다고 하더라고요. 추천도 많이 해 주시면 더 눈에 잘 띌 수도 있어요 - ㅎ

 



   
포스팅에 호감이 가신다면 구독하실 수도 있습니다!
        메일로 구독하기 메일구독방법안내 한RSS로 구독하기 피드버너로 구독하기 iGoogle or 구글리더로 구독하기 myYahoo에 추가하기 트위터 네이버 이웃추가
Posted by 아딸라

댓글을 달아 주세요

  1. 어설프군 YB 2012.03.14 23:02 신고  댓글주소  수정/삭제  댓글쓰기

    아딸라님.. 혹시 IT 계통에 종사하셨었어요?
    제 글에 달린 댓글에도 답드렸지만.. 이건 정말 IT 블로거의 포스가 느껴져요.
    이정도로 스킨 건드는 일반 블로거는 거의 못봤거든요.

    IT 블로깅하는 분들중에는 좀 보이긴 했지만요. ㅎㅎ
    암튼 대단하시다는.. (개인적으로 미투는 잘 이용안해서 미투 이야기는 안할께요0

    • 아딸라 2012.03.15 00:22 신고  댓글주소  수정/삭제

      아..IT업계에는 종사 안했어요.ㅎ
      옛날 PC 통신 시절 나우누리의 초대 통신작가로 있었던 적이 - 그 때 한 IT 잡지에 인터뷰 기사 올라간 적은 있지요.ㅎ 그게 저와 IT와의 유일한 인연 -

      그리고 - 스킨 건드는 건 아마도 아주아주 옛날 홈페이지 한번 만들었던 것 때문에 살짝 눈이 틔인 거겠죠.
      베개해도 될만한 두꺼운 책을 본다고 몇 번씩이나 아침 동이 트는 걸 보고 잠들었던 기억이 있답니다.ㅎ 뭐 하나 빠지면 지치도록 하기 때문에 ^ ^;;
      근데 저 소스들, 괜찮은 거 맞죠? 이리 저리 검색하면서 나름 응용해 본거거든요.

  2. 더공 2012.03.15 10:43 신고  댓글주소  수정/삭제  댓글쓰기

    전문가의 포스!!

  3. HappyAllyson 2013.07.01 23:27 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요,
    정말 도움이 많이 되어서 유용하게 사용중입니다.
    궁금한점이 있는데....

    1. 하라는대로 하여 한줄로 정열해서 본문 상단에 달았는데, 미투버튼이 두개가 떠요. 이유를 잘 모르겠습니다.
    2. 아딸라님처럼 본문 상단에 달경우, 믹스버튼 아래 카테고리글 위에 달려면 HTML 편집에서 어디에 껴 넣어야 하나요?
    아무리 찾아 봐도 못찾겠어요. 자꾸 카테고리글 아래에 달리네요. ^^
    3. 그리고 마지막으로 옆에 VIEW ON버튼 따라다니는데 그건 어떻게 하나요?

    제가 너무 많은 질문을 하였나싶어 죄송하긴 한데, 너무 잘 하셔서 한꺼번에 질문을 이렇게 던져보네요.
    여러모로 새로운 것도 배우고 도움이 되었습니다.
    감사합니다.

    • 아딸라 2013.07.03 17:43 신고  댓글주소  수정/삭제

      미투버튼이 두개가 뜨는 건 미투버튼 소스가 두 번 들어간 이외에는 이유가 없는데;; 소스들을 찬찬히 다시 살펴 보세요. me2 소스가 중복해서 들어갔을 가능성이 제일 높습니다.

      카테고리 글 더보기 위에 있는 건 - 일단 카테고리 글 더 보기 위치가 원래 저기 있는 게 아닌데 제가 위치를 저기로 바꾸어서 그렇습니다.
      '카테고리 글 더보기 위치 변경 소스" 로 검색해 보시면 바꾸시는 팁이 나와 있을 겁니다.
      div class="author" <- 이 위에 카테고리 글 더 보기가 있구요, 그 카테고리 글 더 보기 위에 addthis 버튼들이 놓여지게 됩니다.

      추천 버튼 따라다니는 걸 플로팅 버튼이라고 하는데 댓글로 설명하기엔 너무 길어 -

      다음 검색에서 view 추천 버튼 플로팅 - 이라고 검색하시면 자세한 소스들이 위치 설명과 함께 나와 있습니다.

      하나만 찾아 봐도 - http://clason.tistory.com/192 여기도 있군요.

      html 소스들을 잘 모르시면 처음에 막막하실 수 있습니다. 하지만, 하나씩 천천히 끈기를 가지시고 찬찬히 보시면 쨘~ 하고 블로그에 뭔가가 나타나고 달라지고 그렇게 될 겁니다. ^ ^ 저도 검색해 가며 하나씩 바꾸었습니다. 아주 기초적인 지식밖에 없었거든요.

    • HappyAllyson 2013.07.03 22:38 신고  댓글주소  수정/삭제

      친절한 답변 감사합니다.
      조금한 마음 접고, 차근차근 다시한번 살펴 보겠습니다. ^^

      플로팅버튼은 그렇잖아도 어제 돌아다니다 보니 눈에 들어와서
      이거구나 싶어 달아보았습니다. ^^

      처음부터 아무 지식없이 시작해서 하나 하나 터득하는 재미도 솔솔하네요. 제게 또 한걸음 나아갈 수 있도록 도움주셔서 감사해요. ^^