​​ FastBoot스킨 사이드바에 구글번역 넣기

FastBoot스킨 사이드바에 구글번역 넣기

예전 포스팅에서 FastBoot스킨 사이드바에 구글 검색창을 넣어본적이 있습니다.

 

구글검색창 넣기 http://itfix.tistory.com/21

 

이번시간에는 구글검색창과 나란히 위치할 구글 번역창을 사이드바에 넣어보도록 하겠습니다.

 

 

아래의 구글번역기 설치 사이트로 이동합니다.

 

  https://translate.google.com/manager/website/

 

100개 이상의 언어로 웹사이트 바로 번역할수 있는 Google의 강력한 자동 번역 기능을 웹사이트에 추가하세요.
무료 웹사이트 번역기 플러그인을 사용하면 쉽고 빠르게 전 세계 사용자와 만날 수 있습니다.

라고 자랑질하고 있는 구글 사이트를 만나실 수 있는데 좌측하단의 웹사이트에 지금추가 버튼을 눌러 주세요.

 

 

그럼 위와 같은 화면의 페이지가 나오는데 자신의 블로그 주소를 적고 한국어로 설정해 주세요. 나라찿기가 잘 안내려가질땐 휠버튼으로 하셔도 내려가집니다.

다음 버튼을 누릅니다.

 

 

 

 

특별히 손대야 할 부분은 없는데 애널리틱스를 연결하여 트래픽분석까지 필요하신분은 고급의 마지막 옵션을 체크하고 애널리틱스 아이디를 입력하시면 됩니다.

코드받기 버튼을 누릅니다.

 

 

 

다음은 코드를 받았으면 이제 자신의 블로그로 돌아와 블로그관리에서 블로그관리홈> 꾸미기> 사이드바 로 들어갑니다.
여기서 왼쪽편에 있는 [플러그인]HTML배너출력 의 '+'를 클릭합니다.

 

만일 HTML배너출력 부분이 안보인다면 블로그관리홈> 플러그인 에서 배너출력 을 설정해 줘야 합니다. 

잘 모르겠으면 아래 링크되 있는 구글 검색창 달기 포스팅을 보길 바랍니다.

 

티스토리 우측 사이드바 구글 검색창<Google Search bar> 넣기  http://itfix.tistory.com/21

 

+를 클릭하면 오른쪽에 새로운 배너가 맨위에 생기는데 이것을 끌어당겨 원하는 위치로 이동 시킵니다.

 

 

오른쪽에 생성된 편집창을 누른뒤 제목은 원하시는 대로 적어넣으면 되고, 아래 소스코드는 아까 복사해 두었던 발급받은 코드를 붙여넣기 하세요.

사용자 모듈 저장에 체크해주시고 확인을 누르면 됩니다.

 

 

이제 우측 하단의 변경사항 저장 버튼을 누르면 모든 작업이 끝납니다.

블로그 화면에서 새로고침을 눌러 확인해보니 성공적으로 삽입은 되었으나 뭔가 모양새가 좀 빠집니다.

그래서 위의 구글 검색창처럼 테두리를 씌우겠습니다.

 

아래에 첨부된 텍스트 파일을 다운받으신후 붙여넣기 하라고 쓰여진부분에 구글에서 가져왔던 코드를 넣고 전체를 복사합니다. 

 

구글번역기 테두리.txt
다운로드

 

티스토리 관리화면에서 오른쪽에 삽입되어 있는 구글번역 플러그인의 편집창을 다시 엽니다.

HTML소스 칸에 원래 우리가 최초 삽입했던 소스코드 대신 메모장에서 전체복사한 좀전의 코드로 대체합니다.

확인을 누르신후 다시한번 변경사항 저장 버튼을 눌러 줍니다.

다시 블로그 화면으로 와서 새로고침해서 확인해보니 번역창의 테두리가 잘 설치되었습니다.

 

 

 

참고로 제가 Google 번역이라고 이름지은 것과 그앞의 말하는 모양의 아이콘은 언제라도 플러그인 편집창소스를 열어 수정이 가능합니다.

아래에 아이콘 모양에 해당하는 소스를 참조하십시요.

 

comments -> 대화모양(2개)
flash -> 번개모양
pencil -> 연필모양
comment -> 대화모양(1개)
category -> 목록모양
default -> 새파일모양
tags -> 책갈피모양
calendar -> 달력모양
folder -> 폴더모양
random -> 랜덤재생모양
link -> 연결고리모양
chart-o -> 그래프모양
rss -> 와이파이모양
search -> 돋보기모양
credit-card -> 카드모양

 

붙여넣기 했던 소스코드의 세번째 줄 중에서 빨간색으로 쓰여진 부분이 아이콘을 바꿀수있는 코드입니다.

<h4 class="panel-heading"><i class="fa fa-credit-card"></i> 제목 </h4>

수고하셨습니다.

댓글

Designed by JB FACTORY