현재 이 블로그에 적용되어있는 기능인데요, 디스커스는 댓글 갯수를 표시해주는 기능이 있습니다. (티스토리 댓글 갯수 치환자 처럼) 먼저 Install code를 얻은 화면으로 가야합니다.Moderator 화면에서 Settings - Install을 클릭합니다. 티스토리는 Universal Code를 사용합니다. 첫부분이 아닌, How to display comment count 영역을 봐주세요.1.번 코드는 댓글 갯수 치환을 위한 스크립트이고,2.번영역은 댓글 갯수가 들어갈 위치 치환자입니다. 1.번 코드를 skin.html의 윗줄에 붙여넣어주세요. 다음 코드는 댓글 갯수가 표시될 위치에 붙여넣으시면 됩니다.댓글빨간색 '댓글'은 아직 댓글 갯수 정보가 수집되지 않았을 때 표시되는 문자입니다. '댓글' 정..

CodePen에서 현재 스크롤 위치를 인식하는 코드를 찾다가 발견했습니다. 먼저 스크롤 위치를 퍼센트로 나타내려면 다음처럼 jQuery를 사용하면 됩니다.$(window).scroll(function(){ scrollPercent = ($(window).scrollTop()/ ($(document).height()-$(window).height())) * 100;}); 다음은 이를 응용해 70% 스크롤을 했을 때 숨어있던 상단바가 내려오는 예제입니다.70%이상 스크롤하면 상단바가 내려옵니다.See the Pen Scroll detection by Kim young wook (@nubiz) on CodePen. 반면 현재 이 블로그에는 조금 다른 방식의 모바일 상단바가 적용되어있는데요. 스크롤을 내리면 사..

바이두 클라우드는 무려 2TB의 용량을 제공하기 때문에 대용량 파일 공유에 많이 사용되고 있습니다. 그러나 자주 쓰는 사람은 문제가 없다 하더라도, 중국어라는 언어의 장벽 때문에 공유 링크를 받은사람이 어떻게 다운받는지 몰라 난처한 경우가 많습니다. 그래서 가능한 알기쉽도록 스크린샷과 함께 바이두 클라우드를 통해 공유받은 파일을 다운받는 방법을 알아보겠습니다. 바이두 클라우드를 공유하실 때 받는 분이 잘 모르실 것 같으면 이 글을 함께 링크해주세요~ 바이두 클라우드로 공유받은 파일 다운받기 0.시작하기 전에 '크롬'브라우저를 사용해서, 마우스 오른쪽 버튼 클릭으로 한국어 번역기능을 사용하면 편리합니다. 1.받은 링크를 통해 접속하면 다음같은 화면이 나올겁니다. (비밀번호가 필요하다면 입력합니다.)이때 주..

오랜만에 addthis분석을 보려고 addthis.com에 접속했더니 사이트 레이아웃도 달라지고 제공하는 플러그인도 업데이트 되었더군요. 기존의 것도 유용하긴 하지만 커스텀이 어려웠고 페이지 로딩시간에 영향을 꽤 많이 주었습니다. 새로 업데이트 된 버전은 제가 느끼기에 다음과같은 변화가 생겼습니다.더 가벼워졌다.플러그인의 기능들이 각각 모듈화되었다.모듈이 다양해졌다.스크립트를 하나만 넣어도 된다.HTML수정이 필요없어서 적용하기 쉽다.HTML수정 없이 대시보드에서 커스텀을 할 수 있다.주소 뒤에 #+특수문자들이 사라졌다https://www.addthis.com/적용 방법 로그인 후 DASHBOARD에서 Tool Gallery를 선택한 화면입니다. 각 모듈이 어떻게 동작하는지 시각적으로 쉽게 보여주고있습니..

이 포스트는 아래 두 글에서 이어집니다. [iTIPs/Web] - 블로그에 카카오톡, 카카오스토리로 공유버튼 만들기 [iTIPs/Web] - AddThis share buttons 공유버튼 플러그인에 카카오 공유 추가하기 변경점 카카오톡 공유에서 메시지에 본문 내용이 일부 포함되게 됩니다. (태그 기준으로 4문장)카카오스토리 공유 스크립트가 간소화됐습니다. 그냥 카카오 스토리 자체 스크랩기능으로 공유됩니다.버튼 클릭 이벤트를 jQuery에서 img태그 자체에 onclick 이벤트로 변경했습니다. 스크립트버튼부분 스크립트 부분파란색으로 표시된 부분을 본인의 블로그에 맞게 수정하시면 됩니다.(이전 포스트 참고) . 카카오톡 링크 2.0 API 종료.. 카카오톡 링크 2.0버전 API는 6월 30일부로 종료된..

Disqus 댓글이 생소해서, 혹은 라이브리 처럼 남긴 댓글이 sns에도 그대로 뜨는건 아닐까 해서 댓글남기기 꺼려하시는 분들이 많은 것 같습니다. 그래서 이번 글에서는 디스커스 댓글 창 위에 안내문구를 삽입하는 방법을 알아보겠습니다. CSS의 pseudo-element selector인 :before를 이용하여 간단히 마칠 수 있습니다. 디스커스를 skin내에 여러군데 삽입한 경우에도 모든 곳에 일괄적으로 표시되어 편리합니다. 적용 방법 html/css편집에 들어가서style.css에 다음을 추가해줍니다.#disqus_thread:before { white-space: pre; content: "SNS계정으로 댓글을 달아도 SNS에 글이 남지 않습니다.\a 비회원 댓글을 남길 때 이메일 주소를 입력하시..

blur효과를 배경이미지에만 적용하는 방법입니다.-webkit-filter: blur(6px)를 적용하면 Element내부요소까지 죄다 흐려지는 바람에 배경에만 적용할 수 있는 방법을 찾다가이번에도 codepen의 도움을 받았습니다.(IE에서는 제가 어딘가 잘못한건지 적용이 안되고, 크롬에서는 정상작동합니다.) 현재 화면크기가 태블릿크기 이상일 때 보이는 상단바 배경에 적용되어 있습니다. 원래는 이런 선명한 이미지입니다. http://blog.readiz.com/217http://onasaju.tistory.com/311두 게시물을 참조하여 배경을 넣고,skin.html에서를 찾아서 로 바꾼 후,style.css에 아래 적용방법의 2번에 있는 css를 추가해주시면됩니다. secondNav를 저처럼 상단바..