티스토리 블로그 POSTER 스킨 꾸미기[2탄 : 소스적용 ]

 꿍스뿡이의 드림빌더 

티스토리 POSTER 스킨 꾸미기[2탄 : 소스적용]

안녕하세요. 꿍스뿡이입니다!

오늘은 지난시간에 이어 티스토리 POSTER 스킨을 직접 적용해보는 시간을 가져보도록 하겠습니다.

1. 티스토리 블로그 POSTER 스킨 꾸미기[1탄 : 레이아웃]

1. 새로운 블로그 개설

흠... 이번 포스팅을 위해 많은 고민을 했습니다 ㅇㅅㅇ

처음에는 지금 내 블로그 소스에다가 할까 했지만, 그렇게 되면 제가 설정한 환경들 때문에 따라하실때 더 혼란이 있을거 같아서 새로운 블로그를 만들었답니다.

첫 블로그를 만드신 분들은 해당사항이 안되실거 같고, 서브 블로그를 만드시는 분들은 참고하시면 좋을듯 합니다. 

계정에 진입하면 보이는 첫 화면에서 새 블로그 만들기를 선택합니다.

블로그 이름과 블로그 주소를 작성해 주신 후 개설하기를 클릭합니다.

개설하기를 클릭하면 다음과 같은 메시지창이 나타납니다. 

우린 블로그를 만들거니 확인을 눌러줍니다. 

와~ 참 쉬운 블로그 만들기! ㅎㅎㅎ

내 블로그가 만들어 졌습니다 ㅎㅎ 블로그가 어떻게 만들어 졌는지 볼까요?

내 블로그 바로가기를 클릭해주세요~

[휑한 나의 첫 블로그.jpg]

기본 블로그 입니다. 이 형식이 마음에 드시면 그대로 진행하시면 됩니다. 

그러나 이 글을 보시는 분들은 POSTER 스킨을 원하실태니 감상은 여기까지!

좌측 상단의 계정명을 클릭한 뒤 관리 버튼을 클릭합니다.

이제 POSTER 스킨으로 변경해봅시다.

2. 티스토리 POSTER 스킨으로 교체 (교체부터 CSS 적용까지)

위에서 관리버튼을 클릭하면 위와같은 블로그관리 화면이 나타납니다. 

여기서 꾸미기-스킨편집을 클릭해줍니다.

스킨편집을 클릭하면 위와같이 현재 사용중인 스킨이 나타납니다. 

우리는 현재 #1이라는 스킨을 사용하고 있고, 오른쪽에 있는 POSTER스킨으로 교체할 예정입니다.

POSTER 스킨의 ... 부분을 클릭하신 후 적용버튼을 클릭해주세요.

정상적으로 버튼을 클릭했을 경우 사용중인 스킨이 POSTER로 변경되어 있음을 확인할 수 있습니다. 

이제 본격적인 소스 작업을 진행해보도록 하겠습니다.

스킨편집을 클릭해주세요.

스킨편집을 클릭하면 오른쪽에 HTML, CSS, 파일업로드 버튼을 확인할 수 있습니다. 

그 중에서 CSS를 클릭합니다. 그런 후 CSS 소스코드를 제일 밑으로 내리신 후 

아래의 소스코드를 복사한 후 붙여넣기 해주세요.

/*스크롤 인디케이터 시작*/
.header {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #fff;
}
.progress-container {
  width: 100%;
  height: 4px;
  background: #f6f6f6;
}
.progress-bar {
  height: 4px;
  background: #6C6C6C;
  width: 0%;
}
/*스크롤 인디케이터 종료*/
/*왼쪽, 좌측 밑의 이미지 추가 시작*/
/*가로의 길이가 1510일때까지는 보여라*/
@media screen and (min-width:1500px) {
.main_ad {
		display:visible;
	  position: absolute;
    left: 0px;
    bottom: 80px;
    cursor: pointer;
    z-index: 11;
}
}
/*가로의 길이가 1511일까지는 보이지 말아라*/
@media screen and (max-width:1510px) {
	.main_ad {
		display:none;
	  position: absolute;
    left: 0px;
    bottom: 80px;
    cursor: pointer;
    z-index: 11;
}
}

/*왼쪽, 좌측 밑의 이미지 추가 종료*/
/*이웃추가버튼 추가 시작*/
@media screen and (min-width:500px) {
	.add_adBanner {
		display:visible;
	}
}
@media screen and (max-width:510px) {
	.add_adBanner {
		display:none;
	}
}

.add_adBanner ul {
 position: absolute;
    left: 10px;
    bottom: 22px;
    cursor: pointer;
    z-index: 12;
}
.add_adBanner li {
	margin : 0 0 0 0;
	padding : 0 0 0 0;
	border : 0;
	float : left;
}

/*이웃추가버튼 추가 종료*/

[복사할 CSS소스코드 입니다.]

CSS.txt

[추가 : 복사하면 일자로 붙여지는 현상을 확인하여 상단의 첨부파일을 추가합니다.'

소스코를 위와같이 붙여넣기 하신 후 적용버튼을 클릭해주세요.

정상적으로 적용을 마쳤으면 오른쪽의 파일업로드를 클릭해주세요.

btn_add_tistory.zip

그런후 상단의 압축파일에 있는 btn_add_tistory.png 이미지 파일을 다운받으신 후 

추가버튼을 이용하여 파일을 업로드 해주세요.

정상적으로 파일이 추가된것을 확인하셨다면 HTML 버튼을 클릭해주세요.

이제 본격적인 HTML 수정작업에 들어가겠습니다.

HTML 화면을 유지해주세요.

3. HTML 메뉴부분 - 구글번역 버튼 추가

위와같이 번역버튼을 추가하도록 하겠습니다.

모든 소스코드는 본인이 직접 발급받길 권장드립니다.

해당 위치에 구글번역 소스코드를 복사하여 붙여넣습니다.

소스코드는 아래와 같습니다.

<div id="google_translate_element"></div>
  <script type="text/javascript">
     function googleTranslateElementInit() {
  	new google.translate.TranslateElement({pageLanguage: 'ko', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: '직접입력해야합니다.'}, 'google_translate_element');
     }
    </script>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     

정상적으로 복사하였으면 위의 위치에 소스코드가 있어야 합니다.

4. HTML 메뉴부분 - 메뉴하단 광고 추가

위와같이 메뉴리스트 하단에 광고를 추가할 것입니다. 

250 * 600을 준비해주시거나 300*600을 활용하셔도 됩니다.

해당 부분에 광고코드를 추가합니다.

<div id="sidebar">
  <s_sidebar>
     <s_sidebar_element>
         <!-- 구글광고시작 -->
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
           <!-- 250*600 사이드광고 -->
	 <ins class="adsbygoogle"
		  style="display:inline-block;width:250px;height:600px"
		  data-ad-client="직접입력하세요."
		  data-ad-slot="직접입력하세요."></ins>
        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
         <!-- 구글광고종료 -->
     </s_sidebar_element>
    </s_sidebar>
</div>

본인에게 해당하는 광고코드를 입력한 후 소스코드를 복사하여 붙여 넣습니다.

정상적으로 복사하였으면 위의 위치에 소스코드가 있어야 합니다. 

5. HTML 공통 부분 - 공통광고, 이웃추가 버튼

위의 사진과 같이 300*600광고와 이웃추가 버튼을 추가하도록 하겠습니다.

제일 하단 부분에 이웃추가버튼과 광고 부분을 출력하도록 하겠습니다.

<div class="main_ad">
   <!-- 구글광고시작 -->
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- 300*600 사이드광고-->
    <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px"
     data-ad-client="직접입력하세요."
     data-ad-slot="직접입력하세요."></ins>
  <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
   <!-- 구글광고시작 -->
</div>

<div class="add_adBanner">
  <ul>
     <li><a href="티스토리주소/toolbar/popup/link" target="_blank"><img src="./images/btn_add_tistory.png"></a>&nbsp;</li>
     <li><script src="https://blog.naver.com/본인정보입력"></script></li>
  </ul>
</div>

위의 소스코드를 본인 기준에 맞게 수정하여 복사하신 후 붙여넣기 합니다.

정상적으로 복사하였으면 위의 위치에 소스코드가 있어야 합니다. 

6. HTML 게시글 부분 - 일치하는 콘텐츠, 850*250 광고추가

위의 보시는 바와 같이 일치하는 콘텐츠와 850 * 250 광고를 추가하도록 하겠습니다.

해당 부분에 일치하는콘텐츠와 850* 250 광고를 추가합니다.

<div class="ad_box">
    <!-- 일치하는 콘텐츠 시작 -->
    <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-1728613522189847" data-ad-slot="9613657642"></ins>
        <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    <!-- 일치하는 콘텐츠 종료 -->
</div>
<div style="text-align:center;">
           <!-- 850* 250 광고 시작 -->
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- 850*250광고 -->
            <ins class="adsbygoogle"
                     style="display:inline-block;width:850px;height:250px"
                     data-ad-client="본인정보입력."
                     data-ad-slot="본인정보입력"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
           <!-- 850* 250 광고 종료 -->
</div>

위의 소스코드를 본인 기준에 맞게 수정하여 복사하신 후 붙여넣기 합니다.

정상적으로 복사하였으면 위의 위치에 소스코드가 있어야 합니다. 

7. HTML 공통 부분 - 인디케이터 추가

사진으로 보시는 바와 같이 해당 부분을 적용하도록 하겠습니다.

해당부분에 2개의 소스를 추가합니다.

window.onscroll = function() {myFunction()};
 
function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

소스1

<!-- 인디케이터 시작-->
<div class="header">  
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div> 
</div>
<!-- 인디케이터 종료-->

소스2

정상적으로 복사하였으면 위의 위치에 소스코드가 있어야 합니다. 

완성!

하나하나 따라오시기 힘드시진 않았나요?

나름 쉽게 설명하고자 노력을 했는데, 보시는 분에 따라 어렵게 느껴지실 수도 있을거 같습니다.

진행하시다가 안되시는 부분이 있으시면 댓글로 부탁드립니다. 

따라오시느라 고생 많으셨습니다!

1. 추가사항입니다. 꼭 읽어주세요.

왼쪽에 보이는 고정형 광고(300*600)는 정책위반일 가능성이 있습니다. 글을 작성한 시점에는 인지하지 못했으나 추가정보를 확인해보니 대다수는 정책위반이니 사용을 자제하라는 의견이 많았습니다. 

변경된 점은 왼쪽 광고는 해당 위치에 최초 호출이 되고 스크롤을 하면 광고는 따라가지 않는 방법으로 적용했습니다.

이미 적용되신 분은 'CSS파일.txt'파일을 다시 적용해주시기 바랍니다.

처음이신분은 그대로 진행 바랍니다.

다음 가이드를 확인바랍니다. https://support.google.com/adsense/answer/1346295?hl=ko

문제문구 : Google에서는 데스크톱에서 사용자가 페이지를 스크롤하거나 탐색할 때 페이지의 

              '고정'되거나 '플로팅'되는 위치에 광고를 게재하는 행위를 제한하고 있습니다.

 

내용이 도움이 되셨거나 초보 블로거를 응원하고 싶으신 분은 아래 하트♥공감 버튼을 꾹 눌러주세요! 

내용의 수정이 있거나 도움이 필요하신 분은 댓글을 남겨주세요!