네이버 블로그를 이용하다보니까 포스팅을 3장이상 열어보면 우측하단에 이웃추가 버튼이 자동으로 나온다. 흥미로와서 혹시 자바스크립트 코드가 없을가 서핑을 하다가 어떤 블로거님이 친절히 올려주신 자바스크립트 코드가 있어서 디자인만 입혀서 만들어 봤다.
<body> 태그 안에 붙여넣기 하되 일부 코드의 수정이 필요하다.
movetag.txt<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> #menu{ position: absolute;
left: 50%; top: 660px; /*상위높이*/ width: 200px; height: 120px;
vertical-align:middle; margin-left: 500px; /* 좌측폭 위치*/ border: 1px solid rgba(204,204,204,1); } <!-- #meue 포지션은 상대값을 줌 페이지 중간에서 왼쪽 520px 마진을 줘서 오른쪽으로 이동시키고--> <!-- 위에서 133px 이동 시키고 우측베너 폭은 100px --> <!-- #index_ 은 스크롤 만들려고 삽입 --> </style> <script type="text/javascript"> $(function(){
var menuTop = parseInt($("#menu").css("top")); // 우측배너 위쪽 위치값을 menu_Top 에 입력 즉 133px
$(window).scroll(function() { $("#menu").stop().animate({"top": $(window).scrollTop()+menuTop+"px"}, 500); });
// 스크롤이 움직일 때마다 함수 실행. 스크롤이 움직일때 마다 #menu 의 top 위치을 윈도우창 위에서 133px 아래로 위치하도록 0.5초의 속도로 }); </script> <div id="menu" align=center>
<table> <p vertical-align="middle"> <tr align="center" > <img src="http://cfs.tistory.com/custom/blog/257/2575578/skin/images/infologonew.png" width=20px > 이웃추가를 하시겠습니까?
</tr> <tr> <td align="center">IT정보세상 ~</td><td> <a href="http://section.blog.naver.com/connect/PopConnectBuddyAddForm.nhn?blogId=dorose2000" onclick="window.open(this.href); return false" title="it 정보세상~ 구독하기"><img src="http://cfs.tistory.com/custom/blog/257/2575578/skin/images/ne-c.jpg" alt="블로그 이미지" width=100px /></a> </td> </tr> <tr><td>Tistory추가</td><td><a href="http://itinfodorose.tistory.com/toolbar/popup/link/" onclick="window.open(this.href); return false" title="it 정보세상~ 구독하기"><img src="http://cfs.tistory.com/custom/blog/257/2575578/skin/images/ne-d.jpg" alt="블로그 이미지" width=100px /></a></td></tr> </p> </table>
</div> <div id="index_"> <!-- 스크롤만들기위해 넣음 --> </div> |
다른 블로거의 "우측베너" 플로팅베너 스크립트를 응용하여 이웃추가 베너를 만들었기 때문에 다소 미비하게 되었지만, 혹시라도 필요한 분이 계시다면, txt파일을 첨부하였으니, 내려받아 사용하시면 되고, 핑크색으로 마킹한 부분은 네이버 "이웃추가"와 티스토리 "내 링크에 추가"부분의 링크 주소니까 각자 자신의 아이디만 바꾸어 사용하시면 될 것이라 본다. 혹시 그 이미지도 필요한 분들을 위해 아래 이미지 파일도 첨부해 봤다.
티스토리-블로그이미지2.zip그리고 링크주소는 각자 네이버블로그 이웃추가 or 티스토리 내 링크에 추가 버튼위에 마우스를 올리고 "우클릭 -> 링크주소복사" 를 눌러서 복사한후 붙여넣기 하시면 된다.
"X" 눌러 close 하는 방법은 다음에 포스팅 하겠다.
'블로그정리tip' 카테고리의 다른 글
| 구글애드센스광고를 달았는데 다른회사광고(TGAD)가 나올 때- (1) | 2017.04.06 |
|---|---|
| [PIN 발송] 구글애드센스 - 주소를 확인하지 않아 지급이 보류 중입니다. (0) | 2017.03.30 |
| [구글애드센스] 블로그에 광고달기 - 구글애드센스 심사 (0) | 2017.03.18 |
| [화면캡처앱]스넥잇-snegit (0) | 2017.03.03 |
| 블로그에 배너광고 달아보기 (0) | 2017.01.30 |
