시험 전에 책상 정리만 열심히 하는 아딸라가 다시 왔습니다 - ;
공부하려고 하면 여기 저기 지저분한 데가 눈에 띄고 꽃도 꽂고 싶고 메모지도 예쁜 걸로 바꾸고 싶어하는 여학생이 바로 공부못하는 학생 - 포스팅만 하려고 하면 여기저기 눈에 걸기적거리는 데가 보여 계속 만지고 또 만지고...흑...ㅜㅠ 별로 바람직한 블로거가 아닙니다만, 그래도 힘들여 하나 팠는데 공유하려고 하는 착한 블로거가 저 -
자... 지금 이 블로그 하단을 한번 봐 주시기 바랍니다. 맘이 바뀌어 다시 삭제해버릴 지도 모르므로 캡쳐 본을 하나 올려 두지요.
애드 디스 버튼입니다. 주황색 +Share 버튼이 안 보인다구요? 예, 제가 소스에서 지워서 그렇습니다. 한 두개 지울 수도, 몇 개 다른 걸로 넣을 수도 있습니다. 제일 왼쪽편의 페이스북 버튼은 보내기 버튼입니다. 자기 페이스북 계정에 담벼락에 붙일 수있는 게 '보내기'라는 거죠. 그리고 그 옆 메일모양 옆에 있는 것이 제가 전에 소개해 드렸던 졸리프린트입니다. 애드디스 사이트를 둘러 보니까 설정을 마음대로 할 수가 있더라고요.
그런데 제가 이 애드디스를 붙였다가 떼었다가 하는 이유는 이 애드디스 버튼이 익스플로러 구버전에서는 사라진다는 이유때문입니다. 버전 8 이하에서는 안 보입니다. 애드디스 홈페이지 설명으로는 6 이하에서 안 보인다고 하던데 8 이하에서 위에 믹시바나 뷰바나 뭐든지간에 상단바가 하나 걸쳐져서 들어오면 애드디스 버튼이 안 보입니다. 그 칸이 휑하니 한 줄 여백으로 나오는 것이 아니라 원래부터 그 버튼들이 없었던 것처럼 그 자리 자체가 없어져 있습니다.
그래서 수동으로 하나씩 버튼을 설정했다가 다시 애드디스버튼을 붙였다가 하고 있습니다. 졸리 프린트랑 메일 보내기등 깜찍한 기능들이 눈에 삼삼해서요.
오늘은 또 어떤 장난질을 쳤냐 하면요 - 티스토리나 다음블로그에 있는 "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">
위의 모든 소스들을 첨부파일로도 올려 드립니다.
이걸 뷰로 올려야 되나 마나 좀 고민을 했는데요 ;; 저로서는 송고해봐야 별 재미가 없지만 ( 재미없는 글이잖아요. ㅎ) 송고해두면 혹 필요하셨던 분들 찾아 보는 데 도움될까 하고 올려 봅니다. - ^ ^;; 추천버튼이 옆에 붙어 있는 글은 뒤로 잘 안 빠진다고 하더라고요. 추천도 많이 해 주시면 더 눈에 잘 띌 수도 있어요 - ㅎ
'블로깅' 카테고리의 다른 글
크롬 쓰시는 분, 스마트폰과 PC 연동하실 수 있습니다. (0) | 2013.06.18 |
---|---|
같이 들으려고 벅스 뮤직 플레이어를 설치했는데... OMZ (13) | 2012.03.20 |
포스팅의 본문 상단을 조금 더 깔끔하게 시작하고 싶다면 ? (8) | 2012.03.14 |
태그 클라우드, 갑자기 먹통이 될 때 (17) | 2012.03.13 |
티스토리 글설정- 엔터키 br 과 p 의 차이점 (15) | 2012.03.13 |