정보보안(Information Security) 기록 저장소: google blog

레이블이 google blog인 게시물을 표시합니다. 모든 게시물 표시

2019. 10. 29.

구글 블로거 꾸미기 -5 google blog 에서 소스코드 하이라이트 (highlight)

블로그 성격상 소스코드를 작성할 일이 많은데, 소스코드를 멋지게 작성하는 방법을 소개한다.

1. Highlight.js
코드 구문 강조를 위한 자바스크립트 라이브러리이다. 자동으로 언어를 감지하여 알맞는 표식을 삽입한다.

http://highlightjs.org/ 사이트에서 다운로드가 가능하다.

홈페이지에 보면 hosted와 custom package 두 가지 방법이 있다고 나와 있는데, google blog는 hosted 방식을 사용하면 된다. 아래 소스를 html 소스 중 <head></head> 안에 삽입하면 사용할 준비는 끝이다.

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css" />
<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

이제 포스팅 할때 <pre><code>소스코드 </code></pre> 이렇게 사용하면 된다. 간혹 언어를 인식하지 못하는 경우가 있는데 그럴 경우는 <pre><code="language-html>소스코드 </code></pre> 이런식으로 사용하고자 하는 언어를 입력하면 된다.

import execjs
execjs.eval("'red yellow blue'.split(' ')")

ctx = execjs.compile("""
function add(x, y) {
return x + y;
}
""")

print(ctx.call("add", 1, 2))

파이썬 코드를 예시로 들면 이런 형태의 디자인이 된다. 또한 css 파일의 링크를 바꾸면 원하는 디자인으로 테마를 마음대로 바꿀 수 있다.

** TIPS
가끔 다른 종류의 태그가 삽입되면 하이라이트가 작동 못하는 경우가 있는데, 이 경우 해당 사이트(http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php)에서 코드를 넣고 스크립트를 치환하여 시도해보자.

예를들면, <strong>굵게</strong> 를 <strong>굵게</strong> 이렇게!

2019. 10. 27.

구글 블로거 꾸미기 -4 글머리 기호(리스트) 기능 활성화

오전 6:44 google blog

구글 블로그에서 글을 작성할때 아래와 같이 '글머리 기호' 기능이 필요할 때가 있다.

AAA
BBB
CCC 이런 기능을 말함

그러나 어처구니 없게도 글을 작성할때는 되는가 싶다가도 게시하면 글머리가 사라진다.

1. '글머리 기호(리스트)' 기능 활성화

- 테마 -> HTML편집 -> 검색 -> 아래와 같이 수정

- 수정 전

.widget ul {list-style: none;margin : 1.5em 0 0;}

- 수정 후

.widget ul {
list-style: disc; ! list-style: none
margin: 0 0 0 0; ! margin: 1.5em 0 0;
padding: 0 0 0 10px;
}

2. '글머리 기호(리스트)' 앞 간격 조정

- 1번의 위젯 소스에서 padding 항목에 숫자를 수정하면된다.

3. '글머리 기호(리스트)' 위 간격 조정

- 1번의 위젯 소스에서 margin 항목에 숫자를 수정하면된다.

4. '글머리 기호(리스트)' 간 높이 간격 조정

- 아래와 같이 설정

.widget ul li {margin-bottom: 0em;}

구글 블로거 꾸미기 -3 피드 구독하기 기능 삭제

오전 6:01 google blog

처음 블로거를 시작하면 하단에 "피드 구독하기: 게시물(Atom) 이라는 정체를 알수 없는 기능이 보여진다. 페이지를 볼때는 "피드 구독하기: 댓글(Atom) 도 있다.
사실상 거의 필요없는 기능이라 생각되어 기능을 제거하기로 했다.

1. "피드 구독하기:게시물(Atom)" 이 표시되지 않도록 설정
- 테마 -> 템플릿 -> 맞춤설정 -> 고급 -> CSS추가 -> 아래 코드 삽입

.blog-feeds{display:none;}

2. "피드 구독하기:댓글(Atom)"이 표시되지 않도록 설정
- 테마 -> 템플릿 -> 맞춤설정 -> 고급 -> CSS추가 -> 아래코드 삽입

.post-feeds {display:none;}

구글 블로거 꾸미기 -2 우클릭, 드래그 방지

오전 5:43 google blog

자신의 블로그에서 우클릭, 드래그가 안되게 하고 싶어하는 경우가 있을 것이다.

1. 우클릭 방지

- 관리페이지 > 테마 > HTML 편집

- Ctrl + F 로 </body> 를 찾은 후 바로 위에 아래 코드를 삽입한다.

 <script language=javascript>  
 <!--  
   
 var message="";  
   
 function clickIE()  
 {  
  if (document.all) {  
   (message);return false;}  
 }  
   
 function clickNS(e)  
 {  
 if (document.layers||(document.getElementById&&!document.all)) {   
  if (e.which==2||e.which==3) {(message);return false;}}  
 }  
   
 if (document.layers){  
  document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}  
 else{  
  document.onmouseup=clickNS;document.oncontextmenu=clickIE;}  
 document.oncontextmenu=new Function("return false")  
   
 // -->  
 </script>

2. 드래그 방지
- 테마 > 템플릿 > 맞춤설정 > 고급
- CSS 추가를 통해 아래의 코드 삽입

html, body, div, span, object,  
 form, input, h1, h2, button, label, a, img {  
  -moz-user-select: none;  
  -ms-user-select: none;  
  -webkit-user-select: none;  
  /* this will work for QtWebKit in future */  
  -webkit-user-drag: none;  
 }  
   
 input[type=text] {  
  -moz-user-select: text;  
  -webkit-user-select: text;  
 }

참조

http://ielselog.blogspot.com/2012/09/blog-post.html

2019. 10. 26.

구글 블로거 꾸미기 -1 스킨, 나눔고딕 폰트 적용

오후 10:39 google blog

약 4년동안 나름 비주류인 구글 블로그를 하면서 많은 시행착오를 겪었었다. 지금도 고난(?)은 진행중이지만 나와 같은 시행착오를 겪고 있는 사람들에게 도움이 되었으면 하는 바램에 간단하게 나마 글을 작성한다.

1. 이미 만들어진 스킨을 이용하자.
구글 블로거는 HTML과 CSS 등을 기본적으로 요구하기 때문에 진입장벽이 타 블로그 보다는 높은 편이다. 그럼에도 불구하고 여러 스킨들을 제공하기 때문에 이를 적용하여 조금씩 수정해가면 나름 만족할 수준의 블로그를 만들 수 있을 것이다.

http://newbloggerthemes.com/
http://btemplates.com/

구글 블로그 스킨을 다루는 여러 사이트가 있지만 위 두 사이트를 추천한다. 다른 블로거들도 많이 이용하는 것 같다.

2. 폰트 적용은 어떻게?

스킨을 적용하니 블로그는 디자인은 바뀌었는데 폰트 적용부터 막막하다. HTML CSS 에 능숙하다면야 문제없겠지만, 능숙하지는 않다.

결국 구글검색 후 블로그 관리페이지 > HTML편집 > .post-body 를 검색해서 폰트 수정했다. 그러나 전체 폰트를 조정할지 특정 문구의 폰트를 수정할지는 스킨에 따라 다르므로, 약간의 삽질이 필요할 것이다.

http://smartbloggertips.blogspot.com/2013/08/change-font-size-of-blogger-posts.html

** blogger 에 나눔고딕 폰트 적용

- 테마 -> HTML편집 -> <head> 아래에 아래 코드 추가

<link rel='stylesheet' href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css'/>

- 그 후, 적용하려는 부분에 font-family: 'Nanum Gothic'; 을 추가한다

예시) body, h1, h2, h3, h4, a, div, input, p, span, td, label, select, textarea, iframe {
font-family: 'Nanum Gothic';
}

3. "레이블이 blogger인 게시물을 표시합니다." 폰트 사이즈 변경 및 제거

아니 이건 뭔데 이런 촌스러운 모습을 하고 있는것인가.

블로거에서 태그를 선택하면, 해당 태그를 갖고 있는 글들이 검색된다. 이때 위와 같은 메시지가 출력이 된다. 그러나 미관상 좋지 않기 때문에 제거하기로 했다.

- 폰트 사이트 설정

관리페이지 > HTML 편집

.status-msg-wrap{

font-size:24px;

}

- 보이지 않게 제거

.status-msg-wrap{

display: none;

}

정보보안(Information Security) 기록 저장소