Как сделать блок новостей на сайт?
Здравствуйте, уважаемые друзья и гости блога! Сейчас вам расскажу, покажу и дам скачать исходные файлы с очень нужным скриптом, который позволит вам создать свой блок “новости” на сайте.
Вы наверное уже встречали множество сайтов, где в каком-то заметном месте расположен блок новостей и они выводятся специальным скриптом. который Вы сегодня сможете здесь скачать совершенно бесплатно и с его помощью создать свой вывод новостей в виде блока на сайте в любом удобном для Вас месте.
И так, давайте приступим к практическим действиям и сделаем вывод новостей на сайте …
Делаем вывод новостей в виде блока на своем сайте!
Что нам с вами потребуется для того, чтобы создать блок новостей для сайта? Ничего сверх естественного! Всего лишь скрипт, который Вы сможете скачать вместе со всеми исходными файлами у меня на блоге и некоторое умение обращаться со своим хостингом.
Теперь посмотрите как примерно будет выглядеть ваш блок новостей на сайте:
ДЕМОНСТРАЦИОННЫЙ МАТЕРИАЛ “БЛОК НОВОСТЕЙ”
А здесь Вы можете скачать все исходные файлы для создания того, чтобы сделать блок новостей самостоятельно:
СКАЧАТЬ СКРИПТ “БЛОК НОВОСТЕЙ”
Ну вот теперь Вы готовы к тому, чтобы узнать все подробности по тому, как создать свой блок новостей на своем сайте самостоятельно.
Вот это сам скрипт, который создает эффект “блок новостей”:
<script language="javascript" type="text/javascript">
var Ticker = new Class({
setOptions: function(options) {
this.options = Object.extend({
speed: 5000,
delay: 5000,
direction: 'vertical',
onComplete: Class.empty,
onStart: Class.empty
}, options || {});
},
initialize: function(el,options){
this.setOptions(options);
this.el = $(el);
this.items = this.el.getElements('li');
var w = 0;
var h = 0;
if(this.options.direction.toLowerCase()=='horizontal') {
h = this.el.getSize().size.y;
this.items.each(function(li,index) {
w += li.getSize().size.x;
});
} else {
w = this.el.getSize().size.x;
this.items.each(function(li,index) {
h += li.getSize().size.y;
});
}
this.el.setStyles({
position: 'absolute',
top: 0,
left: 0,
width: w,
height: h
});
this.fx = new Fx.Styles(this.el,{duration:this.options.speed,onComplete:function() {
var i = (this.current==0)?this.items.length:this.current;
this.items[i-1].injectInside(this.el);
this.el.setStyles({
left:0,
top:0
});
}.bind(this)});
this.current = 0;
this.next();
},
next: function() {
this.current++;
if (this.current >= this.items.length) this.current = 0;
var pos = this.items[this.current];
this.fx.start({
top: -pos.offsetTop,
left: -pos.offsetLeft
});
this.next.bind(this).delay(this.options.delay+this.options.speed);
}
});
var hor = new Ticker('TickerVertical',{speed:1000,delay:4000,direction:'horizontal'});
</script> Он должен вставляться в тело нашего документа, после шапки между тегами <body></body>.
Еще мы с вами должны подключить стили CSS, чтобы все выглядело красиво и аккуратно. Они подключаются между тегами <head></head> сразу после нашей шапки. Вот эти стили:
<style type="text/css">
body {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
#NewsTicker{
border:solid 1px #cccccc;
width:600px;
height:200px;
margin:0 auto;
}
#NewsTicker h1{
padding:6px;
margin:0;
border:0;
background:#dfe7ed;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width: 600px;
height: 200px;
display: block;
overflow: hidden;
position: relative;
}
/* --------------- */
/* Ticker Vertical */
#TickerVertical {
width: 600px;
height: 140px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerVertical li {
width: 280px;
color: #444444;
text-align: left;
font-size: 11px;
margin: 0;
padding: 6px 10px;
float: left;
height: 164px;
display: inline;
}
#TickerVertical li .NewsTitle{
display: block;
color: #000000;
font-size: 20px;
margin-bottom:6px;
font-family:Georgia, "Times New Roman", Times, serif;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display: block;
color: #000000;
margin-bottom:6px;
text-decoration:underline;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:none;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
border:solid 1px #DEDEDE;
}
#TickerVertical li .NewsFooter{
display: block;
font-size: 10px;
margin:6px 0 14px 0;
color:#000000
}
</style> Затем нам нужно вставить все наши новости, то есть наш блок новостей, который будет выводиться, заключив его в теги <div></div> и вставив сразу после наших стилей. Вот наш блок новостей, который Вы будете редактировать под себя:
<div id="NewsTicker"> <h1>Другие новости здесь: <a href="https://pribylwm.ru/poleznye-programmy">Полезные программы и все о заработке в интернете!</a></h1> <div id="NewsVertical"> <ul id="TickerVertical"> <li> <img src="pic/N0001.png" border="0" class="NewsImg"/> <span class="NewsTitle"> <a href="https://pribylwm.ru/raskrutka-i-seo">Раскрутка и SEO</a> </span> Здесь Вы узнаете все о том, как сделать SEO продвижение и раскрутку своего сайта или блога бесплатно!<span class="NewsFooter"><strong>Опубликовано 25 мая</strong> - 324 комментария</span> </li> <li> <img src="pic/N0002.png" border="0" class="NewsImg"/> <span class="NewsTitle"> <a href="https://pribylwm.ru/vidy-zarabotka">Виды заработка в интернете</a> </span> Информация по видам и способам заработка в интернете на своем ресурсе. Программы, сервисы и всевозможные фишки, которые Вы болше ни где не сможете найти!<span class="NewsFooter"><strong>Опубликовано 22 мая</strong> - 265 комментария</span> </li> <li> <img src="pic/N0003.png" border="0" class="NewsImg"/> <span class="NewsTitle"> <a href="https://pribylwm.ru/web">Все для новичка</a> </span> Вы новичок в интернете? И не знаете с чего начать? Вы попали по адресу! Здесь Вы узнаете о том, как создать свой сайт бесплатно и начать зарабатывать!<span class="NewsFooter"><strong>Опубликовано 18 мая</strong> - 342 комментария</span> </li> <li> <img src="pic/N0004.png" border="0" class="NewsImg"/> <span class="NewsTitle"><a href="https://pribylwm.ru/blogovedenie">Все о блоговедении... </a></span> Интересные и полезные новости о создании сайта здесь! Ничните свой интернет-бизнес с нуля! Узнайте как все правильно сделать свой сайт прибыльным!<span class="NewsFooter"><strong>Опубликовано 18 мая</strong> - 342 комментария</span> </li> </ul> </div> <h2>Еще здесь: <a href="https://pribylwm.ru/vidy-zarabotka/zarabotok-v-socialnyx-setyax.html">О заработке в социальных сетях!</a></h2> </div>
Скачав файл с материалами Вы получаете все, чтобы создать свой блок новостей на сайте. Так, что удачи вам и успехов уважаемые друзья!
Если вам понравился материал пожалуйста сделайте следующее…
- Поставьте «лайк».
- Сделайте ретвит.
- Поделитесь этим постом с друзьями в социальных сетях.
- И конечно же, оставьте свой комментарий ниже
Спасибо за внимание!
Всегда ваш Валерий Бородин
Очень хороший скрипт, я хотела бы такой поставить. Но вот беда: с программированием и кодами я не дружу, поэтому самой мне никак не поставить. Хотя у меня на блоге есть раздел с последними статьями рубрики блога. Наверное, это почти одно и тоже?
Не могу сказать вам Таисия. Не нашел этой рубрики у Вас на сайте. А установить этот блок не так уж и трудно!
А как сделать чтобы этот блок двигался не горизонтально, а вертикально?
В двух словах не объяснить! Как только появиться свободная минутка, сразу об этом напишу пост. Спасибо за то, что Вы читаете мой блог! Удачи, Владислав!
А где изменить размер всего блока новостей?
Пытался изменить в строках: 7, 21, 30 (там, где 600px), но изменилась только та часть, где “другие новости здесь”
Заранее спасибо за ответ!