티스토리에 SNS, 이웃추가, 구독, 다음뷰 손가락 버튼 달기 (따라다니는 레이어, 떠있는 레이어) by Y

 

블로그에 장착한 떠있는 레이어

 

 

9월 중순쯤 기존 애드센스 광고 위치를 싹 바꾸는 최적화를 시도했었다.

모바일 광고 위치까지 바꾸다보니 550개나 되는 글을 수정해야했는데 S와 둘이 합쳐 6~8시간은 걸리는 대공사였다.

이때 밤부터 새벽까지 졸면서 작업했더니 광고 소스 뿐만 아니라 본문까지 복사해서 30~40여개 글에 다 붙여지는 대참사까지 일어났었고(수습하는데도 진땀뺐다는;;) 아직까지 광고가 빠져있는 페이지도 가끔 보인다^^;

 

광고 최적화의 이유야 당연히 수익(즉~돈!!) 때문이었다.

블로그 투데이가 4000명일때나 8000명일때나 크게 달라지지 않는 지지부진한 애드센스 수익을 보고 원래 그런갑다~라고 편하게 생각하고 있다가 이웃 블로그의 수익 공개에 깜놀한 후 남들 다 한다는 광고 위치로 바꾼 것이다. (결과적으로 이전보다 수익이 늘어난건 사실~!)

 

그리고나서 왼쪽 사이드 광고를 떼어낸 자리에는 sns, 구독, 추천 아이콘 등 블로그에 필요한 기능들을 따라다니는 레이어에 넣어 눈에 잘 띄도록 추가하기로 했다.

내가 소스를 알아보고 S는 이미지를 만들기로 하고 먼저 sns 소스를 알아보기 시작했는데, 웬걸 이게 아무데나 있는게 아니였다 ㅠ

 

내가 원하는 소스는 위젯이나 플러그인으로 본문 하단에 자동으로 삽입되는 내 sns에 내 글을 올리는 그런 게 아니라, 내가 원하는 그림을 사용해서 남들이 우리 블로그 글을 자신의 sns에 퍼가는 버튼들을 내가 원하는 위치에 넣는 소스를 원했기에 더 찾기가 어려웠다.

결국 어느 웹사이트의 게시판에서 고수분이 남기고 가신 트위터와 페이스북 소스를 겨우 얻을 수 있었다능;;

그리고 구독하기와 이웃추가하기 소스는 블로그의 html에서 기존 것을 복사만하면 되었기에 금방 준비가 되었다.

 

하지만!!! 다음뷰 손가락 추천 아이콘 소스 때문에 2주 동안이나 계획이 미뤄지게 됐다.

플래시 방식이든, 최근 iframe 방식이든 소스 찾는건 쉬웠는데, 그 소스를 정확하게 넣어봐도 이상하게 추천수가 표시가 안되는 거였다. 남들은 다 되는데 왜 나만 안되는건지 진짜 답답했다ㅠ

이유는 오늘에서야 알게 되었는데 소스를 넣는 위치가 잘못되어 제대로 작동이 안되는 거였다.

알고보니 너무 간단한 거라서 좀 허탈하다능;;

 

 

 

----------------------------------------------------------------------------------------------------------------------------------------------------

 

 

 

1. 이미지 준비하기

 

 

다음뷰 손가락은 이미지가 아니니 소스만 넣으면 되고, sns 이미지는 'sns 아이콘'이라고 검색하면 크기별로 수두룩하게 있으니 맘에 드는 이미지를 고르면 된다. 구독하기 이미지도 마찬가지로 검색하면 쉽게 이미지를 찾을 수 있다.

 

센스있는 sns 아이콘 모음

http://jwanna.blog.me/10156355195

http://riohworld.com/60193505274

 

 

이미지가 준비되었다면 [관리]-[꾸미기]-[HTML/CSS 편집]의 [파일 업로드] 화면에서 [추가] 버튼을 눌러 이미지를 모두 업로드한다.

 

 

 

 

 

2. 소스 입력하기

 

이미지가 준비됐다면 레이어를 만들어 각 버튼을 넣고 스크롤바를 내려도 항상 같은 위치를 고수하는 따라다니는 레이어를 만들어보자.

 

 

[관리]-[꾸미기]-[HTML/CSS 편집]의 'skin.html'에서 '［##_article_rep_desc_##]'를 찾은 후 앞에 아래 소스를 입력한다. '［##_article_rep_desc_##]'는 글의 본문을 의미하는데 이 앞에 넣어야 블로그 글이 보일 경우에만 버튼들이 표시되고, 제대로 작동하게 된다.

 

 

<div id="leftmenu" style="width:가로크기; height:세로크기;">   <!--다음뷰 손가락 추천 (옛날 버전) --> <object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=자기블로그주소/［##_article_rep_id_##]" width=67 height=80><param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://yslife.tistory.com/" /></object><br>   <!--다음뷰 손가락 추천 (최신 버전) --> <iframe width="72" height="90" src="http://api.v.daum.net/widget2?nurl=http://자기블로그주소/［##_article_rep_id_##]" frameborder="no" scrolling="no" allowtransparency="true"></iframe><br>   <!--트위터에 글 보내기--> <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="아이디" target="_blank" title="트위터에 글올리기"><img src="이미지 주소" width="이미지가로크기" height="이미지세로크기" border="0"></a> <br>   <!--페이스북에 글 보내기--> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php" target="_blank" title="페이스북에 글올리기"><img src="이미지 주소" width="이미지가로크기" height="이미지세로크기" border="0" alt="facebook에 글올리기"></a> <br>   <!--구독하기--> <a href="［##_rss_url_##]" onclick="window.open(this.href); return false" title="［##_title_##] 구독하기"><img src="이미지 주소" width="이미지가로크기" height="이미지세로크기" border="0"></a> <br>   <!--이웃추가(링크)하기--> <a href="#" title="［##_title_##] 이웃추가하기" onclick="window.open('/toolbar/popup/link/','','width=400,height=190');"><img src="이미지 주소" width="이미지가로크기" height="이미지세로크기" border="0"></a> </div>

 

 

빨간색 부분은 모두 자신의 블로그 주소에 맞게 고쳐야하는 부분이다.

예를 들어 'yslife.tistory.com'처럼 본인의 블로그 주소를 넣으면 된다.

 

여기서 잠깐~!!

만약 블로그 글주소가 글번호가 아닌 글제목으로 설정되어 'http://yslife.tistory.com/entry/덱스터-이야기'와 같다면 '자기블로그주소/［##_article_rep_id_##]' 부분을 '자기블로그주소［##_article_rep_link_##]'처럼 변경해야 제대로 추천수가 표시된다.(우리 블로그는 문자 주소를 사용하다가 숫자 주소로 바꾸는 바람에 초반 글에서는 추천수가 제대로 적용이 안된다;;)

숫자 주소/문자 주소를 변경하는 곳은 [관리]-[환경설정]-[기본 정보]-[블로그 정보]이다.

 

파란색 부분은 앞에서 업로드한 이미지의 주소를 입력해야 한다.

업로드된 이미지의 이름이 'facebook.png'라면 이미지의 주소는 './images/facebook.png'가 된다.

 

녹색 부분은 레이어의 크기와 이미지의 크기를 입력하는 부분으로,

레이어 전체 가로/세로 크기와 업로드한 이미지의 가로/세로 크기를 입력하면 된다.

 

 

 

다음뷰 손가락 버튼은 옛날 버전과 최신 버전 중에서 마음에 드는 걸 골라서 하나만 입력한다.     옛날 버전   최신 버전

 

 

 

이어서 앞에서 만든 'leftmenu' 레이어의 위치를 지정하기 위해 [관리]-[꾸미기]-[HTML/CSS 편집]의 'style.css'에 아래 소스를 입력한다.

 

 

#leftmenu { position:fixed; left: 48%; margin-left:-510px; top: 320px; _position:expression('absolute'); _left: expression(offsetParent.scrollLeft+50+'%'); _top: expression(offsetParent.scrollTop+148+'px'); z-index:10; }

 

 

여기서 블로그에 맞게 수정해야 할 부분은 'margin-left'와 'top' 값이다.

margin-left는 레이어의 가로 위치로 양수값을 입력하면 화면의 중앙에서 오른쪽으로 위치하고, 음수값을 입력하면 왼쪽으로 위치한다.

top은 레이어의 세로 위치로 수치가 커질수록 레이어가 아래에 위치하게 된다.

 

 

 

위의 소스는 아래 파일을 다운받아 쉽게 이용할 수 있다.

 

소스.txt