미넴 스킨 제작 프로젝트

티스토리 미넴 스킨 2.5.9 업데이트 - 본문 하단 광고 및 로딩 화면 추가

변태 개발자 아미넴 2021. 10. 11.

안녕하세요.

 

블로그를 운영하는 분들 중 상당 수는 광고 수익 향상을 바라고 계실 겁니다. 따라서 이번에도 도움이 되고자 몇 가지 기능을 추가하였으니 필요하신 분은 업데이트 하시기 바랍니다.

 

목차

     

     

    개선 사항

    1. 로딩 화면 사용 여부 및 로딩 이미지 등록 기능을 추가하였습니다.

    2. 본문 하단에 구글 애드센스 광고 2개를 설정할 수 있도록 옵션을 추가하였습니다. 

    3. 크로미움 기반 브라우저가 아닐 시 안내 팝업 사용 여부 및 문구를 설정할 수 있도록 하였습니다.

    4. 기타 자잘한 문제점을 수정하였습니다.

     

    설정 화면 미리보기

    크로미움 기반 브라우저가 아닐 시 안내 팝업 사용 여부를 설정할 수 있도록 변경하였습니다.

     

    블로그 로딩 화면 사용 여부 및 로딩 이미지 업로드 설정 부분입니다. 로딩이 완료되면 즉시 사라지지만 완전히 되지 않더라도 최대 5초 간만 표시되도록 했습니다. 이미지를 업로드 하지 않으면 기본 이미지가 사용됩니다.

     

    따로 적용하고 싶으신 분들은 다음 게시물 참고 바랍니다.

     

    구글 애드센스 광고 효과 향상을 위한 로딩 화면 만들기

     

    구글 애드센스 광고 효과 향상을 위한 로딩 화면 만들기

    티스토리 본문 상단 광고는 거의 국룰처럼 되었습니다. 실제로 제 블로그에서도 여기서 가장 광고 수익이 많이 나고 있습니다. 따라서 방문자 분들에게는 조금 죄송하지만 광고가 뜰 시간을 충

    sangminem.tistory.com

     

    다음은 본문 하단에 애드센스 광고 2개를 게재할 수 있는 설정입니다.

     

    역시 따로 적용하실 분들은 다음 게시물 참고 바랄게요.

     

    티스토리 본문 하단에 구글 애드센스 광고 넣기

     

    티스토리 본문 하단에 구글 애드센스 광고 넣기

    블로그를 운영하다보니 가장 효율이 좋은 광고 위치는 상단의 사각 광고 2개였습니다. 그런데 일부 방문자들이 상단 광고를 완전히 불러 오기도 전에 스크롤을 내려서 광고를 보지 못하는 경우

    sangminem.tistory.com

     

     

    소개 및 설치 방법

    다음 게시물을 참고하여 설치 바랍니다.

     

    친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방법

     

    친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방

    기본 제공 스킨을 나름대로 고쳐 쓰다가 만족하지 못하고 그냥 새로 만들었습니다. 여태까지 블로그를 하면서 적용한 많은 기능들을 대부분 포함하였으니 누군가에게는 상당히 유용한 스킨이

    sangminem.tistory.com

     

    업데이트 후 적용이 잘 안 되신다면 강제 새로고침을 해보세요. 단축키는 윈도우10 크롬 기준 Ctrl+Shift+R, 맥 크롬 기준 Command+Shift+R 입니다.

     

    미넴 스킨 2.5.9 버전 다운로드

    Mynem Skin V2.5.9.zip
    3.65MB

    BIG

    댓글46

    • 병무새 2021.10.11 09:17 신고

      다운로드 파일이 보이지 않습니다 ㅠㅠ
      답글

    • 병무새 2021.10.11 09:25 신고

      아닙니다 ㅎㅎ 늘 감사합니다 ^^ 오늘도 좋은 하루 되세요!!!
      답글

    • 아... 어제 여기 페이지에 막 들어왔을 때 다운로드 파일도 안보이고 저 하트 로딩 이미지가 사라지지 않아서 이 페이지에
      댓글도 쓸 수가 없었는데 그것도 수정 된 건가요?
      그럼 감사하게 이걸로 바로 업그레이드 하겠습니다. ^0^
      답글

      • 다운로드 파일 안올린건 실수였구요 ㅎㅎ 로딩이미지가 안 사라진 건 이해가 잘 안되는데.. 좀 더 테스트 해봐야겠네요~

        로딩이 길어지면 최대 5초 동안만 표시되도록 했으니 참고 바랄게요!
        이미 적용하셨다면 다음 부분을 찾아서

        <script type="text/javascript">
        $(window).on('load', function() {
        setTimeout(function(){
        $("#waiting").fadeOut();
        }, 500);
        });
        </script>

        아래와 같이 바꾸시면 됩니다.

        <script type="text/javascript">
        var loadingTimer = 0;
        loadingTimer = setTimeout(function(){
        $("#waiting").fadeOut();
        loadingTimer = 0;
        }, 5000);
        $(window).on('load', function() {
        if(loadingTimer != 0) {
        clearTimeout(loadingTimer);
        setTimeout(function(){
        $("#waiting").fadeOut();
        }, 500);
        }
        });
        </script>

    • 힘센캥거루 2021.10.11 21:34 신고

      하단 광고가 실제로 적용이 안되는 것 같습니다 ㅜㅜ
      답글

    • 밝은 워터수 2021.10.13 22:58 신고

      고생하셨네요~~
      감사합니다 ~~

      답글

    • 호호마 2021.10.16 16:59 신고

      안녕하세요! 미넴스킨을 사용하고 있는 유저입니다!
      제가 미넴스킨을 정말로 잘쓰고있는데요.
      기본으로 블랙모드로 적용을 해놓은 상태입니다.
      오늘 아버지께서 제 홈페이지를 한번 봐보고 싶다는 말씀에 아버지 핸드폰으로 들어와보니까
      블로그 바탕색은 갈색이고 글자색은 검은색으로 나타나 아애 글씨가 안보이더라구요.
      원래 같으면 검은바탕에 흰 글자가 나왔어야 했는데 말이죠...
      이게 그 크로미움이 기반된 브라우저 아니면 문제가 있을 수 있다는 경우일까요??
      해결 방법은 없을까요??
      답글

    • 잡글 아카이브 2021.10.24 14:56

      관리자의 승인을 기다리고 있는 댓글입니다
      답글

      • 네 안녕하세요 확인은 했는데 삼성 브라우저가 혹시 과거 버전이 아닐까 싶습니다. 현재 안드로이드 폰에서 삼성 브라우저를 받아서 테스트 해 보면 정상적으로 나오거든요~
        과거 삼성 브라우저가 웹 표준을 안따라서 생기는 문제일 수 있는데 재현도 어렵고 아무래도 과거 버전까지 지원하기 위해 조치하는 건 어려워 보입니다.

        찾아 보니 다음과 같은 글도 있는데 아무래도 삼성 브라우저 자체 문제 같습니다.
        https://boxofhobby.tistory.com/53

      • 링크해주신 글을 읽어보니 마침 삼성 브라우저에서 글꼴 설정을 만지긴 했는데 그것 때문에 나타나는 현상인가보네요. 이게 문제일줄은 몰랐네요 ㅠㅠ 답변 감사합니다. 브라우저는 최신 버전인데 아직도 해결이 안된 문제인가보네요. 임시방편으로 글꼴 설정을 끄니까 해결되었습니다.

      • 아 삼성 브라우저 최신 버전에서도 해결이 안 됐군요 ㅠ 아무튼 스킨 문제는 아니라서 다행입니다!

    • 소냐 2021.10.28 23:33

      안녕하세요! 덕분에 스킨 잘 설치하였습니다 모든 기능이 다 깔끔하고 속도도 빠르고 정말 맘에듭니다 감사드려요!

      질문이있는데요, 저는 이제껏 애드센스에서 광고단위 만들어서 코드를 복사해서 제가 본문에 넣고싶은곳에 넣었거든요. 미넴스킨을 사용하면서도 그게 가능한지요.

      스킨을 설치하고나니 본문 안에 광고들이 하나도 안떠서요,, 코드를 다른 방식으로 넣어야할까요..?
      감사합니다 ^^
      답글

      • 안녕하세요~ 미넴 스킨 이용해 주셔서 감사합니다 ㅎ
        광고 코드 삽입을 딱히 제한한 부분은 없는데 어떤 식으로 삽입했는지 샘플 주시면 확인해 드릴게요!
        콘솔창에 에러가 있는 지도 확인해 보시면 좋을 것 같습니다

    • 2021.10.29 10:13

      비밀댓글입니다
      답글

      • 이렇게 봐서는 특별히 문제점은 안 보이네요.
        혹시 문제가 있는 블로그 글 링크 알려주시면 한 번 더 확인해 볼 수는 있을 것 같은데 그게 어렵다면 도움을 드리기 어려울듯 싶습니다 ㅠ

    • 2021.10.30 19:41

      비밀댓글입니다
      답글

      • 사용하지 않는 광고를 켜 놓아서 그런걸로 보입니다.
        예를 들면 사이드바의 추천 글은 스킨 편집에서 광고 코드 정보를 넣어 주어야 정상 동작하는데 사이드바 설정에서는 이 부분이 활성화 되어 있지만 실제 스킨 편집에 필요한 정보들이 들어가 있지 않아서 오류가 발생하는 걸로 보입니다.
        한 번 확인해 보세요~

    • 자유지대 2021.10.30 20:38 신고

      정말 좋은 스킨이네요. 저도 입소문 듣고 사용해보려구 왔습니다~ :)
      좋은 스킨 공유 감사드립니다! 방문자수나 다운수에 비해 댓글이 너무 적네요~~ 제가 다른 분들 몫까지 모두 감사드립니다~!
      답글

    • 소냐 2021.10.30 20:50

      미넴님... 제가 정신이 나갔나봅니다....;; 무슨 설정에서 펍코드랑 슬롯 번호도 입력안해놓고 광고안뜬다고 여쭤봤네요=_=..
      아.. 바쁘신데 괜히 번거롭게 죄송합니다....ㅠ.... 예쁜 스킨 쓸수있게 해주셔서 정말 감사합니다. 맘에 쏙 드는 스킨은 처음이에요. 미넴님 편안한 주말 되셨음 해요. 매번 댓 달아주셔서 감사합니다! ^^♡
      답글

    • 〶🁻❀⌸ 2021.10.31 09:45 신고

      미넴님, 질문이 있습니다!

      미넴님같은경우 네이버나 다음같은 외부에서 검색해서 글에 들어오면 미넴스킨이 예쁘게 적용된 화면으로 들어와지는데요,

      제 글을 검색해서 들어오면 미넴스킨이 적용된 화면이 아닌 티스토리 앱 형식이 적용된 화면으로 들어와집니다..!

      모바일웹 설정에서 자동연결을 사용하지 않습니다로 해놓았는데도 그러네요,, 혹시 이건 왜 그런지 아실까요~?!
      답글

      • 최초에 모바일웹 설정으로 되어 있어서 그 주소가 아직 남아 있어서 그런 것 같습니다. 시간이 지나면 사라질거예요~
        예를 들어 아무리 모바일웹 자동연결을 사용하지 않더라도 제 블로그도 강제로 다음과 같이 주소 중간에 m을 넣어서 접속하면 접속이 가능하긴 합니다.
        https://sangminem.tistory.com/m/626

      • 〶🁻❀⌸ 2021.11.07 13:17 신고

        아 그렇군요..!! 댓글 달아주셔서 감사합니다 ^^

    • Heeyeon Choi 2021.11.02 00:12 신고

      저도 뛰어난 개발자가 되고 싶습니다 존경합니다 스킨도 유용하게 사용하겠습니다 감사합니다!
      답글

    • 〶🁻❀⌸ 2021.11.07 13:20 신고

      미넴님, 혹시 모바일에서 글 본문을 봤을때 본문의 폭을 조금 줄일수있는 방법이 있을까요~?
      예쁘고 빠르고 정갈하게 정돈된 미넴스킨 정말 감사히 잘 쓰고있습니다!☆♡
      답글

      • 스킨편집 > html편집에서

        @media (max-width: calc([ ##_var_article-max-width_##]px + 42px)) {
        #aside-top-blank {
        display: none !important;
        }
        section .content-wrapper {
        width: initial !important;
        padding: 10px;
        }

        부분을 찾아서 padding: 10px; 부분을 조금 늘려 보시면 될 것 같습니다~

    • 플래몽드 2021.11.09 16:08 신고

      미넴님, 스킨 너무 잘 쓰고있습니다. 정말 감사합니다!
      광고 관련해서 질문이 있어서 댓글남깁니다.
      구글 애드센스 하단 광고(2개짜리)를 사용하기로 설정하고 나서,
      data-ad-client 및 slot에 주소 같은걸 넣어줘야 사용할수 있나요?ㅠㅠ
      쪼랩이라 자동광고를 사용중인데... 비워두니까 그냥 google adsense 라고만 나오는 것 같아서요...

      답글

    • ㅇㅇ 2021.11.11 14:38

      티스토리 이제 alt태그 오늘부터 지원하네요. alt 태그 관련 코드는 이제 삭제하셔도 될 것 같네요!
      답글

      • 정보 감사합니다~ 확인해 보니 편하게 넣을 수 있는 기능이 생겼을 뿐이지 이전에 작성했던 글들은 고치지 않는 한 자동으로 들어가지 않는 것 같고 아무리 편하더라도 그 기능을 이용하지 않으면 alt 값이 들어가지 않는 건 마찬가지이므로 유지하는 편이 나아 보입니다 ㅎ

    • [앙금빵] 2021.11.21 21:49 신고

      안녕하세요 스킨 너무 이쁘고 잘쓰고 있습니다~

      1시 방향에 top-button (관리,글쓰기,로그아웃) 부분이 클릭 후 원 밖으로 나가면 사라져버리는데 해결방법 없을까요?.. ㅠㅠ
      T 스토리 관리 버튼 위치와 중복되는 부분도 있습니다.
      답글

      • 안녕하세요. 미넴 스킨 이용해 주셔서 감사합니다~

        편의를 위해 자동으로 사라지게 한 건데 원치 않으시면 관리자 페이지의 스킨 편집 > html 편집 에디터에서 다음 부분을 추가해 보세요.
        <script>
        $(document).ready(function() {
        $(".top-button .profile").off("mouseleave");
        });
        </script>

        티스토리 버튼 위치는 관리자 페이지에서 꾸미기 > 메뉴바/구독 설정 부분에서 조정이 가능합니다.

    💲 추천 글