prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Web » Полезные статьи » Make it cool - красивый вывод новостей без хаков и модулей

Make it cool - красивый вывод новостей без хаков и модулей


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Make it cool - красивый вывод новостей без хаков и модулей.


Make it cool - красивый вывод новостей без хаков и модулей


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

Итак, задача озвучена, приступим к её решению.
И что бы не заставлять Вас крутить всю страницу до конца в поисках демонстрации описываемого способа, я дам вам эту ссылку (нажмите на кнопку "Сделать красиво" и всё поймёте), где я специально добавил новости как стандартный криворукий пользователь, чтобы наглядно было видно работу скрипта.

Цель:
- Вывести в короткой новости только первую картинку и кусок описания.
- Настроить внешний вид через 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>
)
вставляем небольшой скрипт, он и отвечает за все "прелести внешнего вида новостей" на сайте:
<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;
        }


Данный код дан для примера. Вы можете воспользоваться своими вариантами оформления, главное не забыть для блока с текстом новости применить overflow: hidden и корректно задать размеры изображения.

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

Вот собственно и всё. как всегда жду конструктивных предложений и критику.

Автор: ПафНутиЙ ( _http://pafnuty.name)


-1
Просмотры: 4772 VIP ProWebber | Комментарии (39)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1ALTERNATE

  • 17 ноября 2010 07:57
  • Регистрация: 8.08.2009
  • ICQ: 817135
  • Комментариев: 130
  • Выкл.
Можно было обойтись и без jQuery.

--------------------

0

#2Maxter

  • 17 ноября 2010 08:04
  • Регистрация: 26.04.2010
  • ICQ: 595823732
  • Комментариев: 31
ALTERNATE,
согласен.

0

#3ПафНутиЙ

  • 17 ноября 2010 08:45
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
ALTERNATE, Maxter,
Интересно, и каким же образом сделать то же самое без jquery или правки php?


--------------------

0

#4BETEPAH

  • 17 ноября 2010 09:03
  • Регистрация: 12.03.2010
  • ICQ: 6844635
  • Комментариев: 293
ПафНутиЙ Здесь создавалась подобная тема на форуме, но за работу +1
Буду переоформлять тубами с закругленными углами картинки

--------------------

0

#5ПафНутиЙ

  • 17 ноября 2010 09:09
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
BETEPAH,
smile я на форум редко хожу.

--------------------

0

#6ivantu

  • 17 ноября 2010 09:19
  • Регистрация: 17.12.2009
  • ICQ: 310573927
  • Комментариев: 73
зашли на сайт НЕ реклама на Newlifecinema.ru - включили мосГ* и все у вас получиться, стандартными средствами DleШки.
Я впринципе от туда стянул такой вывод новостей...
обошелся доп.полями и CSS

--------------------

0

#7ПафНутиЙ

  • 17 ноября 2010 09:31
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
ivantu,
этот способ годится (собственно его и нужно использвать), если делаешь сайт с нуля. А если на сайте уже пара, тройка тысяч новостей, да ещё и каждый автор по своему оформляет новости....? тут уже никакие стандартные средства движка не помогут. Опять же ПС видят "полную" версию новостей, со всеми картинками и необрезанным текстом. При этом никакой дополнительной нагрузки на сервер нет, в отличии от любого доп поля или хака/модуля.
И никто не мешает использовать в качестве селектора выборки новостей другие параметры...

--------------------

0

#8ivantu

  • 17 ноября 2010 09:41
  • Регистрация: 17.12.2009
  • ICQ: 310573927
  • Комментариев: 73
ПафНутиЙ,
согласен.

--------------------

0

#9bkkb

  • 17 ноября 2010 10:45
  • Регистрация: 18.12.2009
  • ICQ: --
  • Комментариев: 219
попробовал поставил на свой большой варезник не понравилось все новости расплылись стали кривыми

0

#10ПафНутиЙ

  • 17 ноября 2010 11:54
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
bkkb,
смотрите вёрстку свою, поставьте после
{short-story}

<div class="clr"></div>
.clr {clear:both; height:0;overflow:hidden;}

--------------------

0

#11Kawaii-refresh

  • 17 ноября 2010 15:37
  • Регистрация: 1.10.2010
  • ICQ: --
  • Комментариев: 86
ivantu, Подскажите название шаблона на сайте :О

0

#12svetozar

  • 17 ноября 2010 16:18
  • Регистрация: 1.06.2010
  • ICQ: 78068409
  • Комментариев: 65
  • Выкл.
а как сделать так, чтобы так было всегда? без нажатие кнопки. "сделать красиво"?

0

#13DaImeR

  • 17 ноября 2010 16:18
  • Регистрация: 21.11.2009
  • ICQ: 416980738
  • Комментариев: 338
Хотел поставить, но на демо увидел что уменьшенные картинки при нажатии на них не увеличиваются

--------------------

0

#14nutbox

  • 17 ноября 2010 16:30
  • Регистрация: 17.10.2009
  • ICQ: --
  • Комментариев: 62
у меня и полную новость почему то режет

Kawaii-refresh, какого шаблона? если который на скринах то это дефалтовский

--------------------

0

#15nutbox

  • 17 ноября 2010 17:19
  • Регистрация: 17.10.2009
  • ICQ: --
  • Комментариев: 62
ПафНутиЙ, как исправить чтобы текст в полной новости конкретно отображался?

--------------------

0

#16Kawaii-refresh

  • 17 ноября 2010 17:44
  • Регистрация: 1.10.2010
  • ICQ: --
  • Комментариев: 86
Цитата: nutbox
Kawaii-refresh, какого шаблона? если который на скринах то это дефалтовский

тот что на
Цитата: ivantu
Newlifecinema.ru


0

#17WebSupport

  • 17 ноября 2010 18:45
  • Регистрация: 15.11.2010
  • ICQ: --
  • Комментариев: 225
У меня не корректно отображается.

0

#18ПафНутиЙ

  • 17 ноября 2010 22:37
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
nutbox,
возьмите код в:
[not-aviable=showfull]...[/not-aviable]

это же элементарные вещи, я даже писать в статье об этом не стал.

--------------------

0

#19SlimYalta

  • 18 ноября 2010 00:13
  • Регистрация: 13.03.2010
  • ICQ: --
  • Комментариев: 131
Спасибо...просто отпад!

--------------------

0

#20ivantu

  • 18 ноября 2010 00:15
  • Регистрация: 17.12.2009
  • ICQ: 310573927
  • Комментариев: 73
Kawaii-refresh,
он так и называется.... newlifecinema )))
этот шабл делался под заказ для этого сайта, я его стащил себе на сайт практически 100% копия, не смог сделать только привью при наведение на картинку(зайдя на сайт поймешь о чем я)
адрес моего сайта можешь посматреть в информации обо мне., и понять что это сделать реально как у оригинального шаблона.
Ну вроде понятно обьяснил drink

--------------------

0
1 2
Предыдущая    Следующая
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки