수정 21 북클럽 스킨 사이드바의 '로그인'과 '로그아웃' 오류 수정 티스토리 블로그의 북클럽 스킨의 코드 오류를 수정하는 방법입니다. 모바일 접속할 때 팝업 창으로 뜨는 사이드바의 '로그인'과 '로그아웃'이 오류 수정 대상입니다. 텍스트로 링크되어 있는 이 버튼은 눌러도 반응이 없습니다. 블로그 관리자가 로그인한 상태이면 '로그아웃' 버튼이 보이고, 관리자가 로그인하지 않았으면 '로그인' 버튼이 보입니다. 오류가 발생하는 이유 아래 코드는 북클럽 스킨의 자바스크립트를 담고 있는 파일에서 복사한 오류 발생 부분입니다. 북클럽 스킨의 자바스크립트 코드는 'script.js' 파일에 담겨 있습니다. $profile.on("click", ".login", function(){ document.location.href = 'https://www.tistory.com/auth/lo.. 2021. 9. 23. Book Club 스킨 NavBar 'current' 표시 형태 수정 $(window).load(function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){ $(this).addClass("current"); } }); $gnb.find("ul").width(gnbWidth); if ( $gnb.width() < $gnb.find("ul").width() && $gnb.find(".current").length ){ var scrollPos = $gnb.find(".current").prev().length ? $gnb.find(.. 2021. 8. 24. 북클럽 스킨 페이지 검색 버튼 표시 방법 수정 티스토리 북클럽 스킨에서 사용하는 페이지 이동 링크 'pagination'의 이전 'prev'와 다음 'next' 버튼의 보기 형태를 수정하는 코드입니다. - 카테고리의 리스트 페이지들 - 현재 보고 있는 페이지의 이전 혹은 다음 페이지들 - 검색 결과로 제시하는 페이지들의 숫자 모두 '.pagination' 클래스의 하위 클래스인 '.prev'와 '.next'의 구조로 관리합니다. 북클럽 스킨과 오딧세이 스킨의 버튼 표시 모습을 비교하여 설명하고 북클럽 스킨에 필요한 수정 코드를 등록하였습니다. 최근에 제공한 티스토리 오딧세이 스킨의 페이지 이동 버튼의 구현 모습입니다. 현재 1 페이지를 보고 있습니다. 왼쪽 마지막 페이지이기 때문에 이전('prev') 페이지 버튼을 표시하지 않습니다. 현재 19 페이.. 2021. 7. 30. 구글 애드센스 광고 배너 상, 하단 마진 없애는 방법 .navigation + .google-auto-placed .adsbygoogle { margin: 0 auto !important; } 구글 애드센스 배너를 자동으로 설정하면, 블로그나 운영 사이트의 상단 메뉴바 혹은 헤더 바로 아래 배치됩니다. 배너 상단과 하단의 간격은 마진으로 10px입니다. --- 헤더 (혹은 메뉴바) --- 10px의 공백, margin 10px --- 애드센스 배너 --- 10px의 공백, margin 10px 이 형태인데 사이트 디자인에 상, 하단 공백을 없애고 싶을 경우 다음과 같은 CSS 코드를 추가합니다. .google-auto-placed .adsbygoogle { margin: 0 auto !important; } - 구글 애드센스 코드: 'google-auto-.. 2021. 7. 18. Book Club 스킨 NavBar(GNB) 오류 수정 블로그의 대표 페이지 정보를 찾기 쉽게 상단에 배치하는 GNB 메뉴바의 오류 수정 티스토리 Book Club 스킨 (MIT License) 파일: "script.js" 20210402 본문 하단 "5. 추가 수정" - 로딩 속도 향상을 위한 구문 변경 20210403 본문 하단 "6. (아마도) 마지막 수정" - 내비게이션 메뉴바, #GNB의 오류를 모두 수정한 것으로 추측합니다. 1. "홈" 메뉴 이중 링크 수정 2. "홈" 메뉴를 삭제할 경우 처음 메뉴가 잘못 "current" 표시되는 오류 수정 3. 카테고리 경로뿐만 아니라 파일을 메뉴에 등록할 경우에도 "current" 표식 가능 4. 조건문을 하나로 단축하여 로딩 속도 단축 기본 코드의 오류 증상 1. 북클럽 스킨의 기본 코드 스킨 데모 페이지.. 2021. 3. 30. 웹 브라우저의 추가 연산을 요구하지 않는 CSS 코드 개인 블로그 관리하면서 실행 코드를 정리하고 있습니다. 자그마한 코드 수정으로 인하여 2회 정도 블로그의 웹페이지 로딩 속도가 눈에 띄게 좋아지는 경험을 하였습니다. 정확한 전문적인 정보에 의한 수정 작업이 아니기 때문에 조금씩 공부하고 있는 입문자의 경험담이라 생각하시면 됩니다. 웹페이지 로딩 속도는 구글의 측정 사이트에 MS 엣지 혹은 구글 크롬 웹 브라우저로 접속하여 측정한 것입니다. 인터넷을 거쳐서 블로그에 접속하면 블로그 서버에서는 페이지 코드를 담은 데이터를 일정한 과정을 거쳐서 전송하고 웹 브라우저가 이 코드를 받아 CPU, GPU, 메모리 등의 연산 작업을 거쳐 스크린에 렌더링 하는 것이기 때문에 측정 수치는 웹 브라우저 및 PC(기타 기기)와 전적으로 관련이 있습니다. 구글.. 2021. 3. 4. 티스토리 script.js GNB 오류 수정 ※ 2020.11.27: 블로그 반영 ※ 2024.03.26: 아래 링크한 알릭2님의 블로그에 원본 소스를 수정하는 자세한 이유와 설명이 기재되어 있습니다. 북클럽 스킨 - GNB 메뉴 현위치 버그 (tistory.com) 원본 (오류) $(window).load(function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){ $(this).addClass("current"); } }); $gnb.find("ul").width(gnbWidth); if ( $gnb... 2020. 11. 18. 티스토리 북클럽 스킨 사이드바 공지사항, 댓글 길이 조정 티스토리 블로그의 북클럽 스킨에 사이드바 블록을 사용할 때, 공지사항, 최근 글, 최근 댓글의 표시 길이를 조절할 수 있습니다. 아래 이미지는 "공지사항"을 25글자, 32글자, 40글자로 조정했을 때, 블록에 표시된 글자의 길이 변화를 보여 줍니다. 여백을 최대한 활용하여 전달하는 정보의 양을 적당하게 늘리는 것이 좋겠습니다. 글자는 'Byte'를 나타내어 영어와 숫자는 1글자 1바이트, 한글은 1글자 2바이트입니다. 영어 기준으로 설정되어 있습니다. 30글자로 설정하면 한글 15글자가 들어갈 수 있습니다. 25 글자 32 글자 40 글자 "최근글"의 글자 길이와 리스트의 개수 조정 조정하는 옵션이 숨겨진 메뉴를 찾아서 들어가겠습니다. 본인의 블로그에 로그인합니다. '블로그 관리 홈 / 사이드바 '를 .. 2020. 9. 20. 티스토리 북클럽 스킨의 포스트 커버 기능 정지와 콘텐츠 위치 이동 티스토리 북클럽 스킨의 포스트 커버 위치 캡처 이미지입니다. 페이지의 가로폭(width) 전체를 사용합니다. 포스트 커버의 기능을 사용하지 않고 사이드바 옆의 본문 안으로 내용을 이동시킬 수 있습니다. 포스트 커버는 블로거가 등록한 정보 페이지에서 본문 위에 위치한 글의 제목, 글의 작성일, 글의 작성자, 글의 카테고리를 보여 주는 블록입니다. 이 포스트 커버를 본문 위로 이동하면 가로폭을 점유하는 공간이 사라지며, 본문 안으로 해당 내용을 이동시키기 때문에 깨끗하게 글의 내용을 편집할 수 있습니다. 아래 캡처 이미지에 포스트 커버를 이동할 위치를 설명하였습니다. 본문 내용 상단으로 이동합니다. 작업 과정은 다음 순서로 진행하게 됩니다. ※ 정보는 개인적으로 실험한 것이기 때문에 100% 안전은 보장하지.. 2020. 8. 29. 티스토리 북클럽 스킨의 포스트 커버 높이 수정 북클럽(BookClub) 스킨을 사용하는 블로그의 포스트 커버(Post-Cover) 높이를 수정하는 방법입니다. - 글 본문에 끼워 넣은 이미지를 본문 글의 상단에 재배치하여 시각적인 효과를 주는 커버 이미지이기 때문에, 텍스트 위주의 블로그, 내용을 짧게 전달하는 블로그 등에서는 별 필요가 없는 기능입니다.. - 기능 자체를 중지시키는 방법도 있지만, 인덱스, 방명록, 태그 페이지와 차이를 줄 수 있기 때문에 높이만 줄여서 사용하는 것도 괜찮습니다. 수정 전 포스트 커버 스크린샷입니다. 높이 340px(픽셀)입니다. 북클럽 데모 페이지를 참고하세요. 수정 후 포스트 커버 스크린샷입니다. 높이 100px로 줄였습니다. - 모바일 화면은 180px 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > HTML .. 2020. 8. 15.
