netwareMore

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() 티스토리 북클럽 스킨의 script.js 파일의 GNB 관련 코드입니다. GNB는 블로그 페이지 상단의 내비게이션 바 메뉴를 말합니다. 1. 현재 페이지가 메뉴 항목과 일치하면 "current" 클래스를 추가합니..

jQuery 메서드 비교 append, prepend

append() Inserts the specified content, to the end of each element in the set of matched elements.Inserts the specified content as the last child of each element in the jQuery collection.Puts data inside an element at the last index잘라서 붙여 넣기(이동) / 콘텐츠 끼워 넣기 syntax:.append( content [, content ] ).append( function ) $gnb.find("li").each(function() { if ( $(this).find("a").prop("href") == window.lo..

SVG animateTransform element

SVGscalable vector graphicsvector-based graphics and animations in HTML Canvas syntax: transformationstransformation 유형(함수) matrixperspectiverotatescaleskewtranslateattributes of animateTransform from:the initial(start) value of the attribute during the animation애니메이션 속성의 시작 변수 to:the final(end) value of the attribute during the animation속성의 종료 변수 by:the relative offset value of the attribute du..

jQuery 메서드 비교 hide, detach, empty, remove

hide() Hides the matched elements. Sets the matched elements' CSS display property to none. detach() Removes the set of matched elements from the DOM. Removes all child elements with the selected elements. Keeps all data and event handlers of the removed elements. Preferred to remove elements but to keep copy of the removed elements for reuse at a later time. How to reinsert the detached element..

티스토리 블로그 애드핏과 애드센스에 'ADVERTISEMENT' 광고 표시 부착

티스토리 블로그에 올리는 애드핏, 애드센스 광고에 해당 이미지나 글이 홍보를 목적으로 하는 내용이라는 표식을 부착하는 방법입니다. 외국의 일부 국가에서는 의무적으로, 관습적으로 혹은 자발적으로 해당 콘텐츠가 광고라는 것을 표시하는 것 같습니다. 국내의 특정 콘텐츠 마케팅 업체의 광고에도 이러한 표식을 부착하는 곳이 있습니다. 애드핏과 애드센스의 국내 광고는 표시하지 않습니다. 표시 문구는 'AD' 혹은 'ADVERTISEMENT'를 많이 사용합니다. 부착하면 장점보다는 단점이 많을 것 같습니다. 각자 판단하여 필요하신 분은 사용해 보세요. 단점은 너무 많으니까 나열할 필요도 없을 것 같습니다. 장점 중의 하나는 위 이미지에 표시한 것과 같이 'ADVERTISEMENT' 문구가 빠르게 로딩된다는 것입니다...

구글 애드센스 블로그 홈 화면에서 제외

구글에 웹 페이지 로딩 속도, 시인성 등 여러 가지 사용자 접속 환경을 정밀하게 측정하는 PageSpeed Insights라는 도구가 있습니다. 블로그의 수정이 잦으니까 가끔 알 수 없는 오류가 발생하기도 하고 이 도구의 측정 점수가 뚝 떨어지기도 합니다. 심쿵하기도 하고 다시 복구해야 하는 데 마음이 편하지 않습니다. 자주 하니까 짜증이 나는 거죠. 편하게 모든 과오는 블로그에 붙여 놓은 애드센스와 애드핏 배너 광고의 탓으로 돌립니다. 블로그 첫 페이지(홈 화면)에서 광고를 제거하면 측정 점수가 잘 나오고 처음 접속자가 쾌적하게 블로그 구독을 시작할 수 있습니다. 거기에 덧붙여 구글에서 검색 순위를 높여준다는 확인되지 않은 소문도 있습니다. 일단 고득점만 하면 됩니다. 인덱스, 본문 페이지는 나중에 따..

북클럽 스킨 페이지 검색 버튼 표시 방법 수정

티스토리 북클럽 스킨에서 사용하는 페이지 이동 링크 'pagination'의 이전 'prev'와 다음 'next' 버튼의 보기 형태를 수정하는 코드입니다. - 카테고리의 리스트 페이지들- 현재 보고 있는 페이지의 이전 혹은 다음 페이지들- 검색 결과로 제시하는 페이지들의 숫자 모두 '.pagination' 클래스의 하위 클래스인 '.prev'와 '.next'의 구조로 관리합니다. 북클럽 스킨과 오딧세이 스킨의 버튼 표시 모습을 비교하여 설명하고 북클럽 스킨에 필요한 수정 코드를 등록하였습니다.최근에 제공한 티스토리 오딧세이 스킨의 페이지 이동 버튼의 구현 모습입니다. 현재 1 페이지를 보고 있습니다. 왼쪽 마지막 페이지이기 때문에 이전('prev') 페이지 버튼을 표시하지 않습니다. 현재 19 페이지를 ..

Book Club 스킨 홈 커버 아이템 오류 수정

코드 작성자: openperl@naver.com 블로그: netwaremore, TechWrite, Translation (tistory.com) 2021.08.14 - 더보기 숫자 표시 부분 스크립트 파일 오타 교정 - 수정한 첨부 파일 등록 2021.07.27 - 더보기 버튼에 숨긴 글 숫자 추가 ※ 코드에 오류가 있을 경우 댓글 남겨 주시면 많은 도움이 됩니다. 오류 발생 원인 1. 조건식 오류 if ( $item.length > 4 ){ $item.each(function(){ if ( $(this).index() > 4 ) $(this).hide(); }); $cover.append('more'); $cover.on("click", ".more", function(){ $(this).remove..

구글 애드센스 광고 배너 상, 하단 마진 없애는 방법

.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-place..

IT와 블로그 관리에 도움이 되는 외부 페이지 개인 링크

Web Font Loader Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-develope..