Rock Bottom Dev Bus

  + 구글 블로그 페이징 처리하는법 1 : 블로그에 페이징 처리 적용 https://rockbottomdevbus.blogspot.com/2022/01/blogger-1-1-page-list-how-to-handle.html + 구글 블로그 페이징 처리하는법 2 : 페이징 처리 시 버그(문제점 해결) 1 https://rockbottomdevbus.blogspot.com/2022/01/blogger-2-2-page-list-scrolling-indie.html +  구글 블로그 페이징 처리하는법 3 : 페이징 처리 시 버그(문제점 해결) 2 https://rockbottomdevbus.blogspot.com/2022/01/blogger-3-2-2-page-list-scrolling-indie.html + 구글 블로그 페이징 처리하는법 4 : 스타일 수정  https://rockbottomdevbus.blogspot.com/2022/01/blogger-4-4-page-list-scrolling-indie.html +  구글 블로그 페이징 처리하는법 5 : 소스 테마 공유 1.  관리자페이지 메뉴 : 레이아웃 2. 관리자페이지 메뉴 : 테마 3. 소스 공유 - 레이아웃 위젯 : 메뉴 트리 다운로드 - 레이아웃 위젯 : 페이지리스트 다운로드 - 테마 : html 전체 소스 다운로드

+ 구글 블로그 페이징 처리하는법 1 : 블로그에 페이징 처리 적용 https://rockbottomdevbus.blogspot.com/2022/01/blogger-1-1-page-list-how-to-handle.html + 구글 블로그 페이징 처리하는법 2 : 페이징 처리 시 버그(문제점 해결) 1 https://rockbottomdevbus.blogspot.com/2022/01/blogger-2-2-page-list-scrolling-indie.html +  구글 블로그 페이징 처리하는법 3 : 페이징 처리 시 버그(문제점 해결) 2 https://rockbottomdevbus.blogspot.com/2022/01/blogger-3-2-2-page-list-scrolling-indie.html + 구글 블로그 페이징 처리하는법 4 : 스타일 수정  1. 레이아웃 위치지정 : 페이지 본문에 최상단에 위치를 지정한다. = 개인적으로 페이지리스트가 상단에 있는걸 선호하며, 페이지 목록(상단)이나 헤더에 적용하면 넓이가 본문보다 작아지고 모바일적용 시 불필요한 공간을 잡아먹어서 해당위치에 적용하였다. 2. 스타일적용 : 페이지리스트 위젯의 스타일을 수정 - 위젯의 제목을 지정 할 경우 제목이 노출되며, 불필요한 높이 공간을 잡아먹어서 이름지정 하지 않음 - 적용한 사진에서 빨간색으로 표시한 All List는 검색 시 검색한 문자열이 노출되는 부분임 - 모바일 버전에서는 검색 시 검색어 입력 후 모바일 엔터(이동)을 누르면 검색 됨 - 본문은 최대한 깔끔하게 하기 위해 기존 소스에서 제목 제외하고 전부 제거해주었으며,  모바일 버전을 생각하여 노출되는 포스트수를 3개로 제한하였다. - 페이지 목록은 마찬가지로 모바일 버전을 생각하여 5개만 노출시키도록 설정해놓았으며, 모바일에서 선택하기 쉽게 크기를 키워주었다. * PC 적용모습 * MOBILE 적용모습 3. 다음편 예고 - 적용한 위젯 소스 및 테마 HTML 소스 공유 예정

+ 구글 블로그 페이징 처리하는법 1 : 블로그에 페이징 처리 적용 https://rockbottomdevbus.blogspot.com/2022/01/blogger-1-1-page-list-how-to-handle.html + 구글 블로그 페이징 처리하는법 2 : 페이징 처리 시 버그(문제점 해결) 1 https://rockbottomdevbus.blogspot.com/2022/01/blogger-2-2-page-list-scrolling-indie.html +  구글 블로그 페이징 처리하는법 3 : 페이징 처리 시 버그(문제점 해결) 2 - 구글 블로그 페이징 처리하는법 2 대로 진행을 하였으나 해상도가 변경되면 (모바일 버전에서 확인 할 경우) 메뉴 버튼(현재 블로그에 적용된 메뉴)이 작동하지 않는 현상 발생하였다.  1. 기존에 제대로 작동하던 기능 분석 : 크롬 개발자 도구(F12)를 통해 해상도 변경 시 적용되는 이벤트를 확인하여 스타일 변경되는지 확인 및 메모 2. 헤더 아래에  제이쿼리 cdn 및 스크립트 / 도큐먼트 레디 추가 <script src='http://code.jquery.com/jquery-latest.min.js'/> <script type='text/javascript'>     $( document ).ready(function() {                }); </script> 3. 메뉴 버튼에 id 혹은 class 부여 4. 추가한 스크립트 도큐먼트 레디 아래에  1번에서 메모한 스타일을 적용 - 메뉴 버튼 클릭 시 클래스 부여 혹은 클래스 제거  $('#onclick_menu_var').on('click', function() { if ($('body').hasClass('sidebar-visible')) {  $('...

+ 구글 블로그 페이징 처리하는법 1 : 블로그에 페이징 처리 적용 https://rockbottomdevbus.blogspot.com/2022/01/blogger-1-1-page-list-how-to-handle.html + 구글 블로그 페이징 처리하는법 2 : 페이징 처리 시 버그(문제점 해결) 1 - 페이징 처리하는법 1대로 블로그에 적용하였으나 여러 문제점 발생 1. 모바일버전에서 스크롤링 시 페이지리스트가 내려오면서 화면을 가리는 현상이 발생 - 저는 블로거에서 아래사진과 같은 테마를 사용 합니다. - 이러한 현상이 나타남으로 html 및 css 하나하나 수정해봤지만 소용이 없었습니다. - 이 문제를 해결하기위해 어디서 이러한 현상이 발생되는지 추척해 보았습니다. 크롬에서 페이지리스트를 적용한 블로그 접속 >> F12 (개발자도구) >> 이벤트 리스너 탭 확인 시 스크롤링 이벤트(현재사진에는 없음)를 Remove 버튼으로 제거  - 이벤트 리스너 탭에서 스크롤링 이벤트를 제거하니 문제가 해결되었으며, 위 사진에서 힌트를 얻었습니다. (Remove 버튼옆에 js파일을 발견) - 테마 html 편집에서 해당 js를 불러오는 태그가 보이지않았습니다. - indie compiled.js 로 구글링 해보니 아래 링크 댓글에 이러한 글을 발견 했습니다 <b:template-script async='true' name='indie' version='1.0.0'/> 코드를 찾아 제거하십시오. https://support.google.com/webmasters/thread/131565024/suspicious-page-but-i-just-created-it?hl=tr - 테마 html 편집에서 해당 태그를 주석처리하니 문제가 해결되었습니다. 2. 다음편 예고 - 1번 문제를 해결하니 메뉴 버튼이 작동하지 않는 현상이 발생하여 다음포스팅에서  이어 작성하겠습니다.

+ 구글 블로그 페이징 처리하는법 1 ( jquery, angular.js 사용)  출처 : G1's https://blog.g1s.kr/2017/07/postlist.html 1.  jquery, angular.js 두개의 라이브러리를 적용 :  블로그 관리자 페이지 >> 테마 >> HTML편집 * (기존 소스는 백업 권장) 2. 아래 사진처럼 <head>와 </head> 사이에 아래2줄 넣기 <script src='http://code.jquery.com/jquery-latest.min.js'/> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js'/> 3.  다음 angular.js를 사용하기 위해 <html>태그에 ng-app="app" 선언 * (해당 작업을 하지 않았을 경우 동적으로 script에서 넣어주는 처리를 하고 있어 필수는 아님.) 4.  블로그 관리자 페이지 >> 레이아웃 :  가젯 추가 선택   HTML/JavaScript 선택  * (가젯 추가 시 본문에서 추가가 되지않더라도 가젯을 추가한 이후 원하는위치로 드래그하여 옮기는게 가능) 5. 아래사진 참고하여 제목지정 >>  아래 링크에서 소스복사 >> 내용에 붙여넣기  https://github.com/g1s/blog.g1s.kr/blob/master/G1sBlog/widget/feeds/G1sPostList_v2.html - 아래사진에서 드래그된 부분 설정 :  G1sPostList( 포스트수, 페이지수, 기본정렬 )    포스트 수 : 글목록 한페이지에 보여지는 포스트 수.   페이지 수 : 글목록 하단에 보여지는 페이지 수.   기본정렬 : 기...

- 구글 블로그 첨부파일 기능 사용법 1 :   (첨부파일 기능 만드는법) https://rockbottomdevbus.blogspot.com/2021/12/blogger-blogspot-file-attachments-how.html + 구글 블로그 첨부파일 기능 사용법 2 : 즉시다운로드 (좌측하단 표시 됨) 1. 상단 구글 블로그 첨부파일 기능 사용법 1의 7번까지 참고하여  링크 복사 버튼 선택 2. 복사한 내용중 아래 빨간색표시한 부분이 파일의 ID 입니다. 빨간색 부분을 복사 합니다. 예 : https://drive.google.com/file/d/ 1Ji_OUtNwl2mad4fLIdj-3k_pInbQpxJH /view?usp=sharing 3.  아래 URL의 뒤에 부분에 복사한 파일 ID를 붙여넣습니다. 예 : https://docs.google.com/uc?export=download&id= >>  https://docs.google.com/uc?export=download&id= 1PmwpFOUZob0F_rz2wxAiP9uFkpW72v_X 4.  상단 구글 블로그 첨부파일 기능 사용법 1의 8번 내용을 참고하여 포스팅 시 링크에 3번에서 만든 URL을 집어넣으면 완료입니다. 5. 아래 버튼이 예시로 만든 다운로드 버튼입니다.  다운로드

+ 구글 블로그 첨부파일 기능 사용법 (첨부파일 기능 만드는법) - 구글 블로그는 다운로드 기능이 없습니다.  사용자가 이용하기 편리한 첨부파일 기능 만드는 방법을 알려 드리겠습니다.  - 구글 블로거(blogger)에서 첨부 파일 다운로드 기능을 만드려면  자신의 구글 드라이브와 같은 자신의 클라우드 저장소를 사용해야 합니다.  1. 크롬다운로드 :  https://www.google.com/intl/ko/chrome/ 2. 구글 계정 생성 및 로그인 후 구글드라이브 접속 3. 구글 드라이브에 폴더 생성 (컨텐츠 부분에서 우클릭 폴더생성) 4. 첨부할 파일을 폴더에 집어넣기 (드래그해서올리면됩니다) 5. 해당 파일을 우클릭 >> 공유 가능한 링크 가져오기 선택 6. 링크가 있는 모든 사용자에게 공개 선택 7. 뷰어 선택 : 뷰어 = 파일 미리 보기 및 다운로드  >> 링크 복사 선택  8. 구글 블로거(blogger) 포스팅 (글쓰기) 시 다운로드 기능 만들기  - url 만들기/수정 (링크 삽입 또는 수정) 버튼 선택 - 표시할 텍스트 : 다운로드 - 링크 url : 7번에서 복사한 링크 붙여넣기 아래 다운로드 선택 시 미리보기 및 다운로드가 가능하다. 다운로드

 https://rockbottomdevbus.blogspot.com/2021/10/blogger-tree.html 위 링크 글을보면서 블로거를 만드신분들은  메뉴버튼 선택 시 한개의 글만검색된다. <a id='category-tip' href='/search/label/tip?max-results=1'>Tip</a><ul> = ?max-results=1 의 숫자를변경해주거나 지워주면된다

blogger 포스팅 시 코드펜을 입력하고싶은데 1번부분을 몰라서 헤매었다. 단점으로는 포스팅용량이 커지면 로딩하는데 렉이 발생하여 간단하게 사용할게 아니면  추천하지않는다. 출처 : https://myhappyman.tistory.com/195   1. codepen html입력은 블로거 글 작성 시 아래사진처럼 입력함. 2. https://codepen.io/trending >> 접속 >> 회원가입 >> 로그인 3. 로그인 후 작성을 위해 Pen 메뉴를 클릭 4. 코드를 작성 5. 코드 작성이 끝나면 해당 소스의 제목을 입력, Save버튼으로 저장 6. 저장 후 아래 하단에 embed 버튼을 클릭.   7. 원하는 테마를 선택 후 아래 소스를 복사. (저는 다크테마값으로 했습니다.) 8. 소스를 복사하셨으면, 블로그에서 1.사진처럼 모드를 변경 9. 소스삽입. 10. 셈플 See the Pen Untitled by 이영근 ( @vvxbenno-the-lessful ) on CodePen .

[Blogger] 메뉴 트리 가젯 만들기 (블로그스팟 블로거)_Tree _-라벨로 메뉴 트리구조 만들기- 블로거 관리페이지 >> 레이아웃 >> 가젯추가 >> html/javascript 선택 >> 메뉴제목 입력  / 콘텐츠에 아래내용 복붙 >> 맨아래 주소참고하여 커스텀 <script>  function Category(id, label, name){   this.a = document.getElementById(id);   this.label = label;   var script = document.createElement('script');   script.type = 'text/javascript';   script.charset = 'utf-8';   script.src = home + '/feeds/posts/summary/-/' + label + '?max-results=1&alt=json-in-script&callback=' + name +'.pong';   document.getElementsByTagName('head')[0].appendChild(script);   this.pong = function(cfeed){    var cnt = cfeed.feed.openSearch$totalResults.$t;    this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';   };  }  var home = 'http://creatorhong.blogspot.com';  var tip = new Category('category-tip','tip','tip');  var blog = new Category('category-blog...