미넴 스킨 제작 프로젝트/업데이트

티스토리 미넴 스킨 2.6.0 업데이트 - 글 중간 광고 자동 삽입

아미넴 2021. 12. 20.
반응형

안녕하세요. 오랜만에 업데이트를 합니다.

 

이번에도 광고 수익 향상에 도움될 만한 몇 가지 기능과 폰트 변경, 편의 기능 등 업데이트가 많이 이루어졌으니 관심 있으신 분들은 충분히 확인해 보시고 적용 부탁드리겠습니다.

테스트 블로그에 먼저 적용하여 어느 정도 테스트를 거친 후 운영 중인 블로그에 적용하시는 것을 권장합니다.

 

(추가 수정)

2022.01.06 모바일 뷰에서 다크 모드에서 라이트 모드로 전환 시 사이드바는 다크 모드 색으로 그대로 남아있는 현상을 수정하였습니다.

2022.02.05 사파리(웹킷 엔진) 브라우저에서 이미지 지연 로딩이 정상 동작하지 않는 문제를 해결하였습니다. 

 

이미 적용하신 분은 다음 파일만 다시 업로드 하시면 되고 새로 업데이트 하실 분들은 무시하셔도 됩니다.

common.min.js
0.04MB

 

목차

     

     

    개선 사항

    1. 글 중간 자동 애드센스 광고 삽입 기능을 추가하였습니다.

    2. 전체 글의 리스트 형태 출력 기능을 추가하였습니다.

    3. 이롭게 바탕체 외의 다른 폰트는 제외하고 리디바탕 폰트를 추가하였습니다.

    4. 애드센스 검색 광고 설정을 추가하였습니다.

    5. 사이드바 애드센스 일치하는 광고 자동 스크롤 기능을 추가하였습니다.

    6. 애드센스 광고 설정 시 공통 코드는 한 번만 입력하도록 개선하였습니다.

    7. URL에 의한 자동 번역 기능을 추가하였습니다.

    8. 로딩 스피너가 표시될 때 스크롤 되지 않도록 개선하였습니다.

    9. 댓글 작성으로 바로 이동할 수 있도록 플로팅 버튼을 추가하였습니다.

    10. 광고 코드 미입력 시 사이드바 일치하는 광고가 표시되지 않도록 하였습니다.

    11. 강제 다크 모드 설정 시 모든 다크/라이트 모드 전환 버튼이 표시되지 않도록 하였습니다.

    12. 카테고리 접힘 기능 이용 시 펼칠 카테고리만 입력하도록 변경하였습니다. (기본은 모두 접힘)

    13. 스킨 편집 페이지의 스킨 설정 항목들을 정비하였습니다.

    14. 기타 자잘한 문제점을 개선하였습니다.

     

    설정 화면 미리보기

    주요 설정 화면을 미리 살펴 보겠습니다.

     

    글 중간 애드센스 광고 자동 삽입

    사용 여부 및 광고 빈도를 설정할 수 있습니다. 기본 값은 30라인 마다 삽입입니다. 애드센스 기준으로 기존 삽입 광고가 있으면 무시되도록 하는 기능도 있는데 광고를 어떻게 적용시켰는지에 따라서 적용이 되지 않을 수도 있으니 참고 바랍니다.

    광고 종류는 콘텐츠 내 삽입 광고 및 디스플레이 사각 광고가 기본이고 이 둘을 랜덤으로 출력시키는 기능까지 구현해 놓았습니다. 다른 종류의 광고 slot 값을 넣으면 정상적으로 표시되지 않을 수 있으니 주의 바랍니다.

     

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

     

    광고 수익 향상 꿀팁, 글 중간 애드센스 광고 자동 삽입 업그레이드 버전

     

    광고 수익 향상 꿀팁, 글 중간 애드센스 광고 자동 삽입 업그레이드 버전

    얼마 전에 글 중간에 광고를 자동으로 삽입하기 위해 간단하게 작성한 로직이 있었는데 한계점이 보여서 좀 더 고민하여 새로 작성해 보았습니다. 최초 작성한 글이 궁금하신 분은 다음 링크 참

    sangminem.tistory.com

     

    전체 글 리스트 형태 출력

    기존에는 그리드 형태만 지원을 하였는데 리스트 형태도 출력이 되도록 기능을 추가하였습니다. 아래 빨간 박스 부분에서 설정 가능합니다. 전체 글 뿐만 아니라 카테고리 별 글도 지원이 됩니다.

     

    다음과 같이 리스트 형태로 잘 표시가 됩니다. 리스트 형태 사용 시 인피드 광고도 적용할 수 있으므로 참고 바랍니다.

     

    리디바탕 폰트 추가

    이번 버전부터는 기본, 이롭게 바탕체, 리디바탕 3가지 종류만 지원하오니 참고 바랍니다.

    여담이지만 리디바탕 폰트를 사용하는 블로그가 많아서 저는 가급적 사용하고 싶지 않았으나 직접 사용을 해보니 생각보다 더 깔끔해 보이고 가독성이 뛰어나서 채택을 하게 되었습니다.

     

    폰트가 별도로 필요하신 분은 다음 글 참고하세요.

     

    리디바탕 폰트 용량 축소 파일 (otf, woff, woff2)

     

    리디바탕 폰트 용량 축소 파일 (otf, woff, woff2)

    리디바탕체를 이용해 보고 싶었는데 웹폰트로 이용하기에는 용량이 너무 커서 좀 줄일 필요성을 느꼈습니다. 다른 분들이 줄인 파일이 있는지 찾아 보았는데 찾기가 어려워서 그냥 제가 줄였습

    sangminem.tistory.com

     

    애드센스 검색바 광고 추가

    cx 파라미터에 들어가는 코드만 입력하면 자동으로 셋팅될 수 있도록 구현해 놓았습니다.

     

    검색 광고 설정 시 레이아웃을 꼭 두 열로 설정해 주셔야 정상적으로 동작합니다. 나머지 설정은 적절히 해주시면 됩니다.

     

    저장 및 코드 생성 버튼을 누르면 나오는 코드에서 아래 초록색 부분 값만 가져와서 입력하시면 됩니다.

     

    애드센스 일치하는 광고 자동 스크롤

    일치하는 광고의 길이를 길게 할 경우 자동 스크롤 되는 기능을 구현하였습니다. 플로팅 광고를 사이드바 일치하는 광고로 설정했을 경우 동작합니다.

     

    다음과 같이 동작합니다. 예시는 데이블 광고지만 방식은 같습니다.

     

    자동 번역 기능 추가

    URL 뒤에 trans_lang 파라미터 값을 주면 자동 번역되도록 기능을 추가하였습니다.

     

    다음과 같이 주소를 입력하면 진입하자마자 블로그가 영어로 번역이 됩니다.

    https://sangminem.tistory.com?trans_lang=en 

     

    영상으로도 확인해 보세요.

     

    따로 구현하고 싶으시면 다음 글 참고 바랍니다.

     

    티스토리 블로그 자동 번역 URL 생성하는 방법

     

    티스토리 블로그 자동 번역 URL 생성하는 방법

    예전에 번역 기능은 이미 소개한 적이 있지만 여기서 만족하지 않고 필요에 따라 블로그 링크를 오픈하자마자 바로 번역이 된다면 더욱 유용할 것 같아서 생각해 보았습니다. 이를 위해 다음 기

    sangminem.tistory.com

     

    댓글 입력 바로 이동 버튼 추가

    댓글 입력 칸으로 바로 이동할 수 있는 플로팅 버튼을 추가하였습니다.

     

    소개 및 설치 방법

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

     

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

     

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

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

    sangminem.tistory.com

     

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

     

    궁금한 점이 있으시면 자주 묻는 질문 게시물 먼저 확인 바랍니다.

     

    미넴 스킨 자주 묻는 질문(FAQ)

     

    미넴 스킨 자주 묻는 질문(FAQ)

    미넴 스킨 게시물에 대부분 설명이 나와 있지만 내용이 많아서 찾기 어렵거나 빨리 훑어 보고 싶으신 분들을 위해 작성하였습니다. 지속적으로 추가해 나가도록 하겠습니다. 목차 사이드바 기

    sangminem.tistory.com

     

    미넴 스킨 2.6.0 버전 다운로드

    Mynem Skin V2.6.0.zip
    2.57MB

    반응형
    그리드형(광고전용)

    댓글47

    • 이전 댓글 더보기
    • 오랜만의 업데이트네요. 바로 사용해보겠습니다. ^^
      답글

    • 방금 설치는 완료했는데 사이트 하단이 잘리고 스크롤바가 내려가지를 않네요...;;;
      답글

      • 아미넴 2021.12.20 23:49 신고

        아 잠시만요 올릴때 뭔가 잘못된거 같네요 ㄷㄷ 다시 올릴게요 ㅠ

      • 아미넴 2021.12.20 23:55 신고

        아 다행히 큰 문제는 아니라 다시 받으실 필요는 없구요
        스킨편집 > HTML 편집에서 1594 라인에 } 하나 추가해 주시면 정상 동작 할겁니다~

        좀 더 정확히 말하면
        function afterLoaded() {
        if(!doneFlag) {
        wrapperObserver.disconnect();
        $('#wrapper').addClass('loaded');
        $('#wrapper').off('scroll touchmove mousewheel');
        $("#waiting").fadeOut();
        setTimeout(function() {
        if(location.href.indexOf('#') > -1) {
        location.href = location.href;
        doneFlag = true;
        }
        }, 500);
        } // <-- 이 부분에 } 추가하면 됩니다!
        }

        첨부 파일은 수정해서 올려 놓았습니다 불편을 드려 죄송합니다!

    • 감사합니다. 잘 작동되네요. ^0^
      답글

    • 밝은 워터수 2021.12.26 13:24 신고

      업그레드 갑사합니다~
      고맙습니다
      줄거운 하루 되세요~~~

      답글

    • ^*;*^ 2021.12.31 10:10 신고

      이번 업데이트는 bing과 충돌이 있는 거 같습니다. 제 컴만 그런건지는 모르겠는데 bing에서 열리지 않네요.
      답글

      • 아미넴 2021.12.31 10:14 신고

        bing에서 열리지 않는다는게 정확히 무슨 의미인지는 모르겠지만 일단 bing에서 검색해서 들어오는건 잘 됩니다.
        특정 os나 브라우저 문제일 수도 있으니 접속 환경 알려 주시면 테스트 해볼게요~

    • ^*;*^ 2021.12.31 13:23 신고

      다시 해보니 열립니다. bing 사이트에서 열리지 않고 스킨 편집이 안 됐었는데 제 컴의 문제였던 듯 싶습니다. 감사합니다~
      답글

    • 안녕하세요 2021.12.31 22:39

      새로운 기능을 업데이트 해주셔서 감사합니다. 기능이 좋아서 사용 중인데, 다름이 아니라 미넴스킨 글꼴을 다양하게 변경해보고 싶은데 어느 곳에 폰트를 추가 변경하면 좋을지 몰라서 문의 드립니다.
      답글

      • 아미넴 2022.01.02 10:10 신고

        스킨 편집 > html 편집 > html에서 35라인 /* font family */ 를 찾으셔서 수정하시면 됩니다.
        <s_if_var_custom-font>폰트 치환자</s_if_var_custom-font> 부분을 지우고 원하는 폰트를 넣으시면 될 것 같습니다.
        미넴 스킨 이용해 주셔서 감사합니다.

    • 와~ 업데이트 감사합니다! 항상 잘 사용하고 있습니다!
      질문 하나 들릴께요. 미넴스킨 업데이트하면 기존 검색 포털들에 노출 되는 포스팅에 영향은 없는지요?
      스킨을 한번 선택하고 다른 스킨으로 변경할 때 검색글들의 노출이 없어질 수도 있다는 이야기를 들어서요.
      답글

      • 아미넴 2022.01.02 10:14 신고

        저는 스킨 수정할 때 테스트를 위해 하루에 열번 이상 바꾸는 경우도 있지만 그 영향으로 방문자 수가 줄어든다는 느낌은 못 받았습니다.
        스킨 구조가 완전히 달라지면 약간 영향이 생길 수도 있겠지만 자주 바꾸지만 않는다면 크게 걱정할 정도는 아니며 같은 스킨을 여러 번 반영한다면 큰 틀은 바뀌지 않기 때문에 SEO 영향은 거의 없다고 보시면 됩니다.
        미넴 스킨 이용해 주셔서 감사합니다.

    • 답변 감사합니다! 최고~! :)
      답글

    • 질문 드려요 2022.01.05 17:58

      안녕하세요. 좋은 기능을 추가해주셔서 글 중간 광고 삽입을 이용하고 싶은데 잘 모르겠어서 문의드립니다.
      https://imgur.com/yfSAMYE
      위의 이미지처럼 글 중간 광고 자동 삽입목록에서 data-ad-slot 디스플레이 사각 광고 1, 2는 이해가 되는데 그 위에 [data-ad-slot - 콘텐츠 내 삽입 광고]라는 것은 무엇을 말하는 것인지 잘 모르겠어서 문의 드립니다. data-ad-clien에 있는 ca-pub은 아닌 것 같고 어디서 찾아볼 수 있을까요.

      +)

      잘 몰랐던 부분을 해결하였습니다.
      콘텐츠 내 삽입 광고라는 형식의 광고를 넣으라는 말이라는 것을 뒤늦게 깨닫고 시도해보니 제대로 작동하였습니다. 괜한 질문을 드렸네요.

      답글

      • 아미넴 2022.01.05 19:25 신고

        안녕하세요 ㅎㅎ 광고 종류를 평소에 파악하고 있는 사람은 많지 않으므로 헷갈릴 수 있겠네요~ 해결하셨다니 다행입니다!

    • 애리포터 2022.01.05 22:16 신고

      미넴님 스킨 잘 사용하고 있습니다. 이번에 업데이트도 해주셔서 바로 다운받아서 잘 사용하고 있습니다. 감사합니다ㅠㅠ
      질문하나 드리자면 다국어 번역이랑 다크모드, 글자크기 조절하는 기능을 없애고 싶으면 html편집을 들어가서 처리를 해야하나요?

      답글

      • 아미넴 2022.01.06 18:41 신고

        안녕하세요. 미넴 스킨 이용해 주셔서 감사합니다 ㅎ
        관리자 페이지 꾸미기 > 사이드바에서 추가/제거 및 위치 조절하실 수 있습니다

    • 제식 2022.01.09 08:59 신고

      안녕하세요. 멋진 스킨 공유 해주셔서 정말 감사합니다.
      오늘 스킨을 적용해보니 html편집 맨 밑줄에</body> </html>등 여러 부분이 빨간색 표시로 되어있던데 상관없나요?
      스킨 적용은 잘 되었는데 혹시나 해서 문의 드립니다.
      답글

      • 아미넴 2022.01.09 19:53 신고

        안녕하세요~ 미넴 스킨 이용해 주셔서 감사합니다!
        그 부분은 티스토리 자체 태그를 제대로 파싱하지 못해서 생기는 현상으로 보이는데 문법적인 오류는 없는 것으로 확인하였으니 걱정 안하셔도 될 듯 싶습니다 ㅎ

    • 익명 2022.01.10 21:59

      비밀댓글입니다
      답글

      • 아미넴 2022.01.10 22:02 신고

        사이드바의 모든 기능은 관리자 페이지의 꾸미기 > 사이드바 메뉴에서 추가, 제거, 위치 조정이 가능합니다 ㅎ

    • 익명 2022.01.11 06:07

      비밀댓글입니다
      답글

      • 아미넴 2022.01.11 20:10 신고

        안녕하세요.
        스크롤 광고는 특별히 어려울 것이 없습니다. 관리자 페이지의 스킨 편집에서 애드센스 광고 공통 부분에 data-ad-client 코드를 넣고 사이드바 구글 일치하는 광고 data-ad-slot에 일치하는 광고 코드를 넣은 다음 광고 관련 설정에서 플로팅 광고 자동 스크롤 옵션을 켜기만 하시면 됩니다.
        모바일로 광고 안나옴이라고 말씀하신 건 정확히 어떤 의미인지 모르겠지만 광고가 안 나오는 원인에는 여러가지 원인이 있을 수 있어서 만족할 만한 답변을 드리기 어려울 것 같습니다.
        미넴 스킨 이용해 주셔서 감사합니다~

    • 익꿍 2022.01.21 19:14 신고

      안녕하세요^^미넴님 지나가다가 미넴 스킨이라는 좋은 무료 스킨을 알게 되었네요. 재능기부에 감사 드립니다. 혹시 스킨을 미넴스킨으로 다운로드 후 변경하면 미넴님처럼 글 상단과 사이사이 광고가 2개로 나뉘어서 송출되는지도 궁금합니다. 지금은 반응형 디스플레이 광고를 사용하는데 길게 한 줄로만 송출되고 있거든요. 2개씩 나누어서 광고가 보인다면 지금보다 훨씬 더 깔끔한 광고 UI를 사용가능할 것 같아서요. ^^ 읽어주셔서 감사드립니다.
      답글

      • 아미넴 2022.01.21 21:31 신고

        안녕하세요. 미넴 스킨 관심 가져 주셔서 감사합니다 ㅎ
        네 미넴 스킨을 적용하시면 지금 제 블로그에서 보시는 대부분의 기능을 쉽게 이용하실 수 있습니다.

    • 제식 2022.02.04 18:15 신고

      정말 강추하는 스킨 입니다!
      아미넴님 스킨을 적용한지 1달째인데 너무 좋은거 같아요.
      애드센스 광고 수익도 상승했습니다.
      무료로 스킨을 공유해주신 아미넴님 정말 감사드립니다.
      답글

    • 익명 2022.02.05 05:32

      비밀댓글입니다
      답글

      • 아미넴 2022.02.05 12:42 신고

        안녕하세요. 미넴 스킨 관심 가져 주셔서 감사합니다.

        Webp 이미지라고 해서 모바일에서만 안 나올 이유는 없어 보여서 실제로 테스트 해 본 결과 문제가 없었습니다.
        https://armynem.tistory.com/8

        아무래도 특정 OS나 브라우저에서만 그러거나 짱구님이 미넴 스킨에 포함된 기능 외에 다른 기능을 적용해서 영향을 받았거나 하는 등의 다른 이유가 있을듯 싶습니다.

    • 익명 2022.02.05 16:58

      비밀댓글입니다
      답글

      • 아미넴 2022.02.05 17:00 신고

        아.. 그 부분은 테스트 해보지 못했는데 좀 더 확인해 보고 말씀드릴게요~

      • 직장인 짱구 2022.02.05 17:00 신고

        넵!! 감사합니다!! 기다리고 있겠습니다!

      • 아미넴 2022.02.05 17:13 신고

        저는 역시 문제가 없네요.
        https://armynem.tistory.com/8

        일단 일시적인 현상이었을 수도 있을 것 같구요. 아니면 제가 직접 현상을 확인해야 조치도 가능할듯 싶은데 혹시 미넴 스킨을 꼭 사용해 보고 싶으시다면 테스트 블로그 하나 만드셔서 현상을 재현해 주시면 좀 더 봐드릴게요~

      • 직장인 짱구 2022.02.05 19:43 신고

        감사합니다!! https://tmi-man.tistory.com/3

        만들어서 해봤는데 아무리 만져도 적용이 안되네요ㅠㅠ

      • 아미넴 2022.02.05 20:24 신고

        혹시 아이폰 사용 중이신가요?
        처음 말씀드린대로 특정 브라우저 문제 같습니다. 크로미움 브라우저에서는 정상인걸로 봐서 웹킷 엔진 브라우저에서 간혹 정상 동작하지 않는 것으로 보이는데 조치 가능한지 보고 말씀드릴게요.
        임시 조치 방법으로는 일단 이미지 지연 로딩을 사용하지 않으시면 됩니다.

      • 익명 2022.02.05 20:27

        비밀댓글입니다

      • 아미넴 2022.02.05 21:49 신고

        말씀하신 현상 수정하여 본문에 재업로드 하였으니 참고 바랄게요!

    • 익명 2022.02.05 22:08

      비밀댓글입니다
      답글

    • 익명 2022.03.06 16:11

      비밀댓글입니다
      답글

      • 익명 2022.03.06 16:29

        비밀댓글입니다

      • 아미넴 2022.03.06 18:10 신고

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

        애드센스 광고 송출 관련해서는 저도 100% 이해하고 있지는 않습니다. 정책에 맞게 사용하고자 하신다면 직접 공부하시는 것이 더 나을듯 싶구요. 제 스킨은 광고를 특정 위치에 좀 더 쉽게 게재할 수 있는 수단을 제공해 드릴 뿐입니다.

        1. 애드센스 사이트에서 생성해 주는 광고 코드에 속성 값으로 지정되어 있습니다. 실제 속성과 같은 이름이므로 헷갈릴건 없어 보입니다. 예를 들어 다음과 같은 형태입니다.
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
        crossorigin="anonymous"></script>
        <!-- 글 중간 반응형 사각형2 -->
        <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
        data-ad-slot="xxxxxxxxxx"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>

        2. 위반이라고 할 것까진 없어보이고 자동 광고는 말그대로 자동으로 알아서 판단해주므로 크게 우려할건 없을 것 같습니다.

        3. 광고 종류에 따라 달라서 원하시는 광고 유형 관련 도움말을 직접 찾아보셔야 할 것 같습니다. 참고로 제가 설정한 광고는 디스플레이 반응형입니다.

        도움이 되셨길 바랄게요~

      • 익명 2022.03.06 18:16

        비밀댓글입니다

    💲 추천 글