구글 사이트에서 ticker 추가하는 방법
이번에 저희 웹사이트를 약간 업그레이드 했습니다.
구글 사이트는 구글앱스의 기본 기능으로 홈페이지 제작 및 인트라넷 용도로 사용하실 수 있습니다.
회사의 중요한 공지나 안내를 ticker 기능을 이용해 쉽게 정보를 공유할 수 있습니다.
아래의 코드를 사이트 편집모드에서 원하는 위치에 HtmlBox 가젯 추가 후 붙여넣기를 하면 간단히 ticker를 구글사이트에 추가할 수 있습니다.
- Insert 메뉴에서 Ticker를 보여주기 위한 위치에 HTML Box 추가 화면

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

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

- 원본 소스 코드
아래 녹색 부분을 copy해서 붙여넣기 하면 됩니다.
Adding a ticker on Google Site with static content
<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>