Простий спосіб додавання безкоштовного контенту новин на свій сайт – Частина 2
Рекомендуємо вам ознайомитися з першою частиною, тому що в ній розповідається про RSS і висвітлюються процес інтеграції звичайного модуля стрічки новин за допомогою АПІ Google Feed.
Метою даного посібника є розповісти вам про те, як додати більший за обсягами модуль новин, горизонтальну стрічку новин, а також стрічку у форматі списку.
Модуль вертикальної стрічки новин
Щоб налаштувати стрічку, скопіюйте код, наведений нижче, до головної секції будь-якої веб-сторінки. Весь масив рядків повинен бути розташований після тегів title і meta, перед закриваючим тегом head:
Там у тілі документа, де б ви хотіли відобразити стрічку новин, розмістіть наступний рядок коду:
Як і у випадку з невеликою стрічкою новин, про яку ми говорили в попередньому пості, тут присутні опції оформлення. Наприклад, вираз margin-left у розділі feedControl виставлено на auto, і це центрує модуль у відповідній області.
Якщо ви захочете змістити його вліво, все, що вам знадобиться, це змінити вказаний параметр на 0px.
Три джерела, які входять до списку, це: CNN, The New York Times та Reuters. Якщо ви захочете змінити будь-який з них, або використовувати код API Feed таким чином, щоб воно охоплювало всі теми новин, просто замініть існуючі URL на бажані.
Наприклад, щоб «змусити» джерело The Times транслювати лише тему Релігії, вам потрібно зробити таке заміщення:
Число відображених посилань також може бути змінено. Для того, щоб змінити стандартну кількість новин (6) для кожного джерела на 4, вам просто потрібно буде змінити наступний рядок:
Коли сторінку буде завантажено, модуль буде схожий на цей:
Модуль горизонтальної стрічки новин
Якщо у вас є простір у тілі якої-небудь сторінки, то ви, ймовірно, захочете заощадити там якнайбільше місця, і при цьому інтегрувати горизонтальну стрічку новин. Приклад такої стрічки можна спостерігати на всіх великих веб-сайтах новин, включаючи навіть BBC.co.uk.
Для цього нам потрібно буде змінити наступні рядки коду у головній секції (у коді, який був наведений вище):
Коли сторінку буде завантажено на сервер після зазначених змін, ви зможете спостерігати горизонтальний модуль на кшталт цього:
Новинна стрічка у вигляді списку
Як приклад для більш вільного стилю стрічки новин давайте поглянемо на модуль новин у вигляді списку. Він не обмежений жодними рамками, і текстове наповнення адаптується до будь-якої веб-сторінки, і переймає вже вказаний шрифт.
Для того щоб почати, розташуйте наступний код в головну секцію, під тегами title і meta, перед закриваючим тегом head:
Далі, до розділу веб-сторінки, де вам необхідно відображати блок новин, додайте наступний код:
Отриманий модуль новин після завантаження сторінки на сервер повинен виглядати наступним чином:
Ви можете оформити його різними елементами у наступних рядках коду:
Кожен із трьох охоплених тут типів новинних модулів дозволить вам представити контент новин своїм читачам у свіжій і привабливій манері. Застосовуючи вищеописані методи, ви зможете легко інтегрувати новинні блоки в будь-які сторінки, і налаштовувати їх на відображення будь-якої тематики новин.