본문 바로가기

전체 글84

사이드 바 - 달력 / 글 보관함 / 링크 스킨마다 있을 수도 있고 없을 수도 있는 사이드 바의 각 아이템들 중에... 북클럽 스킨에는 달력 / 글 보관함 / 링크 가 없네요... 쩝... 달력은 월별 / 일별로 글을 모아 보기에 편하고... (스스로에겐 1일1포스팅이 잘 되고 있는지도 알 수 있고. ㅋ) 글 보관함은 지난 6개월간 월별로 글수를 볼 수 있고... 링크는... 뭐 외부 링크들을 주욱 모아 놓으니 좋고... 이런저런 이유로 혹시 이들이 필요하다면 (어떤 스킨이건) 간단히 추가 할 수 있습니다. 방법 관리 > 스킨편집 > html 에서 를 찾아 그 위에 아래 내용을 넣어줍니다. 달력 월별 포스팅 () 링크 ... ... 그리고 CSS에 스타일을 추가합니다. .sidebar .archive, .sidebar .calendar, .sid.. 2020. 9. 28.
우클릭 차단 해제하기 - 크롬 확장 프로그램 가끔 웹 서핑중 우클릭이나 드레그를 차단해놓은 사이트들이 있어서 답답할 때가 있습니다. (특히 티스토리 블로거들....ㅋㅋ) 전 그럴때 간단히 클릭 두번으로 해결하곤 하는데요, 크롬을 주 브라우저로 쓰고 있다 보니 심플한 확장 프로그램 하나 추가해놓고 쓰고 있습니다. 프로그램 주소: chrome.google.com/webstore/detail/enable-right-click/bofdamlbkfkjnecfjbhpncokfalmmbii/ 마우스 오른쪽 버튼 클릭 사용 Enable Right Click context menu on any website. chrome.google.com 설치 후 브라우저 상단 툴바에 버튼이 나오게 해놓고 필요할 때 클릭하면 됩니다. 그냥 고민없이 Ultimate Mode 로... 2020. 9. 28.
댓글/방명록 이모티콘 - 장려하기? 어차피 댓글도 잘 안달리는데 이모티콘이 무슨 소용이겠냐만...ㅠㅠ 공식 이모티콘 플러그인이랍시고 고작 :) ;) :P 8D :( --; 6개만 지원하는데 뭔 의미가 있겠냐만... 그래도!! 이모티콘 플러그인을 사용중이라면, (즉, 관리 > 플러그인에서 [댓글/방명록 이모티콘 표시] 플러그인을 활성화했다면!) 댓글 쓰는 사람에게 이를 알려주고, 더 나아가 편리하게 이모티콘을 입력할 수 있게 해주면 좋겠죠?!!! Why not?! ㅋ 적용 방법 스킨편집 > html 편집 > html 내용중에 댓글/방명록 입력폼 두곳을 찾아 아래처럼 코드를 추가합니다. 이모티콘: .... .... .... 이모티콘: .... .... .... .... .... .... 잘보시면 2020. 9. 24.
북클럽 스킨 - 커버 갤러리 (설명 및 버그 수정) 홈 화면에 주로 사용되는 커버 갤러리에 대해 살펴보았습니다. (뭐가 뭔지 매번 적용해서 보고 수정하고 하는게 자증나서..ㅋ 공부하는 차원으로...) 커버 갤러리1 커버 갤러리2 한 화면 노출 글 수: PC (5), Mobile (2) (그 이상은 슬라이더로 처리됨) 한 화면 노출 글 수: PC (3), Mobile (1) (그 이상은 슬라이더로 처리됨) 표시 항목: 이미지 + 제목 표시 항목: 이미지 + 제목 + 본문3줄 + 댓글 수 + 작성일 CSS 클래스명: cover-thumbnail-3 CSS 클래스명: cover-thumbnail-4 위는 북클럽 스킨의 목록 스타일로 제공되는 커버 갤러리1과 2의 비교 표입니다. 각기 스타일도 다르고 아이템의 크기도 다르니 잘 살펴보시고 필요에 따라 적당히 골라.. 2020. 9. 24.
placeholder - 임시 이미지 제공 서비스 위 이미지는 https://via.placeholder.com/150/FFFF00/000000 로 만들었습니다. 테스트용 이미지가 필요하거나, 기타 웹 작업할 때, placeholder라고 하죠? 임시 이미지들을 제공하는 유용한 서비스입니다. 급히 텍스트를 이미지로 넣어야 할 때도 쓸 수 있습니다. 주소만 기억했다가 2020. 9. 23.
iOS - 유튜브 pip 으로 보기 (잠금화면 재생도 가능) 아이폰에서도 유튜브를 다른 작업하면서 동시에 듣거나 볼 수 있네요 심지어 화면 잠금 상태에서도 계속 나오게 할 수 있고요 (브라보~) 거쳐야 할 과정이 좀 있지만 그래도 얻는 효과가 뛰어남! 방법 iOS 14으로 업데이트 Shortcut 앱 실행 Gallery 로 가서 아무 숏컷이나 하나 추가 숏컷 앱 첫화면 목록에서 아무 숏컷이나 하나 실행 밖으로 나와 설정 > Shortcut에 가서 Allow Untrusted Shortcuts 활성화 (신뢰하지 않는 바로가기 허용?) 브라우저 (사파리나 크롬) 실행 후 www.icloud.com/shortcuts/14c9a5660d63427b83b0ce7465ea472d 로 가서 YouTube Pip 숏컷 추가 (제일 하단에 빨간 버튼 나옴) 앱 스토어에서 Scri.. 2020. 9. 20.
북클럽 스킨 - 메뉴 확장 상단 메뉴를 꼭 확장해서 써야 한다면.... (보여줄 페이지가 많다거나 해서...?) 메뉴들을 수동으로 관리할지언정 난 이렇게 펼치는 메뉴가 필요해! 그렇다면.. 간단히 가능한 방법이 있어 올립니다. 적용 방법 관리 > 스킨 편집 > html 편집에서 아래 3줄을 찾아서 (샾은 #으로...ㅋ) ... [샾샾_blog_menu_샾샾] 아래 내용으로 덮어 버리시면 가능합니다. 홈 서브메뉴 1 서브메뉴 222222 서브메뉴 3 태그 섭섭이 메뉴 1 섭섭이 메뉴 2 태그2 섭섭이 1 섭섭이 2 방명록 jQuery 버리기 자~ 이제부터 상단 메뉴는 수동 관리 체제에 돌입합니다. ㅋ 메인 메뉴 구성하실 때 참고할 부분은.. 이렇게 첫 메뉴과 끝 메뉴에는 클래스명에 first / last 를 넣어주세요 서브 메뉴는 .. 2020. 9. 18.
이미지 클릭 시 다른 이미지 보여주기 포럼에 답변하기 위해 작성하는 포스팅! 라이트 박스 플러그인 사용중이고 본문 이미지 클릭 시 다른 이미지가 보여지길 원한다면! (보통은 이럴 필요가 전혀 없지만..) 스킨편집 > html 편집으로 가서 하단 윗줄에 아래 내용 추가 그리고나서 글 작성 시에는, 일단 평소처럼 이미지를 모두 올리며 글을 쓴 후 저장하기 전에 html 모드로 변경해서 이미지당 아래처럼 클릭 시 대신 보여질 이미지의 주소를 data-alt 로 추가해줌 ....height="NaN" data-alt="....대체할 이미지 주소..." data-ke.... 이렇게요. 아래는 실제 적용 사례 (클릭해 보세욤) 조금 수작업이지만... 그래도 이 방법말고는 없을 듯 합니다. 그리고 대체 이미지도 업로드해야 한다면 일단 그냥 보이게 업로드.. 2020. 9. 17.
제이쿼리 버리기 - Bye jQuery 장점도 많고 알아두면 매우 편리한 jQuery. 나에게 코딩의 즐거움을 선사했고 너무나도 유용하게 잘 썼던 제이쿼리. 그러나 그간 브라우저들도 많이 좋아져서 제이쿼리가 아니어도 충분히 어렵지 않게 많은 것들을 구현할 수 있게 되었고, 제이쿼리 기반으로 뭔가를 뚝딱 만들어 나눌 때 이용자의 환경에도 꼭 제이쿼리가 설치되어 있어야 한다는 전제가 있는 것도 좀 불편하고, 설치되어 있는 제이쿼리 마저도 버전에 따라 문제가 발생할 수도 있고, 제이쿼리가 워낙 제공하는 기능이 많다보니 처리 속도 면에서는 조금 느린 듯 하고, 이제 브라우저는 최저 IE11 까지만 지원을 고려하면 될 것도 같고, 그래서, 이런저런 이유로인해 최근엔 제이쿼리를 가급적 안쓸려고 하고 있네요. 또한, 개인적으로는 개발속도나 소스가 조금 길.. 2020. 9. 17.
Odyssey 오디세이 스킨 - 사이드 바 고정 코드 재활용 및 저장 차원에서.... 혹시 나중에 나도 스킨을 바꿀지 모르니까.... 오디세이 스킨에서도 사이바 고정을 원한다면... 1. 스르륵 따라오는 버전 @media screen and (max-width:1060px) { aside.area-aside { margin-top: 0 !important; } } .main { align-items: flex-start; } aside.area-aside { transition: margin-top 0.5s ease-in-out 0s, right .5s; } //// 아래 offset 함수는 퀵점프에 이용된 함수라, 이미 html상 존재한다면 삭제해도 됨 function offset(el) { var rect = el.getBoundingClientR.. 2020. 9. 16.
Odyssey 오디세이 스킨 - 사이드 바 위치변경 새로나온 오디세이 스킨을 2단으로 사용할 경우, 사이드 바는 우측에 나오는게 기본입니다. 그런데 이게 굳이 왼쪽에 나오길 원하신다면... html 편집으로 전체를 내부 최상단으로 이동하고 margin값만 조정하면 됩니다. 그러나, 소스상 원래 구조를 건드리고 싶지 않다면 아래와 같이 간단히도 해결이 가능합니다. 스킨편집 > html 편집 > 하단 가 끝나기 전에 아래 코드 추가. 조정하고 나면 이렇게 됩니다. 2020. 9. 15.
Odyssey 오디세이 스킨 - 상단 메뉴 고정 새로운 스킨 '오디세이'(Odyssey)가 나왔죠? 포럼에 어떤분이 올리신 질문에 답변으로 쓴건데.. 없어지면 아까우니 포스팅으로도 남겨봅니다. 이 스킨을 사이드 바가 가려진 1단으로 쓰고 있는 경우, 아래 코드를 스킨편집 > html 편집 으로 가서 하단 가 끝나기 전에 넣어 주면 상단 메뉴가 늘 화면 위에 붙어 있게 됩니다. (아니면 요롷게 스타일로만으로도 고정이 되서 다행입니다. 2020. 9. 15.
현재 접속자 현황 - whos.amung.us 오늘 얼마나 놀러들 오셨나~ 이번주는 방문자가 몇이나 되나~ 늘 관심이 가는 내용이죠? 그러나 이런것 외에도... 지금 당장 롸잇나우 몇명이나 내 블로그를 보고 있지?!! 이런게 궁금할 때 쓸 수 있는 무료 서비스(위젯)가 있어 소개합니다. whos.amung.us - free real-time stats! Free real-time analytics for your website or blog! No account required. Customize your free widget and get started! See where your visitors are from and what pages are most popular on your website. whos.amung.us 가입도 필요 없고, 설치.. 2020. 9. 14.
주저하는 연인들을 위해 - 잔나비 전혀 모르고 살다 일전에 놀면 뭐하니 방송을 통해 알게된 곡 근데 이게 2집이라니... 1집도 들어봐야겠네.. 했던 곡 음악은 뭔가 촌스럽고 딱 내 감성.. 아니 나보다도 살짝 더 오래된 감성인데 세련되고 서정적이다. 가사도 매우 문학적이고... 잔잔하다... (앨범 커버마저도 그러하다) 언젠가 헤드폰으로 집중해서 반복 청취를 한 적이 있는데.. 점점 눈시울이 뜨거워졌던 기억이 난다.. 그날의 기분 탓이었을까.. 노래가 주는 위로의 힘이었을까... 분명 사랑 노래인데.. 그냥 삶에 대한 노래같다. 내 마음 속, 살짝 쓸쓸한 밤에 생각나는 노래로 선정되셨습니다. 잔나비 = 원숭이 2020. 9. 14.
사이드 바 - 스크롤 따라 다니게 만들기 따라다니는 메뉴? 보통 Sticky 라고 하나요? 평소엔 자기 위치에 있다가 위아래로 스크롤 될 때는 화면상 위치가 고정되는거요. (이미 좌측 사이드 바에 적용되어 있습니다.) 특히 요샌 포스팅 길이도 많이들 길고해서 사이드 바에 이 기능이 적용되서 따라다니면 좋겠다는 생각을 해봤습니다. 그래서 살펴보니 float 이 적용된 제 사이드 바를 그렇게 만드는 방법은 3가지 정도 있을 것 같습니다. 우선 제일 쉬운 방법부터... 방법 1. CSS 의 position : sticky 사용하기 #aside { position: sticky; top: 0; } 위 내용을 css에, 아니면 html에 style 태그로 감싸서 넣어줍니다. (#aside 는 북클럽 스킨 사이드바에 지정된 아이디입니다. 필요 시 수정!).. 2020. 9. 11.
태그 - 강조 차등 적용 (+ 보너스) 원래 태그가 등록 빈도에 따라 5단계로 나눠지는거였군요?! 그렇다면 각 단계별로 다르게 표현할 수 있겠네요. ^^ 알아보니 태그에는 cloud1 부터 5 까지 순위별로 클래스가 적용될 수 있습니다. (1 = 제일 많이 등록된 태그) (북클럽 스킨에선 역시나 누락된 내용이군요... 췟..) 적용 대상 사이드 바 > 랜덤태그 목록 메뉴 > 태그 페이지 (위 두 곳 외에도 글 하단에 나오는 태그도 있죠? 그러나 거긴 빈도레벨 구분 적용이 안되서 패스합니다) 적용 방법 1. 스킨 html 수정 (북클럽 기준으로 작성한 내용입니다. 다른 스킨이고 이미 적용되어 있다면 굿!) 태그 ... ... ... 태그 위 7, 21번 줄처럼 가 들어있는 랜덤태그 목록의 태그들 끝에 [더보기] 추가하는 법 스킨 html 을 수.. 2020. 9. 7.

티스토리툴바