Карта для сайта - блога с миниатюрами.

Новая пользовательская карта сайта - блога с миниатюрами для blogger - blogspot.

Виджет карта с миниатюрами не работает!!! Если кровь из носу нужна карта, можете воспользоватся похожим виджетом карта сайта.

Доброго времени суток друзья. Сегодня нам есть чем вас порадовать. В нашей базе уже храниться одна статья о том, как добавить пользовательскую карту сайта на свой блог. И не путайте ее с картой для поисковых систем. Сегодняшняя карта сайта все от того же разработчика, но имеет побольше функций, да и смотрится в разы лучше. В общем при переходе на страницу с картой отображаются все посты вашего блога в порядке их добавления. Данный виджет позволяет просматривать и миниатюры к постам. Идем дальше, у пользователей есть следующие возможности при ее просмотре:

1) Сортировать выдаваемые посты (сообщения) по новым и обновленным. Обновленные - это ваши опубликованные посты в которых вы, что-то дописывали или убирали от того и обновленные.

2) Читатель вашего блога или сайта может выбрать определенную категорию постов.

3) Поиск поста вручную, введя в строку поиска его название.

4) Изначально карта выдает шесть постов, чтобы увидеть остальные нужно кликнуть по кнопке Load more. Когда посты заканчиваются вместо кнопки Load more появляется кнопка Top при нажатии которой осуществляется скроллинг страницы вверх.

Во такая замечательная пользовательская карта сайта. Все эти функции вы можете прощупать на нашем тестовом блоге.

Для установки вам нужно перейти в раздел Шаблон - Изменить HTML найти код ]]></b:skin> и перед ним вставить следующий код:

/* CSS Sitemap */
#table-outer table{width:100%;margin:0;padding:0}
#table-outer input,#table-outer select{padding:4px;font:inherit;border:2px solid #ecf0f1;width:170px;box-sizing:border-box}
#table-outer select{cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#resultDesc{margin-bottom:10px}
#feedContainer{overflow:hidden;margin-top:20px}
#feedContainer strong{font-size:10px}
#feedContainer,#feedContainer li{padding:0;margin:0;list-style:none}
#feedContainer li{float:left;width:50%;margin-bottom:10px;position:relative;z-index:0}
#feedContainer .inner{padding:8px;margin:0 5px;position:relative;background-color:#fff;border:1px solid #f9f9f9;height:133px}
#feedContainer img{float:left;margin:0 8px 0 0;max-width:100%;border:1px solid #f9f9f9;padding:2px}
#feedContainer .toc-title{max-height:33px;overflow:hidden}
#feedContainer .toc-title:hover{text-decoration:underline}
#feedContainer .news-text{font-size:11px}
#feedNav a,#feedNav span{display:block;text-align:center;color:#fff;text-decoration:none;background-color:#444;padding:5px;width:95%;margin:0 auto;transition:all 0.3s linear}
#feedNav a,#feedNav span:hover{background-color:#333;transition:all 0.3s linear}
#feedContainer .date{display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px}
#feedContainer .date .dd{font-size:9px;line-height:5px;font-weight:bold}
#feedContainer .date span{display:inline-block;line-height:5px;text-align:center;margin-left:5px}

Сохраняем шаблон и переходим в раздел Страницы. Здесь создаем страницу, переходим с вкладки Создать на вкладку HTML и добавляем следующий код:

<div id="table-outer">
<table><tbody>
<tr><td><label>Сортировать посты по : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Выбрать категорию : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Поиск вручную : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://arlina-design.googlecode.com/svn/tocs.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>

Публикуем страницу и радуемся новой пользовательской карте сайта.


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Карта для сайта - блога с миниатюрами.
4/ 5
Oleh