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


') 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 }

среда, 22 февраля 2012 г.

Как создать Stickybar на Блоггере

Kak sozdat Stickybar na BlogspotДрузья, приветствую вас на блоге bloguspeh.ru. Сегодня я хочу в очередной раз поделиться с вами фишкой для Blogspot. А именно как создать Stickybar на Блоггере (рекламная строка), то есть фиксированная рекламная или новостная площадка, которая находится в самом верху блога над шапкой. Как она выглядит, вы можете сейчас наблюдать у меня на блоге. Этот замечательный виджет создал пакистанский блоггер Мустафа Мухаммед.

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

Как вы уже заметили, данный виджет не навязчиво располагается в верху блога, но даже если вашего посетителя он раздражает, отвлекает или мешает, то его можно легко закрыть нажав на красный крестик справа. Появится он только при обновлении или переходе на другую страницу. Так же можно настроить и цвет Stickybar так, что бы он идеально подходил под дизайн вашего сайта.

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

И так, повторяйте за мной:
1) Идём в "Панель управления Блоггер"
2) Далее нажимаем кнопки Дизайн => Изменить HTML
3) Затем, на всякий случай делаем резервное копирование шаблона
4) И при помощи кнопок Ctrl+F ищем этот код: ]]>
5) Сразу над ним вставляем код который находится ниже:
Вставляем этот код -> 
#mbt_bar{
background:#0026FF url('https://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
      margin-right: 6px;}
Если вы хотите изменить цвет, то замените этот в верху кода "background:#0026FF" на свой. Подобрать цвет и узнать его код, вы сможете при помощи генератора цветов кода.
6) Теперь опять при помощи кнопок Ctrl+F находим этот код:
И выше него вставляем теперь этот код:
Вставляем этот код -> 
7) Ну и последний штрих, опять-таки при помощи этих же кнопок Ctrl+F находим следующий код:
И выше него вставляете соответствующий код, который расположен ниже:
Теперь друзья внимание! В то место которое я выделил зелёным цветом, вам необходимо вставить свой текст и свою ссылку. И все последующие разы, когда вы захотите изменить свою рекламу, вам надо будет поменять только ссылку и текст только в этом месте.

Ну вот друзья, это всё о чём я хотел написать. Сегодня, мы узнали о том, как создать Stickybar на Блоггере, с помощью простых добавлений элементов кода, которые я позаимствовал на блоге Мустафы mybloggertricks. И ещё, если вы пропустили мой предыдущий пост о том как установить форму подписки в конце статьи на Блоггере, то можете сделать это прямо сейчас. А я с вами прощаюсь, как всегда желаю удачи и до скорых встреч!

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

0 коммент.:

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

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

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