блок новостей

блок новостей

Как сделать блок новостей на сайт?

Здравствуйте, уважаемые друзья и гости блога!

Сейчас вам расскажу, покажу и дам скачать исходные файлы с очень нужным скриптом, который позволит вам создать свой блок «новости» на сайте.

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

И так, давайте приступим к практическим действиям и сделаем вывод новостей на сайте ...

Делаем вывод новостей в виде блока на своем сайте!

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

Теперь посмотрите как примерно будет выглядеть ваш блок новостей на сайте:

ДЕМОНСТРАЦИОННЫЙ МАТЕРИАЛ «БЛОК НОВОСТЕЙ»

А здесь Вы можете скачать все исходные файлы для создания того, чтобы сделать блок новостей самостоятельно:

СКАЧАТЬ СКРИПТ «БЛОК НОВОСТЕЙ»

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

Вот это сам скрипт, который создает эффект «блок новостей»:

<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>

Скачав файл с материалами Вы получаете все, чтобы создать свой блок новостей на сайте. Так, что удачи вам и успехов уважаемые друзья!

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

Спасибо за внимание!

Всегда ваш Валерий Бородин

Подписаться на обновление блога

Введите свой e-mail адрес: