전체 글 (29) 구글 블로그 '관련 글', ' 연관 글' 기능 달기 2 - 고급 버전 여기서 소개하려는 구글 블로그 연관글 기능은 같은 카테고리의 글들을 랜덤으로 제목과 썸네일, 본문 요약문인 스니펫까지 선택적으로 표시할 수 있는 버전이다. 만약 심플하게 글 제목만 나열하고 싶다면 아래 링크를 참고할 것. 구글 블로그 '관련 글', ' 연관 글' 기능 달기 1 - 심플 버전 https://pravda.tistory.com/38 기능들 글 제목, 썸네일, 스니펫 표시 가능 글 제목, 스니펫, 날짜 표시 가능 썸네일 이미지 사이즈 조절 가능 사각형 또는 둥근 썸네일 선택 가능 글 제목과 스니펫 길이 설정 가능 요구사항 구글 블로그에서 직접 업로드한 즉 피카사 앨범 이미지만 지원이 된다. 호스트가 다른 이미지는 지원하지 않는다. Dynamic Views 테마에선 작동하지 않는다. 이 스크립트는.. 구글 블로그 '관련 글', ' 연관 글' 기능 달기 1 - 심플 버전 '관련 게시글'이란? (Related Posts) 각 개별 포스트 페이지 하단 부분에 동일한 카테고리 내에 있는 글을 랜덤으로 제목과 스니펫(본문 미리보기 요약글) 그리고 썸네일(대표 이미지)과 함께 보여줌으로서 방문자가 연관된 게시물을 추가로 접할 수 있게 해주는 기능이다. 구글 블로그에는 워드프레스처럼 관련글이나 연관글 플러그인이 없어서 따로 코드를 수작업으로 넣어줘야 한다. 여기서 소개하려는 것은 글 제목만 나열하는 가장 단순한 버전이다. 만약 썸네일과 스니펫까지 표현하고 싶다면 아래 링크를 참고할 것 구글 블로그 '관련 글', ' 연관 글' 기능 달기 2 - 고급 버전 https://pravda.tistory.com/39 단순 관련글 (Simple Related Posts) 기능 추가하기 1. 다.. 구글 블로그 하위 카테고리 만들기 하위 카테고리는 각 라벨 왼쪽에 패딩(padding) 여백을 CSS 코드로 넣어주면 그만이다. 라벨 보이는 위치를 한 칸 띄워주면 그게 하위지 뭐 별건가? 구블은 같은 포스트에 라벨을 1개 이상 지정할 수 있어서 이게 가능하다. 2022. 3. 16. https://wlsfl1.blogspot.com/ 구글 블로그 한국형 카테고리 디자인 CSS 코드 아래 코드를 CSS에 삽입해주면 된다. /* 카테고리 기본 스타일 */ .list-label-widget-content li { display: block !important; /* 한 줄에 하나씩 배치 */ background-color: transparen.. pravda.tistory.com 구글 블로그 카테고리 순서 마음대로 바꾸기 구글 블로그에선 아.. 구글 블로그 카테고리 순서 마음대로 바꾸기 구글 블로그에선 아쉽게도 카테고리 순서를 알파벳 순과 포스트 수로만 정렬이 가능하다. 따라서 원하는 순으로 카테고리 라벨을 두려면 코드를 좀 만져야 한다. 1. [대시보드 - 레이아웃 - 사이드바(하단)]에서 'HTML/자바스크립트' 가젯 추가를 선택한다. 2. 창이 뜨면 제목은 비우고 콘텐츠 란에 아래 코드를 넣어준다. 라벨1 라벨2 ⋮ ⋮ 라벨3 * 라인을 원하는 순서로 원하는 만큼 배치시킬 수 있다. 새로운 라벨은 수동으로 추가해야 한다. 3. [대시보드 - 레이아웃 - 사이드바(하단)]에서 '라벨' 가젯 추가를 선택한다. 창이 뜨면 '라벨당 글 수 표시' 옵션을 키고 저장한다. (사용하지 않을 임의의 위젯이기에 다른 것들은 신경 쓸 필요 X) 4. 사이드 바에 있는 'HTML', '라벨' 가젯 위.. 구글 블로그 하단 페이지 넘버링 번호 붙이기 숫자 페이징 기능 (Pagination) 추가하기 구글 블로그에는 워드프레스처럼 하단에 페이지 넘버링, 숫자를 매겨주는 플러그인이 없기 때문에 따로 코드를 입력해야 한다. 1. 다음 코드를 ]]> 바로 위에 복붙한다. #blog-pager { clear: both; margin: 30px auto; text-align: center; padding: 7px; } .blog-pager { background: none; } .displaypageNum a, .showpage a, .pagecurrent { padding: 3px 7px; margin-right: 5px; background: transparent; color: #757575 !important; } .displaypageNum a:hove.. 구글 블로그 사이드바 여닫이 탭 지우기 사이드 바에 거슬리는 '자세히 보기'와 '간략히 보기' 탭을 제거하려면 아래 코드를 CSS에 추가하면 된다. #Label2 .extendable .show-less, #Label2 .extendable .show-more { display: none; } 2022. 3. 15. https://wlsfl1.blogspot.com/ 구글 블로그 링크 리스트 간격 띄우기 링크 가젯 목록 사이에 띄우고 싶은 라인 번호를 괄호 안에 입력한 후 코드를 CSS에 붙여넣기 하면 된다. /* Link List 1 Widget Padding */ #LinkList1 li:nth-child(2), #LinkList1 li:nth-child(6) { padding-bottom: 15px; } 2022. 3. 15. https://wlsfl1.blogspot.com/ 구글 블로그 요약문 글자 수 조정하기 메인 블로그 페이지에 표시되는 스니펫의 글자 수 조절 및 각종 연관된 기능들을 설정하고 싶다면 1. Blog1 위젯 안에 아래 진한 부분의 코드를 통째로 삽입해줘야 한다.1) ⋮ ⋮ ⋮ ⋮ 2. 변수 인자를 원하는 값으로 지정해준다. length : 스니펫 글자 수 길이, 최소값 50, 기본값 350, 나는 기본값의 절반인 175자를 사용 중; 구블에선 1줄이 42자고 175자면 대략 꽉 채운 4줄이라 보통 8~12줄에 점프 브레이크 선을 긋고 있다. links : 이건 아직 잘 모르겠는데 아마 링크를 바로 클릭할 수 있게 하는 기능인 듯; linebreaks : 줄바꿈 허용 여부;2) ellipsis : 스니펫 끝부분 구두점 3개(...) 표기 여부 1) 코드 안에 여러 하위 코드 블록이 존재하는데 어.. 이전 1 2 3 4 다음
