Google Blog HTML 편집 및 Gadget 관리

1. HTML 편집 및 Gadget 관리 및 수정

Blogspot을 이용하다 보면 기본템플릿 변경으로 본인이 원하는 디자인을 가지기는 힘들며, 이런 부분을 본인이 수정하기 위해서
기본적인 HTML 지식과 Java script 지식 및 Gadget을 Control 할수 있는 방법을 알아야 겠다.

• 디자인->레이아웃의 기본기능 

1. 레이아웃을 가면 본인이 원하는 가젯을 맘대로 추가 가능하다. 
2. 이 Gadget을 Script로 Control을 할수가 있고, 변경도 가능하다. 

• 기본적으로 알아야 Web 지식들

1. Style Tag 설정방법 (CSS 관련 지식) 
2. Javascript 관련내용 
3. Gadget을 설정 및 Control 하는 방법 
4. Google Ajax API도 이용하고 있지만, Manual 필요함  

본인도 Web 개발자가 아니다 보니, 솔직히 많은 것을 잘모르지만, 자신의 블로그 수정정도는 몇시간 공부하면 쉽게 터득이 가능한 것 같다.

• 디자인 세부수정방법 

본인이 가장 좋아하는 템플릿을 설정 한 후,  HTML편집과 레이아웃에서 Gadget을 설정을하여 아래와 같이 같이 수정을 하자

A. 디자인->템플릿->HTML 편집 수정 

1. HEAD 태그 안에 Javascript / Ajax 추가 연동하여 Event 식으로 동작    
2. HEAD 태그 안에 Gadget 의 디자인 변경 ( STYLE 태그,  Background Image 추가 )
3. HEAD 태그 안에 다른 Style 태그 추가 ( 제목 / 일반 글 / 기타 등등)
4. HEAD 태그 안에 소스관리 Javascript 기능추가 
5. Gadget (widget 태그 부분 수정도 가능)

B. 디자인->레이아웃 수정

1. 특정 Gadget 추가  ( HTML 및 Java script 추가 가능 및 연결) 
2. 일반 Gadget 추가 및 세부 설정 변경 

1.1 STYLE TAG or CSS의 기본지식 

Style Tag와 CSS를 주로 보면, 원래의 디자인에서 좀 더 이쁜 디자인을 변경하기 위해서 많이 사용이 되어진다.
그래서 본인의 블로그의 디자인을 바꾸고 싶다면 최소한으로 알아야 할 지식이며, 쉽게 설정이 가능하다.

아래의 설정들을 HTML 편집에서 head 태그안에 넣어 주자

• STYLE TAG 안의 주석

      HTML의 주석은 <!--   ..... --> 이지만  STYLE TAG의 주석은 C처럼 /*  */ 사용한다.

• HTML 내에 특수문자 사용

   < > 빈칸 , 및 특수기호
  http://egloos.zum.com/keep/v/1030642

   특수문자 사용시 "&#" 다음에 숫자를 넣으면 된다.
  http://www.w3schools.com/charsets/ref_utf_geometric.asp

• 소스표현 및 문제사항 

현재 이 post의 HTML 소스표현은 SyntaxHighlighter를 이용하여 표현하고 있으며, 만약 소스가 제대로 나오지 않는다면 https의 보안부분 확인하자
 
  http://alexgorbatchev.com/SyntaxHighlighter/

• STYLE TAG의 기본예제 

STYLE에서는 기본적으로 CLASS로 설정하거나, ID로 설정한다.
(아래소스는 SyntaxHighlighter 기반이므로 링크가 끊기면 제대로 안나옴)

 style

/* 기본 CLASS 사용법   */
.Label {
    padding: 2px 0px 0px 5px;
    margin: 0px 0px 0px 0px;
}

/* Label Class안의 .widget-content에 적용  */

.Label .widget-content {
    display: none;
}

.BlogArchive .widget-content {
    display: none;
}

/* ID Setting */
#BlogArchive1 {
    margin: 10px 0px 0px 0px;
    padding: 5px 0px 0px 5px;
    border: 1px solid gray;

    border-top-style:solid;
    border-right-style:solid;
    border-left-style:solid;
    border-bottom-style:solid;
 
    border-top-left-radius:1em;
    border-top-right-radius:1em;
    border-bottom-right-radius:1em;
    border-bottom-left-radius:1em;
} 


#Label1 {
    margin: 10px 0px 0px 0px;
    padding: 5px 0px 0px 5px;

    border: 1px solid gray;

    border-top-style:solid;
    border-right-style:solid;
    border-left-style:solid;
    border-bottom-style:solid;

    border-top-left-radius:1em;
    border-top-right-radius:1em;
    border-bottom-right-radius:1em;
    border-bottom-left-radius:1em;
} 

/style

• CSS의 display  관련설명

style tag안에서 필요없는 부분을 감추고, 스타일을 변경할 필요가 상당히 많은데,
그럴때 사용하는 것이 display 이며 이는 javascript과 같이 연동구현가능.

  http://aboooks.tistory.com/85
  http://ko.learnlayout.com/inline-block.html

• w3schoools 관련

정말 TEST하기 좋은 사이트 인것 같다, 내부적으로 TEST도 제공을 해준다.
Javascirpt 예제도 제공을 해준다.

  http://www.w3schools.com/cssref/default.asp
  http://www.w3schools.com/css/css_display_visibility.asp



1.2 Javascript 의 기본지식 및 예제 

본인도 Javascirpt을 잘 모르기에, 간단하게 적용하는 방법만 서술하며, onclick은 div에서도 사용가능하며 여러 tag 안에서 사용가능(아래 소스 참고)

위는 Javscript 로 ID를 얻어 STYLE TAG를 Control하는 것이다.

• ID와 CLASS , TAG를 이용한 예제

  http://xahlee.info/js/js_get_elements.html
  http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
  http://www.w3schools.com/jsref/met_document_getelementbyid.asp

본인도, Javascript을 잘 모르지만, Google을 통해 원하는 기능을 검색을 하면 풍부한 예제가 있기에, 어렵지 않게 구현하리라고 본다.


1.3 Blog에서 작은 Image 및 ICON 만드는 법 

GIF/JPG/기타 등등 의 Image 파일 없이 쉽게 문자로만 Image를 만들수가 있다.

• ICON을 쉽게 만드는 법   

URL 중에 data:image/png 이런구조로된 것이 궁금하여 검색했는데, 아래 사이트에서 해답을 얻었다.
위 방식으로 할 경우, 그림파일을 문자로 base64로 Encoding하여 보여주며, 별도의 그림파일은 필요없고, 문자정보만 있으면 된다.
해상도가 낮으면 빠른 로딩을 가능하나, 버전이 낮은 브라우저는 지원이 불가능 (자세한 설명은 아래 사이트 참조)

  http://dataurl.net/#about

• Image 변환 과 사용법  

아래 사이트는 자신의 이미지를 사이트에 올리면, BASE64 이미지로 Encoding 을 해 주며,
Encoding Data를 상위 data:image/png와 함께 선언해서 사용하면된다.

  http://www.askapache.com/online-tools/base64-image-converter/
  https://www.base64-image.de/

Gdrive를 이용하여, 공유->Webhost로 가능했을 것 같은데, 앞으로 이 기능도 제한된다고 다른 대안으로 찾은 방법이다.
Gdrive는 현재 나의 경우는 Webhost는 실패해서 이 방법을 포기하고, 사실 큰 이미지의 필요성이 없다. (현재 이방법만 사용중)

• SVG(Scalable Vector Graphics) Image

wiki의 그림을 보면 대부분 이 Type로 되어있어 처음 매우 궁금했는데, 벡터기반으로 Image를 만든다고 한다.

  https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4

최근 SVG을 이용하여 Javascript을 이용한 hover기능 및 간단한 애니메이션 효과 등을 보고, SVG의 많은 관심을 가지게 되었다.

  https://svgontheweb.com/ko/


1.4 기타 다른 사이트의 CSS 구현방법 

검색을 통해 아래의 사이트 알게 되었으며, STYLE TAG을 제공을 하고 있다.

  http://allinworld99.blogspot.kr/2015/01/blogger-label-widget-blogger-label.html
  http://www.netoopsblog.com/2013/08/custom-labels-widgets-stylish-cool-effects.html


2. Gadget의 기본이해 

• 레이아웃의 Gadget 이란?

Gadget이란, 구글 블로그는 블로그 안에 각 기능을 추가하기 쉽게 Gadget 형태로 각 기능을 가진 모듈로 레이아웃에서 제공한다.

• HTML 편집에서의 Gadget (widget)

HTML 편집에서 Gadget의 구성을 자세히 살펴보면 b:widget 태그로 구성이 되어 있으며, 이는 id와 각각의 설정(widget-setting) 을 제공한다.
그리고, 세부조절을 위해서 widget 태그 내부에  div 태그로 다시 한번 포장이 되어있어 이를  변경이 되어 있어, style 태그 or  Javascript 와 연결시켜 제어 및 디자인을 변경이 가능하다.

b:widget             // Gadget 시작 id 확인 가능 , style 태그 적용

b:widget-setting   // 설정 부분

        b:includable id='main'   // Gadget Body 구성

            보통 div 태그와 같이 연동 없으면 추가  :  style 태그 와 javascript 연동 가능

            b: 로 구성된 script로 구성이 됨            :  자체 script 제공                

        b:includable

b:widget             // Gadget   종료

div 태그가 없다면 추가 하여 넣어도 좋고, 본인의 맘대로 구성을 하여도 좋다.
내가 보기에는 중요한 것은 id를 넣어 줄 수 있는 태그의 구성인 것 같다.
id를 이용하여 style을 적용하고, 또한 다른 태그 id를 이용하여 부분적으로 Javascript과 연동하여 세부조절도 가능하다.

동적으로 하지 않을 거라면, style 태그 설정은 Head 태그 안에서 모두 처리를 하자.

• Gadget Module의 기본 이해 

  레이아웃용 페이지 요소 태그 설명
  https://support.google.com/blogger/answer/46888?hl=ko

 레이아웃용 widget 태그 설명
  https://support.google.com/blogger/answer/46995


3. Gadget의 HTML 편집 방법


템플릿->HTML편집 에서 간단히 TEST Program을 만들어 보자.
HTML편집에서는 Gadget을 widget이라고 하겠으며, 이를 다음과 같이 수정을 해보자.

• widget의 style을 개별 적용  

아래소스에서 style tag 안에 widget의 id name을 알아서 그에 맞게 widget의 디자인을 변경을 해보자.
#Label1,2,3은 내가 강제로 추가한 widget id name이며 이의 Style을 변경을 하자.(아래소스참고)

...

가젯 즉 widget의 구성 

 
 ..
 
....

• widget 과 javascript 적용 

아래 소스에서 widget에 이제 Javascript를 적용하기 위해서 div에 id (LabelCon)를 강제로 부여하고 , 각각의 필요한 부분을 수정한다.

  
    






  


  ....
  



  
    






  


.....
  

• 구글 Jquery 적용 및 블로그 메뉴 변경  

구글의 Jquery을 이용하여 widget을 control 해보고, style 태그과 함께 같이 수정했으며, widget의 margin control은 원래 Google 사이트와 비교하여,
블로그 디자인을 변경하였다. Google 사이트 소스분석이 너무 많아 필요한 부분만 일단 내 블로그에 적용하여 맞게 구현을 하였다.
만약 아래의 소스가 라인별로 숫자와 함께 보이지 않는다면, https의 지원문제로 이부분 보안을 해제해주자. 

/* Side bar Margin Control    */

#sidebar-right-1 {
margin:  5px 0px 0px   5px;
padding: 5px 10px 20px 5px;

}

#CustomSearch1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
border:  1px solid gray;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;
}

#Label1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
border:  1px solid gray;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;
}

#BlogArchive1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;

border:  1px solid gray;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;
}

#Translate1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;

border:  1px solid gray;
border-top-style:none;
border-right-style:none;
border-left-style:none;
border-bottom-style:solid;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;

}

#Stats1{
margin:  0px 0px 0px 0px;
padding: 0px 0px 10px 0px;

}

/* Lable and BlogArhive display    */

.Label .widget-content {
    display: none;
}


.BlogArchive .widget-content {
    display: none;
}

/* Lable and BlogArhive Title setting     */

.BlogArchive h2, .Label h2 {
        text-decoration: none;
        display: inline-block;
}

.BlogArchive h2:focus, .BlogArchive h2:hover, .Label h2:focus, .Label h2:hover {
        text-decoration: underline;
        cursor: pointer;
}

• Jquery의 Sibling의 함수 사용법

sibling이란 목록을 제어하는 기능인 것 같은데, 위에서는 목록을 슬라이딩 효과를 보여주기 위해서 사용했다.

    https://api.jquery.com/siblings/
    http://api.jquery.com/slidetoggle/

사이트는 본인인 수정하고 편집하기 나름인 것 같다. 수정하기 전에 괜찮은 사이트를 찾아
분석한 후 이를 수정을 하면 내가 보기에는 쉬운 것 같다.
다만 시간이 들어갈 뿐이지만.