Новое в блоге
Loading...
23 мая 2012 г.

Виджет - Scroller Highlighter текст для Blogger

Привет дорогие друзья! Вот решил немного побаловать Вас интересным виджетом - Scroller Highlighter текст для Blogger. Применить виджет можно по разному, была бы фантазия. Приветствовать ваших читателей, поздравить с праздником или какое нибудь сообщение написать. Ведь текст можно менять в любое время. Ставится этот виджет легко, с помощью незаменимого гаджета 'HTML/Javascript".


А теперь давайте посмотрим красивую бегущую строку с эффектом Scroller Highlighter:



Как добавить простой Scroller Highlighter текст для Blogger

Зайдите Дизайн и нажмите - Добавить гаджет HTML/Java Script". Затем вставьте в поле гаджета этот код:
<div style="position:relative;left:0px;top:0px">
<span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span>
</div>
<script type="text/javascript">
var tickercontents=new Array()
tickercontents[0]='Ваш Highlighter Scroller текст здесь.Добро пожаловать!'
var tickdelay=3000
var highlightspeed=10
var currentmessage=0
var clipwidth=0
function changetickercontent(){
crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}
function highlightmsg(){
var msgwidth=crosstick.offsetWidth
if (clipwidth<msgwidth){
clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipwidth=0
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}
function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}
if (document.all || document.getElementById)
window.onload=start_ticking
</script>

Сохраните гаджет. Теперь можно поговорить о настройках:
Замените Ваш Highlighter Scroller текст здесь.Добро пожаловать! на Ваш текст.
Эта строка var highlightspeed=10 отвечает за скорость-время показа.
background-color:yellow; -- эта строчка за фон, в данный момент стоит жёлтый цвет (yellow). Подобрать цвет можно генератором цвета.

Вот вроде и всё. Удачи Вам. До новых встреч.

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

7 коммент. :

  1. Цвет текста тоже меняем (вместо желтого - ставим другой)color:yellow;

    ОтветитьУдалить
  2. Спасибо за статью, все работает, только вот не понятно где менять цвет самого текста

    ОтветитьУдалить
  3. Пожалуйста. Цвет текста по моему не меняется.

    ОтветитьУдалить
  4. Здравствуйте,виджет замечательный. А персонализировать приветствие можно? Например: прикрутить к нему имя авторизованного пользователя Google.

    ОтветитьУдалить

 
Footer