기본 콘텐츠로 건너뛰기

글

라벨이 Blogger Tips인 게시물 표시

Featured Post

영어회화 빨리 느는 방법 3가지

댓글 5개
자세한 내용 보기

구글 블로그 포스트 타이틀만 나오는 홈화면 만들기

 많은 블로거들이 관리하기 편하다는 이유로 심플하고 화려하지 않은 테마(Template)을 사용한다. 하지만 이러한 테마를 사용하는 블로그는 홈(Home) 메뉴를 클릭하거나 'http://'주소를 입력해서 접속하면 홈페이지 화면이 열리기 때문에 전체 포스트를 최신 순서대로 쭉 나열해 버린다. 방문자는 스크롤의 압박으로 자신이 원하는 글을 찾을 엄두도 못 내고 창 닫기 버튼을 눌러버릴 것이다.  정성껏 작성한 유용한 포스트들을 홈 화면에서 한눈에 보여줄 수 없다는 것은 안타까운 일이다. 인터넷을 사용하는 사람들은 어떠한 정보 얻을 때 요약이나 제목을 보고 관심 있는 정보를 클릭하여 해당 내용이 펼쳐지는 방법에 익숙해져 있다. 주로 포털사이트나 게시판 등이 이러한 구조로 이루어져 있기에 동일한 구조로 블로그를 구성할 필요가 있다.   Home에서는 글 제목만 표시되게 하는 방법은 아래 간단한 절차만 따라 하면 된다. 1. 블로그 대시보드에서 테마(Template) 선택 후 HTML 편집(Edit HTML) 을 선택하여 HTML 편집 창으로 이동한다. 2. HTML이 편집 창에서 Ctrl + F를 눌러 "</head>"를 입력하고 검색 한다. 3. </head> 태그 바로 위에 아래 코드를 복사 해서 붙여 넣고 저장(Save Template) 한다. [추가할 코드] <style type="text/css"> <b:if cond='data:blog.url == data:blog.homepageUrl'> .post { margin:.5em 0 1.5em; border-bottom:0px dotted $bordercolor; padding-bottom:1.0em; height:50px; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:20px; font-family:Tahoma,Ge
댓글 3개
자세한 내용 보기

구글 블로그 복사 방지 및 특정 텍스트만 허용하는 방법(CSS활용)

How to disable copying text on blog except for specific text  이 포스트는 CSS 코드를 이용하여 블로그 글 복사방지하는 방법과 특정 텍스트만 복사 허용하는 방법을 설명한다.  일반적으로 블로거들이 무단 복사방지를 위해서 자바스크립트로 텍스트 선택을 못하게 하거나 마우스 우클릭을 방지한다. 하지만 이 방법에는 몇 가지 문제점이 있다. 소스 코드 또는 특정 텍스트를 공유하기 위한 글인 경우 소스 코드마저도 복사를 막아 방문자의 인내심을 시험하게 한다. 희소성 있는 정보가 아닌 이상 방문자들은 1초의 망설임도 없이 다른 블로그를 찾아 떠날 것이고 다시 방문하는 일은 없을 것이다. 다른 문제로는 자바스크립트 복사방지는 해제하기 쉬워 쉽게 무력화될 뿐 아니라, 심지어 인터넷에 "블로그 복사방지 해제"라고 검색하면 관련 글 수십 개 정도는 쉽게 접할 수 있다. CSS코드로 블로그 복사방지 및 특정 텍스트만 복사 허용하는 방법  아래와 같은 절차로 포스트 내용 중에 방문자에게 공유하고 싶은 것만 공유하고 나머지는 복사방지 설정할 수 있다. 1. 블로거 로그인 > 블로그 좌측 메뉴에 테마 > 맞춤설정 > 고급 > CSS 추가 선택한다. 2. 아래 코드를 복사해서 붙여 넣는다. /*--Disable copying Text but not Specific Text with CSS Code--*/ .post blockquote { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } body { -webkit-user-select: none !important; -moz-user-select: -moz-none !important; -ms-user-select: none !imp
댓글 쓰기
자세한 내용 보기

네이버 검색 등록 및 사이트 검색 노출하기

구글 블로거(블로그) 네이버 검색 등록 및 검색 노출하기  신규 사이트나 블로그의 경우 네이버에서 정보 수집을 하지 않기 때문에 노출이 되지 않는다. 공유하는 정보가 많고 오래되면 자연스럽게 네이버에서 수집하지만, 빠르게 네이버에 검색 및 노출 되도록 네이버 웹마스터 도구를 이용해야 한다. 최근 한 업체의 조사에 따르면 네이버(NAVER) 이용자 전체 중 21.3%가 블로그를 이용하는 것으로 조사되었다. 그만큼 네이버에 블로그를 등록하는 것은 많은 방문자를 유입할 수 있다. “ 네이버에 사이트맵 및 검색 요청하는 방법 ” 1. 네이버 아이디로 로그인 후, "웹 마스터 도구를 검색" 한다. 2. 사이트 및 블로그를 추가하기 위해서 “사이트 추가+”를 선택 한다. 네이버 웹마스터 도구에서는 사이트를 연동하거나 안드로이드 및 IOS 앱을 연동할 수 있다. 3. 사이트 또는 블로그 주소 URL을 입력하고 "확인" 을 누른다. 4.  "HTML 태그"를 선택한다. 네이버 웹 마스터 도구는 사이트 소유 여부를 확인하는 절차가 있다. 사이트의 경우 HTML 파일을 업로드하고 블로그의 경우는  "메타태그"를 블로그 HTML에 추가 하여 확인한다. 5. 네이버에서  메타태그를 복사한 후 구글 블로거 템플릿 메뉴 > HTML 태그로 들어가서 "head"태그 안에(<head>밑에) 붙여넣기하고 저장한다.  이후 네이버에서 확인을 누르면 소유 확인 여부가 승인된다. 6.  완료되면 등록된 사이트 주소가 목록에 나타나고 검색 등록 작업은 끝난다. [RSS 제출] 7. 좌측 메뉴에서 요청 > RSS 제출 선택한다. 입력란에 자신의 블로그 주소(HTTP://포함) 뒤에 /rss.xml을 추가하여 입력한 후 확인 버튼을 클릭하면 RSS 제출이 완료된다. [사이트맵 제출] 8. 좌측 메뉴에서 요청 > 사
댓글 쓰기
자세한 내용 보기

블로그 포스트에 highlight 소스코드로 글 이쁘게 올리기

Highlight source code in Blogger and posting  블로그 글에서 소스코드에 대해 알록달록하게 표시하려면 HTML편집에서 사용할 하이라이트 관련 소스를 입력하고 글을 작성할때 해당 하이라이트 코드를 입력하면 된다.  블로그에 HTML이나 코드 관련된 내용을 넣을 때 보기 편하게 하기 위해 사용하는 여러 가지 툴들이 있다. Syntax Highlighter, SHJS, code-prettify, Rainbow, Prism, highlight.js 등이 있는데 Syntax Highlighter와 SHJS는 언어별로 별도의 파일을 로딩해야 하는 단점이 있고, code-prettify는 Blogger에서 사용하기에 잘 맞지 않았고, Rainbow는 너무 단조로운 느낌이 있었다. Prisme은 CDN 호스팅을 제공하지 않아 구글 블로그 사용자에게는 불편했기에 최종적으로 선택한 툴은 highlight.js였다 . highlight.js는 셋팅 방법이 간단하고 다양한 언어와 설정 파일 형식을 지원하며 다양한 스타일을 제공하지만 코드 줄 번호를 지원하지 않는다. 본 저자는 줄번호에 대한 미련은 없기에 선택에 망설임은 없었다.   블로그에 highlight.js를 설정하고 사용하는 방법은 아래와 같다. 1. Blogger에 템플릿에 highlight.js 셋팅하기 1.1. 블로거 관리자 로그인 ⇒ 템플릿(Theme) ⇒ HTML 편집 으로 들어간다. 1.2. 그림처럼 아래 3줄의 코드를 <head> 끝부분에 입력 한다.(highlight.js 사이트 설치 문서에 link 태그를 닫는 부분을 빠져있는데 이 부분을 주의해야 한다. link 태그를 닫지 않으면 Blogger 템플릿 저장할 때 에러가 출력되므로 </link>로 닫아준다.) <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.
댓글 1개
자세한 내용 보기

How to add menu tabs at the top of Blogger

Do you want to have menu tabs at the top of your blogger like below? Then you can do this right away! Just follow below direction. 1. At once, You should create a page using 'New page' button of 'Pages' in the left menu 2. In the left menu, click 'Layout' after creating pages 3. Click '+ Add a Gadget' as the below 4. Select 'Pages' in list 5. You can see a Pages gadget you created and then click 'Edit' to configure page list 6. Select pages you want to show in your blogger and change the order by dragging and dropping as you want. Then click save button. 7. Check your blogger by clicking 'Preview' button If you have any question of it, feel free to contact me.
댓글 쓰기
자세한 내용 보기

구글 블로그 "Powered by Blogger"문구 안보이게 하기

How to remove attribution gadget "Powered by Blogger" 구글 블로그에 하단에 "Powered by Blogger"문구를 안 보이게 하려면 템플릿에 HTML 편집에서 관련 부분에 대해 삭제한다.  구글 블로그 하단에 보면 "Powered by Blogger."라는 문구가 있는데, Layout 가장 아랫부분에 Attribution이라는 이름을 가진 가젯(Gadget)이 이것이다. 이 부분은 구글이 제공하는 메뉴로는 삭제할 수 없기 때문에 HTML을 수정해서 삭제해야 한다. 삭제하고 나서 혹시나 다시 복원하려 한다면 삭제한 코드를 다시 넣어주기만 하면 되기 때문에 걱정할 필요는 없다. 또한, 복원할 것 같다면 해당 코드를 주석 처리해 두는 것도 방법이다.  구글 블로그에 하단에 Attribution을 삭제 또는 복원하는 방법은 아래와 같다. "Attribution" 가젯 삭제하기 1.  템플릿 메뉴에 Edit HTML을 선택해서 HTML 화면으로 이동 2. 아래 코드를 찾는다. Ctrl+F로 검색키를 열고 b:section class='foot'를 검색 (검색이 안될 경우 수동으로 찾아야 한다. 하단 쪽에 위치하고 있다.) 3. 아래 코드 3줄을 삭제 하고 저장한다. <b:section class='foot' id='footer-3' showaddelement='no'> <b:widget id='Attribution1' locked='true' title='' type='Attribution'/> </b:section> 4. View blog를 눌러 "Powered by Blogger." 문구가 삭제된 것을 확인한다.(layout에서도 삭제되어 있다.)
댓글 쓰기
자세한 내용 보기

구글 검색 결과에 포스트 제목을 앞에 표시하게 하자

How to show the post title before the blog title in the search result of the search engine.  구글 검색 결과에 블로그 이름보다 포스트의 제목을 앞에 표시되게 하려면 블로그 템플릿에서 HTML을 수정하면 된다.  블로그의 방문자 유입을 늘리기 위해서 포털사이트에서 검색되는 결과에 포스트의 제목이 한눈에 들어와야 한다. 자신의 포스트를 구글에서 검색해 보면 블로그 제목이 먼저 출력되고 그 뒤에 포스트 제목이 표시되고 있는 것을 알 수 있는데 실제로 검색하는 사용자에게 중요한 것은 적절한 정보가 포함되어 있는 포스트의 제목이지 블로그 제목이 아니다. 심지어 사용자는 블로그의 이름 따위는 관심이 없다. 또한, 구글 검색 결과에서는 제목을 70바이트만 잘라서 표시하기 때문에 블로그의 제목이 길거나, 제목이 긴 경우에 사용자는 포스트의 제목을 전부 보지 못할 것이다.  구글 검색 결과에 나타나는 제목은 포스트 URL이 제공하는 HTML에서 <head>에 있는 <title>태그의 내용을 받아서 제목으로 나타낸다. 구글 블로거에서 제공하는 HTML <title>태그는 구글 블로그 이름이 먼저 나오게 셋팅이 되어있는데 이 부분을 바꿔주면 된다.  블로그 이름을 앞에 표시되게 하는 셋팅 절차는 아래와 같다. 1. 블로거 관리자 로그인 ⇒ 템플릿(Theme) ⇒ HTML 편집 으로 들어간다. 2. Ctrl+F로 blog.pageTitle를 검색 한다. 이 부분은 서두에 언급한 것과 같이 기본적으로 "블로그제목 |포스트제목", 즉 "<data:blog .title=""> | <data .blog.pagename="">"으로 정의되어 있다. <title><data:blog.pageTitle/></title> 3. 해당
댓글 5개
자세한 내용 보기

구글 블로그 글 목록에 포스트 제목만 나오게 하는 방법

How to show only titles in Label and Archive pages in blogger  라벨 링크를 누르거나 글 목록 링크를 눌러 이동하는 페이지에 해당 글 제목만 표시하려면 템플릿 HTML 편집에서 관련 코드만 추가해 주면 된다.  구글 블로거에서 라벨이나 글목록 링크를 눌러서 해당 페이지로 이동하면 관련된 글들의 전체 내용이 전부 출력된다. 관련 글들에 대해 한눈에 파악해서 원하는 글을 찾기가 쉽지 않기 때문에 일반적으로 선호하지 않는 양식이지만 구글 블로거에서는 기본적으로 이와 같은 형식을 제공한다. 관련 글들에 대한 전체 내용을 전부 불러오기 때문에 로딩 시간을 길게 만드는 불편함을 줄 수 있고, 수많은 글 중에 원하는 정보가 있어도 참을성 많지 않은 방문자는 떠날 것이다. 다행히도, 간단하게 HTML 코드의 추가하여 쉽게 바꿀 수 있다.   블로그에는 라벨 페이지와 글목록 페이지에 제목만 나오도록 하는 방법은 아래 절차와 같다. 1. 블로거 관리자 로그인 ⇒ 템플릿(Theme) ⇒ HTML 편집 으로 들어간다. 2.  HTML 편집 창에서 Ctrl+F로 <b:include data='post' name='post'/> 코드를 검색 한다. 우측 상단에 있는 「백업/복원」버튼으로 백업을 할 수 있다. HTML 편집으로 템플릿을 수정 시 잘못 입력하면 블로그가 정상적으로 동작하지 않을 수 있으므로 수정전에 백업을 해두는 것이 좋다. 3. 해당 코드를 지우고, 아래 코드를 입력 한다. <!--Only title in Label and archive page start--> <b:if cond='data:blog.homepageUrl!= data:blog.url'> <b:if cond='data:blog.pageType != "item"'>
댓글 1개
자세한 내용 보기

다음 검색등록 및 사이트 검색 노출하기(네이트 동일)

블로그,  홈페이지 또는 사이트를 다음 또는 네이트에 검색 등록하는 방법 개인 블로그나 웹사이트에 방문자를 유입시키기 위해서 네이버나 다음과 같은 포털 사이트에 검색등록하는 것은 필수이다. 여러 포털사이트들 중에서 이 포스트는 다음에 검색등록하는 절차에 대해서 사진과 함께 쉽게 설명할 것이다. 다음은 국내에 많은 사용자를 보유하고 있을 뿐만 아니라 검색등록을 하면 네이트에서도 동일하게 검색 노출이 된다. 즉, 검색 노출하려는 사이트를 네이트에 따로 등록하지 않아도 해당 사이트가 네이트 검색 결과에 나타난다는 말이다. 블로그나 웹사이트 운영자는 몇 가지 간단한 절차만 진행하면 무료로 다음 포털사이트 검색 결과에 본인이 운영하고 있는 블로그나 웹사이트를 나타나게 할 수 있다. 하지만 검색 결과에 나타난다고 해도 검색 결과 상단에 노출되지 않는다면 무용지물이기 때문에 어떻게 해야 블로그나 사이트가 검색 결과 상단에 위치하는지도 알아보자. 다음 검색등록 및 사이트맵 요청하는 방법 1. 다음에 로그인하여 "다음 검색등록"을 검색한다. 검색 결과 상단에 Daum 검색등록 URL이 나타날 것이며, 해당 URL을 클릭하여 이동하자. 2. 다음 검색등록으로 이동하면 여러 가지 메뉴들이 나오는데 아래 사진과 같이 화면 가운데에 있는 "신규등록하기"를 선택한다. 3. 블로그를 신규 등록할 수 있는 페이지가 보이면 검색등록 선택에   "블로그 등록"을 선택하면 바로 아래 블로그 URL을 입력할 수 있게 바뀌는데 아래 사진과 같이 HTTP://를 포함한 블로그 주소 URL를 입력해 넣는다. (ex:http://koonhous.blogspot.com) 정확하게 입력했는지 다시 한번 확인하고 "확인" 버튼을 누른다. 4. 위에서 확인 버튼을 누르면 개인 사용 동의 약관 화면으로 이동하는데 여기서 두 가지 부분에 대한 개인 정보 수집에 대해서 동의해야 검색 등록이 가능하다. 여
댓글 1개
자세한 내용 보기