В предыдущем посте Как повысить стоимость ссылок Sape я писала о том, как оформить ссылки Sape в виде галереи, для того, чтобы продавать их дороже.
Здесь я расскажу, как сделать похожую галерею из ваших собственных сайтов. Пример такой галереи вы можете увидеть внизу этой страницы.
Нужно создать файл gallery.php и поместить его в папку темы.
Подключить его в файле index.php следующим образом:
<?php include (TEMPLATEPATH. '/gallery.php'); ?>
и поместить в него код:
<div class="sait_gallery">
<div class="sait">
<a target="_blank" href="http://ваш_сайт.ru">
<img src="http://images.websnapr.com/?url=ваш_сайт.ru" width="110" height="90" title="Картинка кликабельна" alt=""/>
</a>
<div class="desc">
<a target="_blank" href="http://ваш_сайт.ru">Описание сайта</a>
</div><!-- End desc-->
</div><!-- End sait-->
<div class="sait">
<a target="_blank" href="http://ваш_сайт.ru">
<img src="http://images.websnapr.com/?url=ваш_сайт.ru" width="110" height="90" title="Картинка кликабельна" alt=""/>
</a>
<div class="desc">
<a target="_blank" href="http://ваш_сайт.ru">Описание сайта</a>
</div><!-- End desc-->
</div><!-- End sait-->
<div class="sait">
<a target="_blank" href="http://ваш_сайт.ru">
<img src="http://images.websnapr.com/?url=ваш_сайт.ru" width="110" height="90" title="Картинка кликабельна" alt=""/>
</a>
<div class="desc">
<a target="_blank" href="http://ваш_сайт.ru">Описание сайта</a>
</div><!-- End desc-->
</div><!-- End sait-->
<div class="sait">
<a target="_blank" href="http://ваш_сайт.ru">
<img src="http://images.websnapr.com/?url=ваш_сайт.ru" width="110" height="90" title="Картинка кликабельна" alt=""/>
</a>
<div class="desc">
<a target="_blank" href="http://ваш_сайт.ru">Описание сайта</a>
</div><!-- End desc-->
</div><!-- End sait-->
</div><!-- End sait_gallery-->В этом коде замените ваш_сайт.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. Предыдущего поста нет, очень досадно... Когда не искал - видел, как для сапы картинки сделать, а сейчас ищу - не могу найти.
2. Картинки не кликабельны, кликабельны - когда они увеличиваются.
3. Сделано простенько и несколько коряво... Есть блогроллы всякие, если их как-то использовать со спецэффектами, тосмотрелось бы зрелищно, а так просто картинка... Ее можно отдельно вставить и не писать стлько кода
Был бы очень признателен, если бы со мной связались по указанному агенту, он же мыло, аська, скайп. или здесь в комментариях - очень хочу на сапу картинки поставить
Игорь, отвечаю на ваши вопросы:
1. Ссылку на предыдущий пост исправила так, что можете перейти на него.
2. Вы неправильно понимаете кликабельность - это не только, когда картинки увеличиваются, это любая реакция картинки на клик, в том числе и та, когда картинка служит ссылкой, по которой можно перейти на сайт.
3. Цитирую: "Есть блогроллы всякие, если их как-то использовать со спецэффектами, то смотрелось бы зрелищно".
Отвечаю:
Можно также использовать еще и скрипты всякие и еще массу всего, но если нужно, чтобы скриншот сайта выполнялся в реальном времени, то этот способ как раз подойдет.
Хорошая статья! Как раз думал о том, чтобы переделать портфолио.
Попробую использовать вашу статью для этого. Спасибо!
Огромное спасибо за статью!
Ксана, подскажите пожалуйста как сделать чтобы изображения публиковались горизонтально, а не вертикально?
Извиняюсь за беспокойство с горизонтальным выравниваем вопрос решила. Просто в стилях прописала:
.sait {
display: inline-block;
}
Ксана, здравствуйте! Пишу немного ни в тему... Я бы хотела украсить свой сайт каким-нибудь аудио плеером. Но, к своему стыду, признаюсь ничего не понимаю в плагинах. Если будет время расскажите подробнее, пожалуйста... Как установить, как загружать музыку с пк и т.д. Буду вам очень признательна.