구글 사이트에서 ticker 추가하는 방법

이번에 저희 웹사이트를 약간 업그레이드 했습니다.

구글 사이트는 구글앱스의 기본 기능으로 홈페이지 제작 및 인트라넷 용도로 사용하실 수 있습니다.

회사의 중요한 공지나 안내를 ticker 기능을 이용해 쉽게 정보를 공유할 수 있습니다.

아래의 코드를 사이트 편집모드에서 원하는 위치에 HtmlBox 가젯 추가 후 붙여넣기를 하면 간단히 ticker를 구글사이트에 추가할 수 있습니다.

- Insert 메뉴에서 Ticker를 보여주기 위한 위치에 HTML Box 추가 화면

- HTML Box의 설정화면에서 코드 추가

- 실제 사이트에서 구동되는 화면

- 원본 소스 코드

Adding a ticker on Google Site with static content

• Open the Google site in editor mode and Navigate to the page where you would like to add the ticket.

• Go to Insert > HtmlBox

• Paste the following HTML code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>

function tick(){

$('#ticker li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker')).css('opacity', 1); });

}

setInterval(function(){ tick () }, 5000); //Change this value to adjust the transition delay

</script>

<style>

.body {

  border: 1px solid #DDDDDD;

  border-radius: 1px;

  box-shadow: 0 0 5px #DDDDDD;

  height: 40px;

  overflow: hidden;

  padding: 0;

  width: 96%;

  font-size : 13pt;

}

.ticker {

  list-style: none outside none;

  height: 40px;

  overflow: hidden;

  margin : auto 0px;

  }

.ticker li {

  border-bottom: 1px dotted #DDDDDD;

  height: 40px;

  line-height : 40px;

  margin: 0 5px;

  padding: 0px 5px;

  vertical-align: middle;

}

</style>

<div class="body">

<div style="float:left">

  <img src="https://sites.google.com/a/sbctech.net/sbc-technology-2/contactus/rss_icon.png" style="width:30px; height:30px; margin:5px"/>

</div>

<div style="float:none">

<ul class="ticker" id="ticker">

<li style="opacity: 1;">

 <a href="http://www.sbctech.net/apps-update/gugeul-aebseuseukeulibteuleulhwal-yonghanilyeogseogwanli">클라우드 온라인 이력서 소개</a> Create resume directly in Google drive.

</li>

<li style="opacity: 1;">

 <a href="http://www.sbctech.net/apps-update/sbcsmartinvoicev11chromeversion">Cloud Smart Invoice 소개</a> Free invoicing app built using Apps Script.

</li>

</ul>

</div>

</div>