Узнайте Как Сделать Свой блог Посещаемым и Денежным!


') var scrollerinstance=this if (window.addEventListener) //run onload in DOM2 browsers window.addEventListener("load", function(){scrollerinstance.initialize()}, false) else if (window.attachEvent) //run onload in IE5.5+ window.attachEvent("onload", function(){scrollerinstance.initialize()}) else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec setTimeout(function(){scrollerinstance.initialize()}, 500) } // ------------------------------------------------------------------- // initialize()- Initialize scroller method. // -Get div objects, set initial positions, start up down animation // ------------------------------------------------------------------- pausescroller.prototype.initialize=function(){ this.tickerdiv=document.getElementById(this.tickerid) this.visiblediv=document.getElementById(this.tickerid+"1") this.hiddendiv=document.getElementById(this.tickerid+"2") this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv)) //set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2) this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px" this.getinline(this.visiblediv, this.hiddendiv) this.hiddendiv.style.visibility="visible" var scrollerinstance=this document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1} document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0} if (window.attachEvent) //Clean up loose references in IE window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null}) setTimeout(function(){scrollerinstance.animateup()}, this.delay) } // ------------------------------------------------------------------- // animateup()- Move the two inner divs of the scroller up and in sync // ------------------------------------------------------------------- pausescroller.prototype.animateup=function(){ var scrollerinstance=this if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){ this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px" this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px" setTimeout(function(){scrollerinstance.animateup()}, 50) } else{ this.getinline(this.hiddendiv, this.visiblediv) this.swapdivs() setTimeout(function(){scrollerinstance.setmessage()}, this.delay) } } // ------------------------------------------------------------------- // swapdivs()- Swap between which is the visible and which is the hidden div // ------------------------------------------------------------------- pausescroller.prototype.swapdivs=function(){ var tempcontainer=this.visiblediv this.visiblediv=this.hiddendiv this.hiddendiv=tempcontainer } pausescroller.prototype.getinline=function(div1, div2){ div1.style.top=this.visibledivtop+"px" div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px" } // ------------------------------------------------------------------- // setmessage()- Populate the hidden div with the next message before it's visible // ------------------------------------------------------------------- pausescroller.prototype.setmessage=function(){ var scrollerinstance=this if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) setTimeout(function(){scrollerinstance.setmessage()}, 100) else{ var i=this.hiddendivpointer var ceiling=this.content.length this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1 this.hiddendiv.innerHTML=this.content[this.hiddendivpointer] this.animateup() } } pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any if (tickerobj.currentStyle) return tickerobj.currentStyle["paddingTop"] else if (window.getComputedStyle) //if DOM2 return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") else return 0 }

четверг, 8 декабря 2011 г.

Как сделать меняющий цвет заголовок на Blogspot

Друзья всем привет. Сегодня я хочу показать вам, как сделать оригинальный меняющий цвет заголовок на Blogspot. То есть будет меняться цвет заголовка при наведении курсора. Это на тот случай, если стандартный вариант  по каким то причинам вам не подходит или не нравится, или вы хотите сделать на своём блоге нечто оригинальное для Blogspot. Как это делается, я подсмотрел на одном забугорном блоге, и с удовольствием делюсь с вами. Как выглядят заголовки на блоге, вы можете посмотреть здесь.


И так приступим и как всегда стандартно:
1) Заходим в "Панель управления"
2) Нажимаем "Дизайн"
3) Далее нажимаем "Изменить Html"
На всякий случай прежде чем вносить изменения сохраняем копию шаблона.

Далее при помощи кнопок Ctrl+F находим ]]>
И прямо над ним вставляем этот код:


/*----MBT Heading Tag----*/

h3{
font-family: Times New Roman !important;
font-style:italic !important;
}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h3:hover {
color: #00BFFF;
border-left:10px solid #00BFFF;
border-right:10px solid #00BFFF;
box-shadow:0px 0px 13px #00BFFF;
-webkit-box-shadow:0px 0px 13px #00BFFF;
-moz-box-shadow:0px 0px 13px #00BFFF;
}
blockquote {
background: #FFFAFA url() no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DCDCDC;
}
blockquote:hover {
background: #FFFAFA url() no-repeat right bottom ;
color:#FF0000;
}
blockquote p {
margin: 0;
padding-top:10px;
}
  
Если вы хотите, чтобы при наведении курсора был другой цвет, тогда поменяйте этот цвет #00BFFF на свой. Так же вы можете изменить шрифт заголовка Times New Roman на любой другой. Так же изменить курсив на прямой шрифт,для этого просто уберите значение italic.

Ну вот друзья на сегодня и всё. Буду рад, если сегодняшняя статья для пользователей Блоггера, как сделать оригинальный меняющий цвет заголовок на Blogspot была полезной и интересной. Возможно вам также интересно будет узнать как сделать кнопку автоматической прокрутки страницы вверх на Blogspot. А я с вами прощаюсь и как всегда желаю удачи.

Хотите получать свежие статьи?

0 коммент.:

Отправить комментарий

Как раскрутить блог
Создание эффективной страницы

Посещаемость сайта