Главная | RSS | О Кольце | О вставке кода | Контакты

Как добавить блок ККР в код страниц участников.


Основные сведения.

Наглядное оформление блока.

CSS В код заголовка HEAD страницы добавить импорт стилизационного файла в формате CSS:

<link rel='stylesheet' type='text/css' href='http://com-ring.ru/styles/redroadway.css' />
Это обязательно, т.к. без этой вставки блок будет выглядеть убого - без оформления, как картинки и текст внавалку.
Подробнее о разных вариантах оформления см. ниже на этой странице.

Код автоматической вставки блока.

HTML. В том месте страницы, где предполагается вставить блок ККР, добавить импорт кода на языке JavaScript:

<script id='comringinsert' type='text/javascript' src='http://com-ring.ru/comring.js?v=v&c=4' charset='UTF-8'></script>
ИЛИ, если нужно, чтобы блок центрировался в том месте, куда он будет вставляться:
<div style='text-align:center'><script id='comringinsert' type='text/javascript' src='http://com-ring.ru/comring.js?v=v&c=4' charset='UTF-8'></script></div>


2-й способ вставки блока ККР.

Если по каким-то причинам на вашем сайте в некоторых интернет-обозревателях не срабатывает первый способ, то возможно попробовать второй - с помощью фрейма - с ипользованием тега iframe. Он отличается тем, что запрашивает на данном сайте не только скрипт, но и специальную страницу и вставляет её во врезку - "фрейм" (англ. "frame" - рамка, кадр). И уже та специальная страница вызывает скрипт - по тому же принципу, как и в первом варианте.

<iframe width='250' height='500' src='http://com-ring.ru/for_iframe.php?s=redroadway&v=v&c=4&w=250&h=500&t=1' frameborder='0' scrolling='no'></iframe>

Здесь добавлены параметры:

Заметьте, что код вставки стиля в блоке HEAD в данном случае не требуется. Стиль ус­та­нав­ли­ва­ет­ся в параметре вызова страницы.

Если блок шире, чем это приемлемо, то попробуйте такой вариант:

<iframe width='100%' height='360' src='http://com-ring.ru/for_iframe.php?s=aircompressed&v=v&c=5&h=300&t=1&l=0' frameborder='0' scrolling='no'></iframe>

Здесь фрейму задаётся ширина в 100 процентов от доступной. Если фрейм ККР будет вставлен в узкий блок DIV, то ширина фрейма будет равной ширине этого DIV.

Па­ра­метр l=0 ука­зы­ва­ет на то, что не нуж­но встав­лять тег пе­ре­но­са стро­ки BR.


3-й спо­соб встав­ки бло­ка ККР - для кап­риз­ных хос­тин­гов.

На не­ко­то­рых хос­тин­гах в Се­ти не раз­ре­ша­ет­ся встав­лять свой Ja­va­script или свои врез­ки с по­мо­щью те­га iframe, но раз­ре­ша­ет­ся встав­лять ссы­лки с изо­бра­же­ни­ями. Уп­ро­щён­ный код ра­бо­та­ет так:

Этот код не пред­по­ла­га­ет­ся ни­как нас­траи­вать. Стиль пред­по­ла­га­ет­ся ней­траль­ный: бе­лый фон, чёр­ные бук­вы опи­са­ний ря­дом с изо­бра­же­ния­ми. Код встав­ки бло­ка:

Если хостинг разрешает CSS, то вставьте этот блок:

<style>
#kkrinsertimgs{
padding:0.5em;
width:95%;
background-color:white;
}
#kkrinsertimgs a[href*="com-ring.ru"]{
color: #B92F21;
font-size: 14px;
font-weight: bold;
width: 90%;
border-bottom:#B92F21 3px solid;
text-decoration:none;
padding:0px;
margin:0px;
}
#kkrinsertimgs a img{
width:100%;
border:none;
}
#kkrinsertimgs a[href*="imgver1"] {
margin:0.7em 0px 0px 0px;
display:inline-block;
}
</style>

<div id='kkrinsertimgs'>
<a href='http://com-ring.ru/?p=about' id='akkri' target='_blank'>Кольцо красных ресурсов</a><br/>
<a href='http://com-ring.ru/imgver1.php?l=1' target='_blank'><img src='http://com-ring.ru/px/kkri/1.jpg'/></a><br/>
<a href='http://com-ring.ru/imgver1.php?l=2' target='_blank'><img src='http://com-ring.ru/px/kkri/2.jpg'/></a><br/>
<a href='http://com-ring.ru/imgver1.php?l=3' target='_blank'><img src='http://com-ring.ru/px/kkri/3.jpg'/></a><br/>
<a href='http://com-ring.ru/imgver1.php?l=4' target='_blank'><img src='http://com-ring.ru/px/kkri/4.jpg'/></a><br/>
<a href='http://com-ring.ru/imgver1.php?l=5' target='_blank'><img src='http://com-ring.ru/px/kkri/5.jpg'/></a>
</div>

Если хостинг не разрешает даже CSS, то вставьте этот код:

<div id='kkrinsertimgs'>
<a href='http://com-ring.ru/?p=about' target='_blank'>Кольцо красных ресурсов</a><br/>
<a href='http://com-ring.ru/imgver1.php?l=1' target='_blank'><img src='http://com-ring.ru/px/kkri/1.jpg' width='100%'/></a><br/>
<a href='http://com-ring.ru/imgver1.php?l=2' target='_blank'><img src='http://com-ring.ru/px/kkri/2.jpg' width='100%'/></a><br/>
<a href='http://com-ring.ru/imgver1.php?l=3' target='_blank'><img src='http://com-ring.ru/px/kkri/3.jpg' width='100%'/></a><br/>
<a href='http://com-ring.ru/imgver1.php?l=4' target='_blank'><img src='http://com-ring.ru/px/kkri/4.jpg' width='100%'/></a><br/>
<a href='http://com-ring.ru/imgver1.php?l=5' target='_blank'><img src='http://com-ring.ru/px/kkri/5.jpg' width='100%'/></a>
</div>

Здесь, в HTML-блоке, видны 5 почти одинаковых строк, содержащих ссылки с картинками и отличающихся числами. Если нужно задать не 5, а меньше, то достаточно удалить часть этих строк, начиная с нижней: 5, 4.. и т.д. Если останется только одна - с номером 1, то блок будет показывать только свежайшую новость из всех добавленных в ККР.


Дополнительные настройки.

Горизонтальный и вертикальный варианты.

Какой будет вставляться блок - горизонтальный или вертикальный - зависит только от значения переменной в адресе скрипта.
В том месте, где "...v=...":
если "=h" - горизонтальный, а если "=v", то будет вертикальный.

Количество новостей в блоке.

Этот параметр тоже возможно менять, и тоже в адресе скрипта.
В горизонтальном варианте можно ставить в месте "..c=..." - после знака "равно" значение от 2 до 5, а в вертикальном - от 1 до 5.

Предопределённое графическое оформление.

Для того, чтобы облегчить товарищам задачу подстройки вставляемого блока под дизайн страниц, решено разработать несколько предопределённых вариантов оформления. Здесь будем добавлять ссылки на новые варианты.

Доступные на данный момент варианты перечислены на отдельной странице по ссылке.

Товарищи! Если вам требуется отдельное специфическое оформление блоков - разработаем новые разные варианты на выбор, присылайте свои запросы на почту, предварительно оформив их как можно подробнее. Поточнее формулируйте ваши пожелания. Можете даже нарисовать свой эскиз в графическом редакторе. Не гарантируем, что будет сразу в точности так, но попробовать никогда не мешает.

Изменить возможно:

Подробнее о возможностях CSS расписано на сайте w3c.org в разделе CSS.

Если кто-то из вас самостоятельно разработает стили, которые смогут пригодиться другим, присылайте ваши CSS с картинками в ZIP-архиве (обратите внимание - ZIP) и только с латинскими и числовыми символами в названиях файлов.

Установка особой ширины блока.

В стилях, где в описании указано, что ширина - «свободная» - имеется в виду, что ширина блока точно не указана и по-умолчанию будет равна 100% доступного по ширине места. Для того, чтобы задать точное значение, нужно поместить вставляемый скрипт в специальный блок, где задать нужную ширину:

<div style='width:300px;text-align:center'>     (<script ...)     </div>

В данном примере обрамляющему тегу задана ширина 300 пикселей. Используются стандартные правила CSS.

Произвольное графическое оформление.

Любой наш товарищ, знакомый с форматом CSS, способен самостоятельно разработать уникальное оформление для блока ККР.

Структура проста: объединяющий блок (DIV#kkrblh.kkrblh), ссылка (A.akkr) на сайт Кольца в его начале и от 1 до 5 ссылок (A) с картинкой (IMG) и текстом (BR+textnode) внутри, размещённые каждая в своём блоке (DIV.kkrel).

Соответственно, чтобы настроить собственное оформление, нужно будет вставить в HEAD ссылку на CSS-файл на своём (или даже на любом другом) сайте, где должны упоминаться соответствующие селекторы из HTML-структуры.

Открытие ссылок в новой вкладке.

Чтобы ссылки в блоке открывались при нажатии в новой вкладке интернет-обозревателя, нужно добавить в адрес скрипта дополнительный ключ - "..&t=1..":

<script id='comringinsert' type='text/javascript' src='http://com-ring.ru/comring.js?v=v&c=4&t=1' charset='UTF-8'></script>


Замечания и предложения присылайте на почтовый адрес: press@comstol.info