워드프레스 일기의 IT & 기타 778

멀티레이어 팝업 PHP 스크립트 - Layered Popups

사이트에 팝업을 띄우고 싶은 경우 인터넷을 검색하여 무료 스크립트를 활용할 수 있습니다. 사용자로부터 이메일 주소를 받거나 공지를 띄우고 싶거나 배너를 표시하고 싶은 경우 Codecanyon 마켓에서 판매하는 Layered Popups 같은 PHP 스크립트를 이용해볼 수 있습니다. 다양한 형태의 팝업을 만들 수 있습니다. 다음은 이 스크립트에 대한 소개 글입니다. 인터넷에는 지루한 팝업이 넘쳐나고 있습니다. 이제 이런 트렌드를 탈피할 때입니다. 그래서 우리는 Layered Popups를 만들었습니다. 이 스크립트로 여러분의 상상력을 현실화할 수 있고 독특한(고유한) 멀티레이어 팝업 창을 만들 수 있습니다. 원하는 콘텐츠로 다중 레이어를 생성하고 각 레이어에 대하여 맞춤형 전환(transition)/애니메..

IT & 기타 2019.05.23

티스토리 Magazine 스킨: 스크롤 시 헤더에 글 제목이 표시되지 않도록 하기

이 블로그에는 최근 티스토리에서 공개한 Magazine 스킨이 적용되어 있습니다. 저는 이전 스킨의 레이아웃과 비슷하게 수정하여 사용하고 있습니다. 매거진 스킨을 적용한 상태에서 개별 포스트에서 마우스를 아래로 스크롤하면 헤더에 글 제목이 표시됩니다. 스크롤 시 포스트 타이틀이 헤더에 표시되지 않도록 하려면 스킨 파일 하나를 수정하면 됩니다. 저는 front.js 파일을 다운로드한 후에 아래 그림에 표시된 부분을 삭제했습니다. 이런 부분이 두 군데 있습니다. 표시된 부분을 삭제한 후에 업로드하여 기존 파일을 대체했습니다. 티스토리에서 스킨을 수정하려면, 잘 아시겠지만, 티스토리 관리자 페이지에서 꾸미기 > 스킨 편집을 클릭하고 "HTML"을 클릭하여 HTML 파일과 CSS 파일을 수정하거나 파일을 삭제/..

티스토리 Magazine 스킨에 브레드크럼을 추가하는 방법

브레드크럼(Breadcrubmb; 이동 경로)을 추가하면 SEO(검색엔진 최적화)에 도움이 될 수 있습니다. 그리고 구글 서치 콘솔에서 'itemListElement' 입력란이 누락되었습니다 오류가 발생하는 경우에도 브레드크럼을 적용하면 오류가 해결될 수 있습니다. 브레드크럼과 SEO 지난 달에 이 티스토리 블로그의 스킨을 Magazine (매거진)으로 변경했습니다. 티스토리의 신규 스킨 Magazine으로 변경해보았습니다 ※자동으로 브레드크럼을 추가하는 방법은 티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법을 참고해보세요. 스킨을 바꾸면서 개별 글에 그림과 같이 브레드크럼(이동 경로)을 추가했습니다. 구글 검색에서 아래 그림과 같이 이동 경로가 표시됩니다. 구글 서치콘솔에서 브레드크럼 관련 오..

티스토리에 로그인해도 다른 티스토리 블로그 댓글에서 로그인 상태가 유지되지 않는 문제

티스토리에서는 로그인한 상태에서 다른 티스토리 블로그에 쉽게 댓글을 달 수 있습니다. 티스토리에 로그인하면 이름, 비밀번호 등을 입력할 필요가 없습니다. 티스토리에서 로그인 상태가 유지되 않아 티스토리 계정으로 댓글을 달 수 없는 경우 하지만 티스토리에 로그인한 상태에서도 일부 티스토리 블로그의 댓글에서 로그인 상태가 유지되지 않아서 이름과 비밀번호 등을 입력해야 하거나 로그인 사용자만 댓글을 달 수 있는 티스토리 블로그에 댓글을 달 수 없는 경우가 있습니다. 이런 문제가 발생하면 브라우저를 바꾸어서 테스트해보면 로그인이 풀리는 문제가 해결될 수 있습니다. 저는 IE에서 주로 이런 문제를 경험하고 있습니다. 구글 크롬에서 로그인하면 이런 문제가 나타나지 않았습니다. '이 블로그는 로그인한 사용자에게만 댓..

페이지 로드 시 마우스 커서를 텍스트 입력란(input box)에 위치시키는 방법 (자바스크립트)

페이지가 로드될 때 텍스트 입력란에 마우스 커서가 위치시키고 싶을 때가 있습니다. 자바스크립트를 사용하여 페이지 로드 시 마우스 커서를 텍스트 입력란(input box)에 위치시키기 예를 들어, 페이지 로드 시 마우스 커서가 검색 필드에 위치하게 되면 사용자들이 곧바로 텍스트를 입력하여 검색할 수 있어 사용자 경험(UX)를 향상시킬 수 있을 것입니다. 이 경우 여러 가지 방법을 이용할 수 있습니다. 먼저 input 필드에 autofocus를 추가하면 간편합니다. 하지만 일부 브라우저에서는 이 기능을 지원하지 않을 수 있습니다. 다음과 같은 자바스크립트(Javascript)를 사용할 수 있습니다. window.onload = function() { var input = document.getElementB..

구글 애드센스 수익이 반영되지 않는 오류 발생 (애드센스 장애)

오늘 오전부터인지는 정확히 모르겠지만 애드센스 수익이 반영되지 않고 있는 장애가 발생하고 있습니다. 오늘 갑자기 수익이 '0' 상태로 유지되어 이런 상황이 며칠 정도 지속된다면(정책 위반이 있는지 살펴보아도 정책 위반은 없다고 표시되네요), 모든 사이트에서 구글 애드센스 광고를 제거해야 하나 생각하고 있었습니다. 혹시나 싶어 구글에서 뉴스를 검색해보니 이 문제가 미국 시각으로 수요일 저녁부터 발생하고 있다고 하네요. 문제가 전 세계적으로 발생하고 있는 것 같습니다. With AdSense, publishers can designate a space on their site for Google to serve advertising that is relevant to the visitor’s interest..

티스토리 스킨 수정하기: 구글 맞춤검색 기능 적용하기

이 블로그에는 최근 공개된 티스토리 매거진 스킨인 Magazine이 적용되어 있습니다. 스킨 그대로 사용해도 괜찮지만 저는 이전 레이아웃과 거의 비슷하게 바꾸었습니다. 데모의 헤더를 보면 왼쪽에 블로그 이름이 표시되고, 오른쪽에 검색 아이콘과 메뉴 아이콘이 배치되어 있습니다. 저는 PC 버전에서는 이전 스킨과 비슷하게 만들었습니다. (모바일 버전은 모바일 스킨을 사용하고 있습니다.) 블로그 타이틀 옆에 배너가 표시되도록 했고, 메뉴는 메뉴 아이콘을 클릭했을 때 표시되도록 하는 대신 메뉴 아이콘을 삭제하고 메뉴 항목이 표시되도록 메뉴 내비게이션을 막코딩으로 추가했습니다.ㅎㅎ 검색 아이콘은 CSS를 사용하여 오른쪽 끝으로 위치를 이동시켰습니다. 이 부분에 대해서도 기회가 되면 수정하는 방법을 설명해보겠습니다..

티스토리 스킨 변경 후 네이버 웹마스터도구에서 '서버오류' 발생하는 경우

티스토리에서 작년에 공개한 스킨과 며칠 전에 공개한 Magazine 스킨을 적용할 경우 네이버 웹마스터도구의 웹페이지 수집 요청에서 '서버오류'가 발생할 수 있습니다. 저는 Poster 스킨을 적용했다가 이 오류 때문에 기본 스킨 중 하나인 #1을 사용하다가 오늘 Magazine 스킨을 적용해보았습니다. 하지만 Magazine에서도 마찬가지로 네이버 웹마스터도구에서 웹페이지 수집 요청 시 '서버오류'가 발생했습니다. 구글에서 검색되는 여러 방법을 시도해보았지만 문제가 해결되지 않았습니다. 그러다가 어떤 글에서 /1 페이지를 지우면 서버오류 무한루프에 빠지는 것 같다는 내용을 보았습니다(https://drkimfixnsolve.tistory.com/25 참고). 네이버 웹마스터도구에서 '서버오류' 발생하는..

티스토리의 신규 스킨 Magazine으로 변경해보았습니다

티스토리에서 지난 25일에 공개한 Magazine 스킨으로 변경해보았습니다. 레이아웃은 이전과 거의 동일합니다. 댓글 시스템은 티스토리 기본 댓글과 Disqus 댓글을 동시에 표시했었지만 Disqus 댓글 사용 빈도가 거의 제로여서 디스커스 댓글은 적용하지 않았습니다. 홈 설정에서 "커버" 대신 "최신 글"을 선택하면 첫 페이지에 사이드바가 표시되지 않습니다. 억지로 PC에서 사이드바가 표시되도록 설정해보았습니다.ㅎㅎ HTML 소스를 살펴보니 첫 페이지에서 사이드바가 display:none을 사용하여 숨겨져있네요. 즉, 사이드바가 로드는 되지만 표시만 되지 않았던 것입니다. display:none을 display:inline-block으로 지정하고 콘텐츠 섹션과 사이드 섹션의 너비를 적절히 조정했습니다...

티스토리의 새로운 스킨 - Magazine

어제 티스토리에서 Magazine이라는 새로운 스킨을 공개했습니다. 스킨 이름대로 매거진 스타일로 홈페이지를 꾸밀 수 있는 스킨입니다. 6가지 커버 아이템을 지원하며, 하단 푸터 영역에 자유로운 외부 링크 및 SNS 아이콘 노출이 가능하도록 되어 있습니다. 그리고 상단과 하단에 로고 이미지를 삽입할 수 있으며, 스킨 곳곳에 사용되는 포인트 컬러는 레드/블랙/블루입니다. 이 스킨의 경우 전면 페이지에는 사이드바가 표시되지 않지만 개별 글에는 사이드바가 표시됩니다. 비교적 최근에 공개되었던 Poster, Whatever, Letter, Portfolio에 비해 기능이 향상된 것 같은 느낌을 받았습니다. Poster 등의 스킨을 이 블로그에 적용했지만 네이버 웹마스터도구에서 글 수집 요청을 하면 '서버 오류'..