빛과사람그리고나 :: '플로팅' 태그의 글 목록

블로그에 직접 광고소스 제작 플로팅으로 사이트로 이동시키기블로그에 직접 광고소스 제작 플로팅으로 사이트로 이동시키기

Posted at 2015. 3. 17. 22:19 | Posted in 〃 IT/〃 블로그정보
반응형

 내가원하는 이미지를 플로팅으로


 

 

제우측에 지금 보시면 플로팅으로 이미지가 하나 있습니다. 이것은 특정부분을 광고한다거나 광고소스를 넣은게 아니고 제가 만든 이미지를 우측에 넣어서 원하는 사이트로 링크를 건것입니다. 블로그에 이런식으로 특정사이트를 연결하고 싶다면 아래와같이 해보시면 됩니다.

 

 

 

이것인데 플로팅으로 계속 따라다닙니다.

 

 

우선 넣고자 하는 이미지를 만들어야 하는데 이미지를 만드는것은 생략하겠습니다. 이미지는 GIF나 PNG JPG등 원하는 이미지파일로 만드시면 되시고 플래쉬 형식으로 만드신다면 GIF로 당연히 만드셔야 할것입니다.

 

이미지를 만드셨다면 HTML로 이동하셔서 추가로 만든 이미지를 선택하여서 업로드 해주시면됩니다.

 

 

업로드 하셨다면 업로드하신 파일에 마우스를 대시고 오른쪽클릭후 속성으로 이동하시면 "주소(URL)" 부분이 있습니다. 해당 주소를 복사해서 메모장에 저장을 시켜놓습니다.

 

 

그리고 플로팅으로 띄우기위해서는 style로 이동하셔서 소스를 넣어주시면 됩니다.  해당소스는 아래 첨부파일로 넣어놓겠습니다.

 

 

 

 

위에 소스를 넣어주시면 되시고 위에 소스에서 아래부분을 위치에 맞게끔 수정해주시면됩니다.

 

right:45%; (오른쪽에서 얼마나 떨어질것인지)

top:40%; (위에서 얼마나 떨어질것인지)

margin-right: -670px; (블로그 중간을 기준으로 몇px을 우측으로 밀것인지)

 

이렇게 3가지 정도만 수정해주시면 됩니다.

 

 

수정하셨다면 사이드바로 이동하셔서 HTML배너출력 으로 하셔서 소스 하나를 더 넣어줍니다.


 

<div id="floatdiv">
    <ul>
         <a href='http://ansths.wix.com/jntnet' target='_blank'>

              <img src='http://cfs.tistory.com/custom/blog/120/1201388/skin/images/plot.gif?=2053688737' border='0' />

</a>


</div>

 

이것을 넣어주시면 되는데 아래 첨부파일로 넣어놓겠습니다. 위에 빨간색으로 해놓은 부분만 수정을 해주시면됩니다. 첫번째는 이동하고자하는 사이트의 주소이고 두번째는 업로드한 파일의 주소입니다.

 

 

이렇게 해주시면 자신이 원하는 소스를 생성하여 원하는 부분으로 이동을 시키실수가 있습니다. 감사합니다.

 

 

 

반응형

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

  1. 감사합니다. 덕분에 블로그에 활용할 수 있을 것 같습니다.

티스토리 플로팅 광고 본문에 겹치지않게 설치 정책위반조심할것티스토리 플로팅 광고 본문에 겹치지않게 설치 정책위반조심할것

Posted at 2014. 3. 5. 16:28 | Posted in 〃 IT/〃 블로그정보
반응형

본문을 안곂치게


 

언젠가 플로팅 광고에대하여 포스팅을 한적이 있습니다. 그때 적었던 내용은 플로팅광고를 픽셀로 지정을 하여 해상도가 좋은 모니터에서는 블로그본문이나 사이드바에 곂치지 않으나 해상도가 떨어지는 모니터에서는 곂쳐서 보일수 있는 위험성이 있었습니다. 그래서 이번에는 어떠한 해상도의 모니터에서도 본문이나 사이드바에 같이 곂쳐보이지 않게 하는 플로팅광고 소스를 올립니다.

 

* 주의 - 플로팅광고는 설치를할실때 항상 조심해야하며 본문을 가려서는 절대 안됩니다. 티스토리의 정책위반이며 애드센스 광고를 가리게 된다면 애드센스 위반입니다. 또한 광고 업체측으로 부터 플로팅 광고를 달아도 되는지 꼭 확인하시고 설치하시길 바랍니다. 허용이 된는곳도있고 x표를 달아야 되는곳도 있으며 플로팅자체가 안되는것도 있으니 꼭확인하시고 설치하시길 바라며 절대 본문을 가리거나 사이드바를 가리게 설치하시면 너무 위험한 행동이니 하지 마시길 바랍니다.

 

 

 

플로탱메뉴css.txt

 

위에 첨부해놓은 파일이 플로팅광고 소스이며 위의 소스를 HTML의 style.css 쪽에다가 넣습니다. 저는 나중에 알아보기 쉽게하기위하여 가장아래부분에 넣어 놓았습니다.  

 

 

 

 

광고소스.txt

 

위의 소스코드는 광고 소스를 넣는 코드입니다. 다운받으셔서 열게되면은 "광고소스"라고 적힌부분에 광고 소스를 넣습니다. 그리고 사이드바 메뉴로 가셔서 HTML배너출력을합니다. 거기에 붙여 넣어주시면 완료가 됩니다.

 

소스 넣는 부분은 여기까지며 위치수정에 대해 알아보겠습니다.

 

 

저의 모니터인 1600 * 900 해상도의 모니터입니다. 보시면 우측에 플로팅 광고가 떠있는 모습이 보입니다. 저상태에서 우측에서 더이상좌측으로는 넘어오지 않습니다. 이것은 위에 소스에 보시면  padding:-right: -670px; 이부분이 있습니다. 즉 모든 모니터의 중앙을 중심으로 오른쪽으로 몇 픽셀을 떨어지게 할건지 입니다. 그말은 아무리 낮은 해상도에서도 그모니터의 가운데를 중심으로 잡아서 우측으로 밀어내기때문에 낮은해상도에서는 아예보이지가 않게됩니다. 그리고 top:25%; 이부분은 모니터의 상단부분에서 몇퍼센트를 띄울건지입니다. 여기는 픽셀로 지정하시지 마시고 위처럼 퍼센트로 지정하시는게 훨씬좋습니다.

 

지금 위에 스샷은 가로를 요즘에 거의 찾아보기힘든 1024px 모니터로 줄인 모습입니다. 보시면 아시겠지만 광고가 보이지 않습니다. 아래부분에 우측으로 이동할수있어서 우측으로 당기면 있을거라고 생각하시지만 우측으로 당겨도 나오지 않습니다. 모니터의 해상도가 광고가 표시될수있는 총 픽셀에 못미쳐서 아예나오지가 않는겁니다.

 

이런식으로 플로팅을 설치하시면되시고 설치하시기전에 항상 제가 위에 적어놓았듯이 어디 부분에 위반사항이 있는건아닌지 꼭 확인하시고 설치하시길 바랍니다.

 

감사합니다.

반응형

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

  1. 첨부파일 코딩에 문제가 조금 있네요...

    margin:0;
    padding:-right: -670px;

    이 부분요..

티스토리 블로그에 플로팅광고달기 떠서 마우스따라다님티스토리 블로그에 플로팅광고달기 떠서 마우스따라다님

Posted at 2013. 7. 18. 17:01 | Posted in 〃 IT/〃 블로그정보
반응형

 

 

 

 

티스토리 떠다니는 배너 플로팅 광고를달아보자


 

광고들 아마다 다실겁니다. 이번에 포스팅하는거는 마우스스크롤에 따라 떠다니는 플로팅 광고 적용방법에 대해 포스팅해드리겠습니다. 아래 스샷에 보시면 적용한 화면입니다. 광고는 애드젯에서 퍼왔구요 위젯광고인데 원래 그거를 3개를 붙인겁니다. 3개가 하나처럼 마우스 스크롤에따라 움직입니다. 그럼 어떻게 적용하는지 알아보겠습니다.

 

 

 

 

 

우선 style.css 편집기로들어갑니다. 그후에

 

/* 떠다니는 메뉴 (Floating Menu) */

#floatdiv {
 
   position:fixed; _position:absolute; _z-index:-1;
    width:170px;
    overflow:hidden;
    right:11px; <-- 오른쪽에서 얼마나 떨어질지
    top:120px; <-- 위에서 얼마나 떨어질지
    background-color: transparent;
    margin:0;
    padding:0;

}

#floatdiv ul  { list-style: none; }
#floatdiv li  { margin-bottom: 2px; text-align: center; }
#floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; }
#floatdiv a:hover, #floatdiv .menu  { background-color: #5D5D5D; color: #fff; }
#floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; }

 

 

위의 코드를삽입합니다. 적용하실때 위에 색갈로 체크해놓은부분만 수정을 해주시면됩니다. 오른쪽에 배열을할껀지 왼쪽에할건지를 정합니다. 그리고 얼마나 떨어져서 적용을 시킬건지 입니다. 적용하시기 힘드신분들을위해 첨부파일로 해놓겠습니다.

 

플로탱메뉴css.txt

 

 

 

 

css 부분을 수정하셨다면 저장을하시고 사이드바 편집으로 갑니다. 그리고 HTML배너출력을 하셔서 수정을합니다.

 

 

<div id="floatdiv">
    <ul>
        광고소스

    </ul>
</div>

 

소스에다 위에와 같이 넣으시고 광고소스부분에 광고를 넣어주시면됩니다. 1개짜리 광고는 원광고소스 그대로 넣어주시면되고 저처럼 3개를 하신다면 3개의 소스를 연달아 넣어주시면됩니다. 간단하죠? 이것또한 첨부파일로 소스코드를 첨부해놓겠습니다.

 

광고소스.txt

 

위에 텍스트 파일받으셔서 광고소스부분만 수정을해주시면됩니다.

 

 

 

간단하죠? 직접해보시면 어렵지는 않을겁니다. 저도 보고 따라한거라서 좋은광고 많이들다시고 용돈벌이 잘되시길바랄께요.. 근데.. 이놈의 구글애드센스는 언제쯤승인을 해줄까요? 혹시 제블로그 보시고 이유를 아신다면 좀알려주시길바래요 ㅠㅠ 저도 사이드바에 구글달고싶습니다. 항상 컨텐츠불충분... ㅠㅠ

 

2013/07/05 - 티스토리 꾸미기 사이드바에 유튜브동영상 넣기

 

2013/07/05 - 티스토리 유튜브 동영상 고화질로 링크걸기

반응형

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기