Создаем на блоге галерею своих сайтов

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

В предыдущем посте "Как повысить стоимость ссылок Sape" я писала о том, как оформить ссылки Sape в виде галереи, для того, чтобы продавать их дороже.
Здесь я расскажу, как сделать похожую галерею из ваших собственных сайтов. Вот пример такой галереи:
Как украсить сайт  -  создаем  галерею своих сайтов
Нужно создать файл gallery.php и поместить его в папку темы.
Подключить его в файле index.php следующим образом:

<?php include (TEMPLATEPATH. '/gallery.php'); ?>

↓ И поместить в него код:

Открыть ↓
Для разблокировки содержимого, введите код из последнего, присланного вам письма.

В этом коде замените ваш_сайт.ru на адреса нужных вам сайтов. Здесь предусмотрен вывод 4х сайтов, но вы можете уменьшить или увеличить их количество.
Сервис http://images.websnapr.com (ссылки на него стоят в коде) создаст скриншоты сайтов и они будут выведены на вашем блоге. А чтобы картинки отображались в виде галереи, в файле style.css нужно прописать стиль для нее:

.sait_gallery {
  clear: both;
  float: left;
  width : auto;
  height : auto;
  text-align: left;
  margin: 0 0 20px 2px;
  padding: 0;
}
.sait {
  width: 120px;
  background: #F2F2F7;
  margin-right: 3px;
  padding: 0;
  border: 2px solid #ccc;
  float: left;
  text-align: center;
}
.sait img {
  margin: 6px 6px 4px 6px;
  padding: 1px;
  border: 1px solid #A8A8C7;
  text-align: center;
}
.sait a:hover img {
  border: 1px solid #7979A9;
  padding: 1px;
}
div.desc {
  text-align: center;
  font-weight: normal;
  margin: 0;
  padding: 5px;
  font-size: 11px;
}
div.desc a {
  text-decoration: none;
}

Возможно, вам придется кое-что изменить, чтобы галерея вписалась в дизайн вашего блога.
P.S. Этот способ создания галереи можно использовать, если нужно, чтобы скриншоты сайтов выполнялись в реальном времени.
Пользуйтесь на здоровье!

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(1 голос, в среднем: 5 из 5)

Комментарии

  1. Интересная фишка с "тхумбсами"... возьму на заметку 😉
    Спасибо за урок 🙂

  2. 1. Предыдущего поста нет, очень досадно... Когда не искал - видел, как для сапы картинки сделать, а сейчас ищу - не могу найти.
    2. Картинки не кликабельны, кликабельны - когда они увеличиваются.
    3. Сделано простенько и несколько коряво... Есть блогроллы всякие, если их как-то использовать со спецэффектами, тосмотрелось бы зрелищно, а так просто картинка... Ее можно отдельно вставить и не писать стлько кода 😉
    Был бы очень признателен, если бы со мной связались по указанному агенту, он же мыло, аська, скайп. или здесь в комментариях - очень хочу на сапу картинки поставить 😀

  3. Игорь, отвечаю на ваши вопросы:
    1. Ссылку на предыдущий пост исправила так, что можете перейти на него.
    2. Вы неправильно понимаете кликабельность - это не только, когда картинки увеличиваются, это любая реакция картинки на клик, в том числе и та, когда картинка служит ссылкой, по которой можно перейти на сайт.
    3. Цитирую: "Есть блогроллы всякие, если их как-то использовать со спецэффектами, то смотрелось бы зрелищно".
    Отвечаю:
    Можно также использовать еще и скрипты всякие и еще массу всего, но если нужно, чтобы скриншот сайта выполнялся в реальном времени, то этот способ как раз подойдет.

  4. Хорошая статья! Как раз думал о том, чтобы переделать портфолио.
    Попробую использовать вашу статью для этого. Спасибо!

  5. Огромное спасибо за статью!
    Ксана, подскажите пожалуйста как сделать чтобы изображения публиковались горизонтально, а не вертикально?

  6. Извиняюсь за беспокойство с горизонтальным выравниваем вопрос решила. Просто в стилях прописала:
    .sait {
    display: inline-block;
    }

  7. Ксана, здравствуйте! Пишу немного ни в тему... Я бы хотела украсить свой сайт каким-нибудь аудио плеером. Но, к своему стыду, признаюсь ничего не понимаю в плагинах. Если будет время расскажите подробнее, пожалуйста... Как установить, как загружать музыку с пк и т.д. Буду вам очень признательна.

  8. пожалуста помгите мне украсить сайт то он у меня открыт и реклама

    • Какая помощь вам нужна?

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

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 200
Отзывов 4474