본문 바로가기

Blog

FastBoot 스킨으로 티스토리 반응형 스킨 교체

얼마전 오랫동안 유지하던 TMM 스킨을 걷어내고 티스토리 #2 반응형 스킨으로 블로그 스킨을 교체하였었습니다. 그런데 #2 스킨이 깔끔하고 좋긴했으나 로딩 속도면과 리스트에 댓글 유무를 알 수 없는 부분, 그 외에도 아주 살짝 아쉬움이 느껴지는 부분이 종종 있었습니다. 요즘 같이 바쁜 시대에는 저부터가 페이지 로딩 시간이 조금이라도 느리면 뒤로가기 를 누르고 싶은 마음이 생기는 지라 속도면에서 무척 빠르고 많은 분들이 사용하고 있는 FastBoot 반응형 스킨으로 주말동안 블로그 스킨을 교체하였습니다.


교체하고 나서는 상당히 만족스럽습니다. 티스토리 정복을 목표로 한다던 제작자 분의 이야기가 수긍이 될 정도의 퀄리티를 보여주는 스킨 입니다. 스킨을 교체하기 전에 기존에 만들기만 하고 방치해 두었던 서브 블로그에서 실험해 보았던 여러 종류의 반응형 스킨들 중에서 제가 느끼기에 가장 완성도가 높고 마음에 쏙 드는 스킨이었습니다. 이 정도의 퀄리티를 가진 스킨이 무료로 배포되고 있다는 것 자체가 축복 같습니다.


가장 큰 장점은 빠른 페이지 로딩 속도 입니다. 다소 무겁다고 느껴지던 다른 반응형 스킨들 보다 체감으로 느껴질만큼 확실하게 로딩 속도가 빠릅니다. 실제로는 갤러리 리스트를 쓸때는 아주 살짝 시간이 걸리긴 하지만 리스트 사진이 뜰 때의 애니메이션 효과 같은 로딩처리 모습이 로딩이 걸린다는 느낌 자체를 없애 주어서 상당히 제 마음에 듭니다.


스킨의 기본 디폴트 메인은 플립보드 형태로 제공되는 화면 구성을 가지고 있습니다. 이 메인의 형태도 좋습니다만 개인적으로는 갤러리 형태 리스트를 메인으로 사용하는게 더 마음에 들어서 메인페이지 방문시 카테고리로 이동하도록 리다이렉션 처리를 했습니다.



기존 메인을 쓰지 않고 카테고리로 리다이렉션 하는 방법은 나중에 아래에서 설명하겠습니다.



데스크탑에서의 UI나 디자인도 상당히 마음에 들었지만 모바일에서도 군더더기 없는 깔끔한 UI를 보여 줍니다.



더구나 리스트의 형태를 갤러리형, 리스트형, 제목만 등으로 자유자재로 변경할 수 있게 되어있는 부분도 상당히 좋습니다.




제 경우에는 애드센스를 스킨에 넣었습니다. 플립보드형 메인을 쓴다면 티스토리 애드센스 플러그인을 쓸 경우에 메인에 애드센스 코드가 그대로 노출되는 문제가 존재해서 스킨 HTML에 별도로 삽입을 하였습니다.



하지만 본인이 처음부터 끝까지 만든 스킨이 아니라면 모든이에게 100% 만족스런 스킨은 없는 법입니다. 인터넷을 좀 뒤지면서 제 입맛에 맛도록 스킨을 약간 변경했습니다. 혹시 비슷한 변경을 시도하실 분들을 위해서 간단하게 변경한 부분과 변경 방법을 공유해 봅니다.


해당 스킨을 이용하시려면 우선 스킨제작자의 블로그에서 스킨을 내려받고 스킨 업로드를 통해 설치를 해야 합니다.


FastBoot 1.6.2 설치 하기 : http://blog.readiz.com/214


설치 후 제작자나 다른 분들의 포스팅을 참조해서 수정 적용한 부분들도 공유 해 봅니다.
디폴트 갤러리 디스플레이 및 티에디션 사용 여부 설정


skin.html


/* ----------------- FastBoot Setting Variables ---------------*/
/*
---------- Category Setting
            0: Gallery (Default)
            1: List
            2: Simple Title
-------------------------------
*/
var f_categoryDefaultMode = 0;
/*
---------- T-Edition Enable
            false: Use FastBoot Index (Default)
            true: Use T-edition
-------------------------------
*/
var f_enableTedition = false;



티에디션을 메인으로 이용하실 경우라면 enableTedition= true 로 설정하면 됩니다. f_categoryDefaultMode 는 리스트를 보여줄 디폴트 형태를 설정할수 있습니다.


블로그 메인을 카테고리로 리다이렉션 하기


skin.html


/* FastBoot Index by Readiz */
var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];
var url = urlAddr.split('/');
var rssLogFlag;
if(!f_enableTedition && url[1] == '') {
    document.title='지후대디의 Favorite';
    //rssLogFlag=1;
    rssLogFlag=0;
    location.href = '/category'


데스크탑과 모바일 블로그 타이틀에 링크 걸기


skin.html


<h3><a href="/">지후대디의 Favorite</a></h3>
<p class="text-muted">Photography, IT, Devices, Travel, History and the world's various interests</p>



skin.html


<!--F 모바일 제목 -->
<div class="visible-xs" style="overflow:hidden; height:50px; line-height:2.5em; font-size: 1.4em; font-weight: bold; text-align: center; color: #fff;"><a href="/">지후대디의 Favorite</a></div>
<a id="blog_title" class="navbar-brand dropdown-toggle hidden-xs" data-toggle="dropdown" href="/">지후대디의 Favorite</a>



애드센스 광고 본문왼편 상단에 배치 및 본문 글 폰트 12로 조정하기


336X280 구글 애드센스 광고를 모바일 상단에 쓰면서 첫 화면에 광고만 보이면 안된다는 구글 정책 위반의 위험성을 피하려면 본문 좌측에 배치하시면 됩니다. 사실 티스토리 애드센스 플러그인을 써도 되지만 FastBoot 스킨 메인을 나중에라도 이용하신다면 메인에 애드센스 코드가 그대로 노출되는 문제점이 있습니다. 이를 피하기 위해서 애드센스 코드를 스킨에 추가 하였습니다.


제 경우에는 모바일에서도 가독성을 높이기 위해 12pt 폰트 사이즈를 쓰고 있습니다. 최근 글은 아예 포스팅 할때 부터 글 사이즈를 12pt 로 조정하는데 예전에 쓴 글들은 폰트 사이즈를 별도로 지정하지 않아서 article_rep_desc 위 아래에 SPAN 태그를 줘서 한꺼번에 12pt 로 조정하고 있습니다.


얼마전 오랫동안 유지하던 TMM 스킨을 걷어내고 티스토리 #2 반응형 스킨으로 블로그 스킨을 교체하였었습니다. 그런데 #2 스킨이 깔끔하고 좋긴했으나 로딩 속도면과 리스트에 댓글 유무를 알 수 없는 부분, 그 외에도 아주 살짝 아쉬움이 느껴지는 부분이 종종 있었습니다. 요즘 같이 바쁜 시대에는 저부터가 페이지 로딩 시간이 조금이라도 느리면 뒤로가기 를 누르고 싶은 마음이 생기는 지라 속도면에서 무척 빠르고 많은 분들이 사용하고 있는 FastBoot 반응형 스킨으로 주말동안 블로그 스킨을 교체하였습니다.


교체하고 나서는 상당히 만족스럽습니다. 티스토리 정복을 목표로 한다던 제작자 분의 이야기가 수긍이 될 정도의 퀄리티를 보여주는 스킨 입니다. 스킨을 교체하기 전에 기존에 만들기만 하고 방치해 두었던 서브 블로그에서 실험해 보았던 여러 종류의 반응형 스킨들 중에서 제가 느끼기에 가장 완성도가 높고 마음에 쏙 드는 스킨이었습니다. 이 정도의 퀄리티를 가진 스킨이 무료로 배포되고 있다는 것 자체가 축복 같습니다.


가장 큰 장점은 빠른 페이지 로딩 속도 입니다. 다소 무겁다고 느껴지던 다른 반응형 스킨들 보다 체감으로 느껴질만큼 확실하게 로딩 속도가 빠릅니다. 실제로는 갤러리 리스트를 쓸때는 아주 살짝 시간이 걸리긴 하지만 리스트 사진이 뜰 때의 애니메이션 효과 같은 로딩처리 모습이 로딩이 걸린다는 느낌 자체를 없애 주어서 상당히 제 마음에 듭니다.


스킨의 기본 디폴트 메인은 플립보드 형태로 제공되는 화면 구성을 가지고 있습니다. 이 메인의 형태도 좋습니다만 개인적으로는 갤러리 형태 리스트를 메인으로 사용하는게 더 마음에 들어서 메인페이지 방문시 카테고리로 이동하도록 리다이렉션 처리를 했습니다.



기존 메인을 쓰지 않고 카테고리로 리다이렉션 하는 방법은 나중에 아래에서 설명하겠습니다.



데스크탑에서의 UI나 디자인도 상당히 마음에 들었지만 모바일에서도 군더더기 없는 깔끔한 UI를 보여 줍니다.



더구나 리스트의 형태를 갤러리형, 리스트형, 제목만 등으로 자유자재로 변경할 수 있게 되어있는 부분도 상당히 좋습니다.




제 경우에는 애드센스를 스킨에 넣었습니다. 플립보드형 메인을 쓴다면 티스토리 애드센스 플러그인을 쓸 경우에 메인에 애드센스 코드가 그대로 노출되는 문제가 존재해서 스킨 HTML에 별도로 삽입을 하였습니다.



하지만 본인이 처음부터 끝까지 만든 스킨이 아니라면 모든이에게 100% 만족스런 스킨은 없는 법입니다. 인터넷을 좀 뒤지면서 제 입맛에 맛도록 스킨을 약간 변경했습니다. 혹시 비슷한 변경을 시도하실 분들을 위해서 간단하게 변경한 부분과 변경 방법을 공유해 봅니다.


해당 스킨을 이용하시려면 우선 스킨제작자의 블로그에서 스킨을 내려받고 스킨 업로드를 통해 설치를 해야 합니다.


FastBoot 1.6.2 설치 하기 : http://blog.readiz.com/214


설치 후 제작자나 다른 분들의 포스팅을 참조해서 수정 적용한 부분들도 공유 해 봅니다.
디폴트 갤러리 디스플레이 및 티에디션 사용 여부 설정


skin.html


/* ----------------- FastBoot Setting Variables ---------------*/
/*
---------- Category Setting
            0: Gallery (Default)
            1: List
            2: Simple Title
-------------------------------
*/
var f_categoryDefaultMode = 0;
/*
---------- T-Edition Enable
            false: Use FastBoot Index (Default)
            true: Use T-edition
-------------------------------
*/
var f_enableTedition = false;



티에디션을 메인으로 이용하실 경우라면 enableTedition= true 로 설정하면 됩니다. f_categoryDefaultMode 는 리스트를 보여줄 디폴트 형태를 설정할수 있습니다.


블로그 메인을 카테고리로 리다이렉션 하기


skin.html


/* FastBoot Index by Readiz */
var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];
var url = urlAddr.split('/');
var rssLogFlag;
if(!f_enableTedition && url[1] == '') {
    document.title='지후대디의 Favorite';
    //rssLogFlag=1;
    rssLogFlag=0;
    location.href = '/category'


데스크탑과 모바일 블로그 타이틀에 링크 걸기


skin.html


<h3><a href="/">지후대디의 Favorite</a></h3>
<p class="text-muted">Photography, IT, Devices, Travel, History and the world's various interests</p>



skin.html


<!--F 모바일 제목 -->
<div class="visible-xs" style="overflow:hidden; height:50px; line-height:2.5em; font-size: 1.4em; font-weight: bold; text-align: center; color: #fff;"><a href="/">지후대디의 Favorite</a></div>
<a id="blog_title" class="navbar-brand dropdown-toggle hidden-xs" data-toggle="dropdown" href="/">지후대디의 Favorite</a>



애드센스 광고 본문왼편 상단에 배치 및 본문 글 폰트 12로 조정하기


336X280 구글 애드센스 광고를 모바일 상단에 쓰면서 첫 화면에 광고만 보이면 안된다는 구글 정책 위반의 위험성을 피하려면 본문 좌측에 배치하시면 됩니다. 사실 티스토리 애드센스 플러그인을 써도 되지만 FastBoot 스킨 메인을 나중에라도 이용하신다면 메인에 애드센스 코드가 그대로 노출되는 문제점이 있습니다. 이를 피하기 위해서 애드센스 코드를 스킨에 추가 하였습니다.


제 경우에는 모바일에서도 가독성을 높이기 위해 12pt 폰트 사이즈를 쓰고 있습니다. 최근 글은 아예 포스팅 할때 부터 글 사이즈를 12pt 로 조정하는데 예전에 쓴 글들은 폰트 사이즈를 별도로 지정하지 않아서 article_rep_desc 위 아래에 SPAN 태그를 줘서 한꺼번에 12pt 로 조정하고 있습니다.


본문 치환자를 찾아서 위 아래로 해당 코드를 넣으시면 됩니다. 물론 자신의 애드센스 코드를 넣으시는건 기본이겠지요? 혹시나 하는 마음에 제 애드센스 광고 코드는 'X' 로 치환하였습니다.


skin.html


<!-- 애드센스 광고(상단좌측) -->
            <div style="float:left;margin:10px 10px 1px 1px">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- PC상단 왼쪽 -->
            <ins class="adsbygoogle"
            style="display:inline-block;width:336px;height:280px"
            data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
            data-ad-slot="XXXXXXXXXXXXXXX"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
                        </div>
            <SPAN style="FONT-SIZE: 12pt">
           
            </SPAN>


모바일 상단바를 스크롤 하면 숨기기


모바일 화면을 넓게 쓰기 위해서 화면 스크롤로 아래로 내리면 상단바를 숨깁니다. 반대로 위로 스크롤 하면 나타나게 됩니다. skin.html </body> 태그 위와 style.css 하단에 아래 코드를 추가 하시면 됩니다.


skin.html


<!--모바일 상단바 스크롤 업시 숨기기-->
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#fixedNav').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('#fixedNav').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('#fixedNav').removeClass('nav-up').addClass('nav-down');
        }
    }
    lastScrollTop = st;
}
</script>
<!--모바일 상단바 숨기기 종료-->


style.css


.nav-up {
    top: -50px;
    transition:0.2s;
}


본문 폰트 나눔고딕으로 설정


style.css


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

.......................
div,dt,ul,ol,li,h1,h2,h3,h5,h6,pre,code,form,fieldset,legend,textarea,blockquote,th,td,input,select,textarea,button,img,dl,li {
  margin:0;
  padding:0;
  border:0;
  line-height:1.5;
  font-family: 'Nanum Gothic', Arial, "돋움", Dotum, AppleGothic, sans-serif !important;
}


데스크탑 상단에 배경 이미지 넣기


데스크탑에서 보이는 상단부분이 현재는 비어 있는데 해당 부분에는 자신만의 개성있는 이미지를 넣을 수 있습니다. 먼저 적당한 이미지(가로 1920 높이 130)를 관리자 -> 꾸미기 -> HTML / CSS 편집 에서 파일업로드를 통해 업로드 합니다. 오른쪽 클릭 후 링크주소 복사를 하시면 해당 링크주소를 가져올수 있습니다.



그 다음 아래 코드를 style.css 하단에 추가 하시면 됩니다. 코드에서 XX로 치환한 부분은 각각의 블로그의 고유한 경로 부분 입니다.


style.css


#desktopNav {
background: url(http://cfs.tistory.com/custom/blog/XX/XXXXX/skin/images/titile_img.jpg) top center;
}


해당 수정 사항들 중 일부를 제외한 대부분은 제작자의 블로그 http://blog.readiz.com 에서 확인 하실 수 있습니다.

반응형
본문 치환자를 찾아서 위 아래로 해당 코드를 넣으시면 됩니다. 물론 자신의 애드센스 코드를 넣으시는건 기본이겠지요? 혹시나 하는 마음에 제 애드센스 광고 코드는 'X' 로 치환하였습니다.


skin.html


<!-- 애드센스 광고(상단좌측) -->
            <div style="float:left;margin:10px 10px 1px 1px">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- PC상단 왼쪽 -->
            <ins class="adsbygoogle"
            style="display:inline-block;width:336px;height:280px"
            data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
            data-ad-slot="XXXXXXXXXXXXXXX"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
                        </div>
            <SPAN style="FONT-SIZE: 12pt">
           

얼마전 오랫동안 유지하던 TMM 스킨을 걷어내고 티스토리 #2 반응형 스킨으로 블로그 스킨을 교체하였었습니다. 그런데 #2 스킨이 깔끔하고 좋긴했으나 로딩 속도면과 리스트에 댓글 유무를 알 수 없는 부분, 그 외에도 아주 살짝 아쉬움이 느껴지는 부분이 종종 있었습니다. 요즘 같이 바쁜 시대에는 저부터가 페이지 로딩 시간이 조금이라도 느리면 뒤로가기 를 누르고 싶은 마음이 생기는 지라 속도면에서 무척 빠르고 많은 분들이 사용하고 있는 FastBoot 반응형 스킨으로 주말동안 블로그 스킨을 교체하였습니다.


교체하고 나서는 상당히 만족스럽습니다. 티스토리 정복을 목표로 한다던 제작자 분의 이야기가 수긍이 될 정도의 퀄리티를 보여주는 스킨 입니다. 스킨을 교체하기 전에 기존에 만들기만 하고 방치해 두었던 서브 블로그에서 실험해 보았던 여러 종류의 반응형 스킨들 중에서 제가 느끼기에 가장 완성도가 높고 마음에 쏙 드는 스킨이었습니다. 이 정도의 퀄리티를 가진 스킨이 무료로 배포되고 있다는 것 자체가 축복 같습니다.


가장 큰 장점은 빠른 페이지 로딩 속도 입니다. 다소 무겁다고 느껴지던 다른 반응형 스킨들 보다 체감으로 느껴질만큼 확실하게 로딩 속도가 빠릅니다. 실제로는 갤러리 리스트를 쓸때는 아주 살짝 시간이 걸리긴 하지만 리스트 사진이 뜰 때의 애니메이션 효과 같은 로딩처리 모습이 로딩이 걸린다는 느낌 자체를 없애 주어서 상당히 제 마음에 듭니다.


스킨의 기본 디폴트 메인은 플립보드 형태로 제공되는 화면 구성을 가지고 있습니다. 이 메인의 형태도 좋습니다만 개인적으로는 갤러리 형태 리스트를 메인으로 사용하는게 더 마음에 들어서 메인페이지 방문시 카테고리로 이동하도록 리다이렉션 처리를 했습니다.



기존 메인을 쓰지 않고 카테고리로 리다이렉션 하는 방법은 나중에 아래에서 설명하겠습니다.



데스크탑에서의 UI나 디자인도 상당히 마음에 들었지만 모바일에서도 군더더기 없는 깔끔한 UI를 보여 줍니다.



더구나 리스트의 형태를 갤러리형, 리스트형, 제목만 등으로 자유자재로 변경할 수 있게 되어있는 부분도 상당히 좋습니다.




제 경우에는 애드센스를 스킨에 넣었습니다. 플립보드형 메인을 쓴다면 티스토리 애드센스 플러그인을 쓸 경우에 메인에 애드센스 코드가 그대로 노출되는 문제가 존재해서 스킨 HTML에 별도로 삽입을 하였습니다.



하지만 본인이 처음부터 끝까지 만든 스킨이 아니라면 모든이에게 100% 만족스런 스킨은 없는 법입니다. 인터넷을 좀 뒤지면서 제 입맛에 맛도록 스킨을 약간 변경했습니다. 혹시 비슷한 변경을 시도하실 분들을 위해서 간단하게 변경한 부분과 변경 방법을 공유해 봅니다.


해당 스킨을 이용하시려면 우선 스킨제작자의 블로그에서 스킨을 내려받고 스킨 업로드를 통해 설치를 해야 합니다.


FastBoot 1.6.2 설치 하기 : http://blog.readiz.com/214


설치 후 제작자나 다른 분들의 포스팅을 참조해서 수정 적용한 부분들도 공유 해 봅니다.
디폴트 갤러리 디스플레이 및 티에디션 사용 여부 설정


skin.html


/* ----------------- FastBoot Setting Variables ---------------*/
/*
---------- Category Setting
            0: Gallery (Default)
            1: List
            2: Simple Title
-------------------------------
*/
var f_categoryDefaultMode = 0;
/*
---------- T-Edition Enable
            false: Use FastBoot Index (Default)
            true: Use T-edition
-------------------------------
*/
var f_enableTedition = false;



티에디션을 메인으로 이용하실 경우라면 enableTedition= true 로 설정하면 됩니다. f_categoryDefaultMode 는 리스트를 보여줄 디폴트 형태를 설정할수 있습니다.


블로그 메인을 카테고리로 리다이렉션 하기


skin.html


/* FastBoot Index by Readiz */
var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];
var url = urlAddr.split('/');
var rssLogFlag;
if(!f_enableTedition && url[1] == '') {
    document.title='지후대디의 Favorite';
    //rssLogFlag=1;
    rssLogFlag=0;
    location.href = '/category'


데스크탑과 모바일 블로그 타이틀에 링크 걸기


skin.html


<h3><a href="/">지후대디의 Favorite</a></h3>
<p class="text-muted">Photography, IT, Devices, Travel, History and the world's various interests</p>



skin.html


<!--F 모바일 제목 -->
<div class="visible-xs" style="overflow:hidden; height:50px; line-height:2.5em; font-size: 1.4em; font-weight: bold; text-align: center; color: #fff;"><a href="/">지후대디의 Favorite</a></div>
<a id="blog_title" class="navbar-brand dropdown-toggle hidden-xs" data-toggle="dropdown" href="/">지후대디의 Favorite</a>



애드센스 광고 본문왼편 상단에 배치 및 본문 글 폰트 12로 조정하기


336X280 구글 애드센스 광고를 모바일 상단에 쓰면서 첫 화면에 광고만 보이면 안된다는 구글 정책 위반의 위험성을 피하려면 본문 좌측에 배치하시면 됩니다. 사실 티스토리 애드센스 플러그인을 써도 되지만 FastBoot 스킨 메인을 나중에라도 이용하신다면 메인에 애드센스 코드가 그대로 노출되는 문제점이 있습니다. 이를 피하기 위해서 애드센스 코드를 스킨에 추가 하였습니다.


제 경우에는 모바일에서도 가독성을 높이기 위해 12pt 폰트 사이즈를 쓰고 있습니다. 최근 글은 아예 포스팅 할때 부터 글 사이즈를 12pt 로 조정하는데 예전에 쓴 글들은 폰트 사이즈를 별도로 지정하지 않아서 article_rep_desc 위 아래에 SPAN 태그를 줘서 한꺼번에 12pt 로 조정하고 있습니다.


본문 치환자를 찾아서 위 아래로 해당 코드를 넣으시면 됩니다. 물론 자신의 애드센스 코드를 넣으시는건 기본이겠지요? 혹시나 하는 마음에 제 애드센스 광고 코드는 'X' 로 치환하였습니다.


skin.html


<!-- 애드센스 광고(상단좌측) -->
            <div style="float:left;margin:10px 10px 1px 1px">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- PC상단 왼쪽 -->
            <ins class="adsbygoogle"
            style="display:inline-block;width:336px;height:280px"
            data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
            data-ad-slot="XXXXXXXXXXXXXXX"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
                        </div>
            <SPAN style="FONT-SIZE: 12pt">
           
            </SPAN>


모바일 상단바를 스크롤 하면 숨기기


모바일 화면을 넓게 쓰기 위해서 화면 스크롤로 아래로 내리면 상단바를 숨깁니다. 반대로 위로 스크롤 하면 나타나게 됩니다. skin.html </body> 태그 위와 style.css 하단에 아래 코드를 추가 하시면 됩니다.


skin.html


<!--모바일 상단바 스크롤 업시 숨기기-->
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#fixedNav').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('#fixedNav').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('#fixedNav').removeClass('nav-up').addClass('nav-down');
        }
    }
    lastScrollTop = st;
}
</script>
<!--모바일 상단바 숨기기 종료-->


style.css


.nav-up {
    top: -50px;
    transition:0.2s;
}


본문 폰트 나눔고딕으로 설정


style.css


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

.......................
div,dt,ul,ol,li,h1,h2,h3,h5,h6,pre,code,form,fieldset,legend,textarea,blockquote,th,td,input,select,textarea,button,img,dl,li {
  margin:0;
  padding:0;
  border:0;
  line-height:1.5;
  font-family: 'Nanum Gothic', Arial, "돋움", Dotum, AppleGothic, sans-serif !important;
}


데스크탑 상단에 배경 이미지 넣기


데스크탑에서 보이는 상단부분이 현재는 비어 있는데 해당 부분에는 자신만의 개성있는 이미지를 넣을 수 있습니다. 먼저 적당한 이미지(가로 1920 높이 130)를 관리자 -> 꾸미기 -> HTML / CSS 편집 에서 파일업로드를 통해 업로드 합니다. 오른쪽 클릭 후 링크주소 복사를 하시면 해당 링크주소를 가져올수 있습니다.



그 다음 아래 코드를 style.css 하단에 추가 하시면 됩니다. 코드에서 XX로 치환한 부분은 각각의 블로그의 고유한 경로 부분 입니다.


style.css


#desktopNav {
background: url(http://cfs.tistory.com/custom/blog/XX/XXXXX/skin/images/titile_img.jpg) top center;
}


해당 수정 사항들 중 일부를 제외한 대부분은 제작자의 블로그 http://blog.readiz.com 에서 확인 하실 수 있습니다.

반응형

            </SPAN>


모바일 상단바를 스크롤 하면 숨기기


모바일 화면을 넓게 쓰기 위해서 화면 스크롤로 아래로 내리면 상단바를 숨깁니다. 반대로 위로 스크롤 하면 나타나게 됩니다. skin.html </body> 태그 위와 style.css 하단에 아래 코드를 추가 하시면 됩니다.


skin.html


<!--모바일 상단바 스크롤 업시 숨기기-->
<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#fixedNav').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('#fixedNav').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('#fixedNav').removeClass('nav-up').addClass('nav-down');
        }
    }
    lastScrollTop = st;
}
</script>
<!--모바일 상단바 숨기기 종료-->


style.css


.nav-up {
    top: -50px;
    transition:0.2s;
}


본문 폰트 나눔고딕으로 설정


style.css


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

.......................
div,dt,ul,ol,li,h1,h2,h3,h5,h6,pre,code,form,fieldset,legend,textarea,blockquote,th,td,input,select,textarea,button,img,dl,li {
  margin:0;
  padding:0;
  border:0;
  line-height:1.5;
  font-family: 'Nanum Gothic', Arial, "돋움", Dotum, AppleGothic, sans-serif !important;
}


데스크탑 상단에 배경 이미지 넣기


데스크탑에서 보이는 상단부분이 현재는 비어 있는데 해당 부분에는 자신만의 개성있는 이미지를 넣을 수 있습니다. 먼저 적당한 이미지(가로 1920 높이 130)를 관리자 -> 꾸미기 -> HTML / CSS 편집 에서 파일업로드를 통해 업로드 합니다. 오른쪽 클릭 후 링크주소 복사를 하시면 해당 링크주소를 가져올수 있습니다.



그 다음 아래 코드를 style.css 하단에 추가 하시면 됩니다. 코드에서 XX로 치환한 부분은 각각의 블로그의 고유한 경로 부분 입니다.


style.css


#desktopNav {
background: url(http://cfs.tistory.com/custom/blog/XX/XXXXX/skin/images/titile_img.jpg) top center;
}


해당 수정 사항들 중 일부를 제외한 대부분은 제작자의 블로그 http://blog.readiz.com 에서 확인 하실 수 있습니다.

반응형