Tistory 블로그에서 구글 번역기 코드를 입맛대로 수정하자

아래 코드는 나의 블로그에서 적용중인 구글 번역기 코드이다.

 

Google Translate

 

하기 코드를 드래그 복사해서 사용하면 에러가 발생한다.

메모장에 붙여넣기 한후 문단을 아래처럼 똑같이 정리한 후 사용해야 한다.

 

<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","native_language_names":true,"detect_browser_language":true,"languages":["ko","en","ja","zh-CN","fr","it","es","de"],"wrapper_selector":".gtranslate_wrapper","alt_flags":{"en":"usa","pt":"brazil","fr":"quebec"}}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/fd.js" defer></script>

 

<style>
  /* 드롭다운박스 설정*/
  .gtranslate_wrapper select {
    background-color: rgba(155, 155, 155, 0.1); /* 드롭다운박스의 배경을 70% 불투명하게 설정 */
    color: white !important; /* 드롭다운박스의 텍스트 색을 흰색으로 */
    border-color: rgba(155, 155, 155, 0.1); /* 드롭다운박스의 테두리 색상을 70% 불투명하게 설정 */
    padding: 5px;
    font-size: 15px;
    border: none;
    border-radius: 30px; /* 드롭다운박스의 모서리 R값 적용으로 반원으로 둥글게 만들기 */
    transform: translate(23%, 10%); /* 드롭다운박스의 위치 배치 */
  }
  /* 드롭다운박스의 내부 option 항목 설정 */
  .gtranslate_wrapper select option {
    color: black !important; /* 드롭다운박스의 내부 option 항목의 텍스트 색상 블랙으로 */
    background-color: white !important; /* 드롭다운박스의 내부 option 항목의 배경색 흰색으로 */
  }
</style>