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

 

 

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

 

 

 

 

 
 
 
 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 좋은 정보 잘 보고 갑니다 감사합니다.

    2013.10.24 20:26 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 감사합니다 좋은글! 그런데 저는 왜 손가락에 숫자표시가 안될까용 ㅠㅠ

    2013.10.30 15:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 손가락에 숫자가 표시가 안되는 이유로는 두가지가 있을 수 있는데..
      첫번째 - 위의 소스를 입력하는 위치가 잘못됐을 경우
      두번째 - 주소 형식이 글제목으로 설정되어 있을 경우

      첫번째는 위의 글을 잘 읽어보시면 소스 넣는 위치가 나오니 수정하심 되구요.
      두번째일 경우 역시 위에 설명이 나와있으니 자기 블로그 주소 부분을 올바르게 수정하시면 됩니다.

      혹시나 두 가지 경우 모두 아니라면, 소스에서 수정이 제대로 안되서일테구요.

      2013.10.30 16:04 신고 [ ADDR : EDIT/ DEL ]
  3. 좋은정보 잘 보고갑니다~즐건하루되세요~^^

    2013.11.14 11:38 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 좋은정보 감사합니다. 설명이 잘되있어서 금새 적용할 수 있었습니다. 다시한번 감사드려요^^

    2014.03.03 15:36 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 다 되는데 다음뷰는 오류가 뜨네요 ㅜㅜ 왜그럴까요
    아무튼 좋은 정보감사해요~!

    2014.03.11 16:03 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 다음뷰 에러는 소스가 잘못 입력되서 그런게 아닐까요?
      소스 입력 위치가 다르면 에러는 안나고 숫자만 표시가 안되거든요.

      2014.03.11 20:20 신고 [ ADDR : EDIT/ DEL ]
  6. 다음뷰 신버전으로 하면 느낌표 그림이 뜨면서 손가락이 안보이네요 ㅜㅜ
    다른 블로그랑 같이 참고하면서 고쳐보려고 노력중입니다 ㅎㅎ

    2014.03.11 20:40 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 안녕하세요 좋은글 잘 보고갑니다^^
    이거 혹시 HOME화면에서도 보이게는 못하나요??

    2014.03.13 16:56 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 홈에서도 보일수는 있지만 홈은 추천수를 보여줄 수 있는 글이 아니니까 추천수는 표시가 안되겠죠?

      2014.03.13 18:31 신고 [ ADDR : EDIT/ DEL ]
  8. 손꾸락 고정시키는 방법 찾고 있었는데, 가장 설명이 잘 되어 있네요..
    Y앤S 님 블로그에 있는 글들은 전부 내용이 좋은 것 같습니다. ^^

    2014.03.23 09:00 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 깍쟁남

    좋은정보 감사합니다^^

    2015.12.06 23:35 [ ADDR : EDIT/ DEL : REPLY ]