Все для DataLife Engine / DLE хаки / Хак для DLE / Хак Dle красивый вывод новостей без правки php-кода

Хак Dle красивый вывод новостей без правки php-кода



Простое и легкое решение позволит без правки php-кода красиво выводить новости на страницах Вашего сайта. Позволяет не просто оформить новости через класс стилей CSS, а сделать одинаковым, удобным для чтения и угодить пользователям и поисковикам.
Сделать это можно легко,с минимальным вмешательством в код Вашего шаблона dle.
Все что нам понадобиться jQuery и CSS.
Хак Dle красивый вывод новостей без правки php-кода
Основная задача:
- В короткой новости выводим только первую картинку определенного размера и кусок описания.
- Настроить внешний вид через класс стилей CSS.

Установка
1. Для начала подключим библиотеку jQuery. До тега

</hеad>


Вставить код скрипта :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Это нужно в основном тем у кого версия dle ниже 9.0).

2. Ниже строки с подключением библиотеки (опять перед

</hеad>


Теперь основной небольшой скрипт , который и будет отвечать за " внешний вид новостей" на сайте:
В таком варианте новость будет обрезаться не только в краткой но и в полной новости.
Для краткой новости это кусок скрипта вставить в шаблон shortstory.tpl

<script language="javascript" type="text/javascript"><!--$(function cImg () {    nNews = $("div[id*=news-id-]")    nNews.each(function (i) {    $(this).replaceWith("<div id='n-id-"+i+"' class='modnews'><div class='image load'></div>" + $(this).text() + "</div>");    $(this).find("img").filter("img:first").unwrap().removeAttr("align").fadeIn(2000).prependTo("div[id='n-id-"+i+"'] div[class*=image]");    $("div[class*=image]:empty").hide(2000);    });    });//--></script>


Итак что же делает скрипт :
Наш скрипт берёт содержимое тега {shоrt-story}, "вытаскивает" оттуда текст и первую картинку и создаёт изменённую структуру с картинкой, помещённый в отдельный блок, после которого помещается текст новости, очищенный от всего "мусора", а далее мы всё это оформляем через CSS.

3. CSS-код:

.modnews {    height: 80px;    overflow: hidden;    font: normal 12px/16px Tahoma, sans-serif;    text-align: justify;    }.modnews .image {    display: block;    height: 80px;    width: 80px;   margin-right: 5px;    overflow: hidden;    float: left;    }    .modnews .load {        background: url(../images/loadimage.gif) no-repeat center center;        }    .modnews .image img {        height: 80px;        }


Внимание ! В данный момент размер картинки установлен 80*80 px , если нужен другой размер то его легко поменять в этом месте

.modnews .image {    display: block;    height: 80px; (  высота  картинки )    width: 80px; (ширина картинки)    margin-right: 5px; (отступ от границы)    overflow: hidden;    float: left; (расположение с левой стороны right (с правой ) center (в центре))     }


Код приведен в качестве примера, Вы можете воспользоваться своими вариантами оформления, главное не забыть для блока с текстом новости применить overflow: hidden и корректно задать размеры изображения.
Так же не забываем создать и кинуть в папку images текущего шаблона файл loadimage.gif. Он нужен для красивого вида "загрузки" картинок.

Преимущества метода:
Не требует практически исправлений в шаблонах и правки php-кода.
Поисковики будут видеть стандартный вид новостей, а посетители - красивый.

Предлагаем dle хаки скачать как красивый вывод новостей без правки php-кода

krasivyy-vyvod-novostey-na-stranicah.rar [21,86 Kb] (cкачиваний: 160)
  • 100
Добавить комментарий

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent