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


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

» Всё для BlogSpot » Вывод популярных статей на Blogspot. Анимационный виджет с картинками.

вторник, 4 октября 2011 г.

Вывод популярных статей на Blogspot. Анимационный виджет с картинками.

Приветствую вас друзья. Если вы ведёте свой блог на бесплатной площадке от Google, то сегодня я хочу показать вам, как установить виджет "вывод популярных статей на Blogspot". Но не стандартный, который предлагает нам сам Blogger, а с добавлением скрипта, благодаря которому, наш виджет станет динамическим. Он очень простой в установке, и я думаю никаких сложностей не должно возникнуть. Как он работает вы можете посмотреть справа в сайдбаре здесь. И так начнём.

Входим  в панель инструментов  Blogger, нажимаем кнопку "Дизайн" затем "Элементы страницы". Нажимаем кнопку "Добавить гаджет", и в открывшейся вкладке выбираем "Популярные сообщения" и настраиваем его.
Рекомендую выбрать больше четырёх сообщений в показе, для эффекта анимации. 

Если же у вас уже установлен данный гаджет, то вы пропускаете этот шаг и переходите к следующему.

Далее, так же нажимаем на кнопку "Добавить гаджет", в открывшемся окне выбираем "HTML/JavaScript"
И вставляем туда этот код:

height:400px;

}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.tags span,
.tags a {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->

Вы также этот виджет можете изменить по размерам сайдбара своего блога.
height:400px;  -  высота
width:220px;  -  ширина (если эту изменяте)
width:208px;  -  ширина (то тогда и эту тоже)

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

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

Автор: Игорь на вторник, октября 04, 2011
Ярлыки: Всё для BlogSpot

1 коммент.:

Андрей Воровцев комментирует...

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

3 июля 2012 г., 3:20

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

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

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