홈
블로그

Blogger에서 자바스크립트를 사용하여 동적 인사말을 추가하는 방법

해당 게시물의 튜토리얼은 Blogger에서 자바스크립트(JavaScript)를 사용하여 동적 인사말을 추가하는 방법입니다.

Blogger-동적-인사말-추가

자바스크립트를 사용한 동적 인사말이란?

웹사이트에서 방문자가 웹사이트를 방문하는 시간에 따라 Good morning, Good afternoon, 또는 Good evening이라는 메시지로 방문자를 맞이하는 것을 본 적이 있을 것입니다. 방문자의 기기 시간을 읽고 인사하는 간단한 JavaScript 코드입니다. 이번 글에서는 웹사이트 방문자에게 자동 인사말 메시지를 표시하는 방법을 보여드리겠습니다.

장점

튜토리얼을 시작하기 전에 먼저 장점에 대해 알아보겠습니다.

  1. 장치의 시간을 자동으로 가져옵니다.
  2. 기기의 시간에 따라 자동으로 인사말을 표시합니다.
  3. 간단하고 가벼운 스크립트.
  4. 관리자 사이트에 대한 동적 모습.
  5. 웹사이트가 방문자를 맞이합니다.

추가하는 방법

Blogger 웹사이트를 위한 동적 인사말을 만드는 데에는 코딩에 대한 많은 지식이 필요하지 않습니다. 이미 디자인되어 있기 때문입니다. 해야 할 일은 Blogger 테마 XML의 올바른 위치에 코드를 구현하는 것입니다.

블로거 사이트에 이 동적 인사말을 설치하는 것은 매우 간단합니다. 아래 코드를 복사하여 올바른 위치에 붙여 넣으면 됩니다.

1단계

  1. 우선 로그인하세요. 블로거 대시보드.
  2. 블로거 대시보드에서 테마를 클릭하세요.
  3. '맞춤설정' 버튼 옆에 있는 화살표 아이콘'▼'을 클릭하세요.
  4. HTML 편집을 클릭하면 편집 페이지로 리디렉션됩니다.
  5. 검색(Ctrl+F)-]]></b:skin>
  6. 이제 ]]></b:skin> 바로 위에 아래 CSS 코드를 붙여 넣습니다.
    7. svg{width:16px;height:16px;margin-right:6px}
#greeting .greeting{font-size:14px}
.greeting{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:20px;line-height:20px;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px;box-shadow:-6px -6px 14px rgba(255,255,255,.7),-6px -6px 10px rgba(255,255,255,.5),6px 6px 8px rgba(255,255,255,.075),6px 6px 10px rgba(0,0,0,.15)}
.drK  .greeting{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}
  7. </body> 검색하여 다음 Javascript를 바로 위에 붙여넣습니다.
    8.   <script type='text/javascript'>/*<![CDATA[*/
 function greetings() {
  var message = "";
  var time = new Date().getHours();

  if (time >= 4 && time < 12) {
    return (message = "Good Morning :)");
  } else if (time >= 12 && time < 16) {
    return (message = "Good Afternoon :)");
  } else if (time >= 16 && time < 19) {
    return (message = "Good Evening :)");
  } else {
    return (message = "Have a sweet dream :)");
  }
}

document.getElementById("greeting").innerHTML = greetings();

/*]]>*/</script>
  8. 이제 아래 HTML 코드를 복사하여 사용하려는 곳에 붙여넣으세요.
    9.  <div class="greeting" ><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" version="1.1" viewBox="0 0 106.059 106.059"><path d="M90.546 15.518c-20.688-20.69-54.346-20.69-75.03-.005-20.688 20.685-20.686 54.345.002 75.034 20.682 20.684 54.34 20.684 75.026-.004 20.686-20.685 20.684-54.343.002-75.025zm-5.789 69.24c-17.493 17.494-45.961 17.496-63.455.002-17.498-17.497-17.495-45.966 0-63.46 17.494-17.493 45.96-17.495 63.457.002 17.494 17.494 17.492 45.963-.002 63.456zM33.299 44.364h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755c.158-.196.392-.308.645-.308s.486.111.641.304l7.697 9.757c.189.237.229.58.1.859a.822.822 0 0 1-.741.467h-3.554a.59.59 0 0 1-.463-.225l-3.68-4.664-3.681 4.664a.59.59 0 0 1-.462.225zm44.599-1.326a.84.84 0 0 1 .1.859.822.822 0 0 1-.741.467h-3.554a.588.588 0 0 1-.463-.225l-3.681-4.664-3.681 4.664a.59.59 0 0 1-.462.225h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755a.823.823 0 0 1 .645-.308c.254 0 .486.111.642.304l7.697 9.757zm-1.882 21.03c-3.843 8.887-12.843 14.629-22.927 14.629-10.301 0-19.354-5.771-23.064-14.703a3 3 0 1 1 5.54-2.3c2.776 6.686 9.655 11.004 17.523 11.004 7.69 0 14.528-4.321 17.42-11.011a2.999 2.999 0 0 1 3.944-1.563 2.999 2.999 0 0 1 1.564 3.944z"/></svg><span id="greeting"/></div>
  9. 마지막으로 이 아이콘을 클릭하여 테마를 저장하고 확인합니다.

Blogger 게시물에 동적 인사말을 간단하게 추가하는 방법

다음 코드는 테마 편집 없이 게시물에 직접 사용할 수 있는 동적 인사말입니다.

<div class="greeting" ><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" version="1.1" viewBox="0 0 106.059 106.059"><path d="M90.546 15.518c-20.688-20.69-54.346-20.69-75.03-.005-20.688 20.685-20.686 54.345.002 75.034 20.682 20.684 54.34 20.684 75.026-.004 20.686-20.685 20.684-54.343.002-75.025zm-5.789 69.24c-17.493 17.494-45.961 17.496-63.455.002-17.498-17.497-17.495-45.966 0-63.46 17.494-17.493 45.96-17.495 63.457.002 17.494 17.494 17.492 45.963-.002 63.456zM33.299 44.364h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755c.158-.196.392-.308.645-.308s.486.111.641.304l7.697 9.757c.189.237.229.58.1.859a.822.822 0 0 1-.741.467h-3.554a.59.59 0 0 1-.463-.225l-3.68-4.664-3.681 4.664a.59.59 0 0 1-.462.225zm44.599-1.326a.84.84 0 0 1 .1.859.822.822 0 0 1-.741.467h-3.554a.588.588 0 0 1-.463-.225l-3.681-4.664-3.681 4.664a.59.59 0 0 1-.462.225h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755a.823.823 0 0 1 .645-.308c.254 0 .486.111.642.304l7.697 9.757zm-1.882 21.03c-3.843 8.887-12.843 14.629-22.927 14.629-10.301 0-19.354-5.771-23.064-14.703a3 3 0 1 1 5.54-2.3c2.776 6.686 9.655 11.004 17.523 11.004 7.69 0 14.528-4.321 17.42-11.011a2.999 2.999 0 0 1 3.944-1.563 2.999 2.999 0 0 1 1.564 3.944z"/></svg><span id="greeting"/></div>

   <style>
 svg{width:16px;height:16px;margin-right:6px}
#greeting .greeting{font-size:14px}
.greeting{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:20px;line-height:20px;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px;box-shadow:-6px -6px 14px rgba(255,255,255,.7),-6px -6px 10px rgba(255,255,255,.5),6px 6px 8px rgba(255,255,255,.075),6px 6px 10px rgba(0,0,0,.15)}
.drK  .greeting{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe} 
 </style>

<script type='text/javascript'>/*<![CDATA[*/
 function greetings() {
  var message = "";
  var time = new Date().getHours();

  if (time >= 4 && time < 12) {
    return (message = "Good Morning :)");
  } else if (time >= 12 && time < 16) {
    return (message = "Good Afternoon :)");
  } else if (time >= 16 && time < 19) {
    return (message = "Good Evening :)");
  } else {
    return (message = "Have a sweet dream :)");
  }
}

document.getElementById("greeting").innerHTML = greetings();

/*]]>*/</script>

결론

해당 게시물에서는 Blogger에서 JavaScript를 사용하여 동적 인사말을 추가하는 방법에 대한 튜토리얼을 작성했습니다. 게시물이 마음에 드셨기를 바랍니다. 또한 문제가 있거나 관련 문의사항이 있으시면 댓글로 남겨주세요.

#블로그

댓글 쓰기

© ‧ PICK ‧ All rights reserved. Developed by NLD Blog