1) Создаем карту сайта для Blogger: http://samasajt.blogspot.ru/2012/07/blogger.html.
При создании использовался скрипт scriptabufarhan.googlecode.com. Летом 2013 работать перестал. Тогда я написала статью
2) Содержание блога - меняем код на работающий: http://samasajt.blogspot.ru/2013/01/blog-post.html.
Скрипт был также разработан Абу Фарханом. Использовался с его сайта в обход сервиса googlecode.com, так как там проводилась реорганизация.
3) Оглавление блога с графикой:http://samasajt.blogspot.ru/2013/01/blog-post_12.html
Интересный вариант карты сайты с превьюшками статей, найденный в Интернете. Минус - нет разбивки по рубрикам. Поэтому используем скрипт для странички Все гаджеты для Blogger:http://samasajt.blogspot.ru/p/blog-page_7752.html. (Инструкция - как сделать страницу с Перечнем всех записей по одному ярлыку:http://samasajt.blogspot.ru/2013/01/blog-post_1468.html).
4) Затем вариант карты сайта без скрипта:http://samasajt.blogspot.ru/2013/02/blog-post.html.
Но здесь нет разбивки по ярлыкам/рубрикам.
Новая карта сайтаотсюда здесь:http://www.mycrib.ru/2013/09/karta-site-blogspot.html.
Первоначально карта выглядела в серых тонах:
Прямоугольные блоки со ссылками на статьи располагаются в три столбца. Есть разделения по рубрикам=ярлыкам. При наведении курсора мыши на название статьи, меняется фон прямоугольника на темно-серый.
Мне такие цвета показались скучноваты и получилось вот что:
Итак, как добавить такой вариант содержания блога.
1. Создаем пустую новую страницы с названием "Карта сайта" и в режиме редактирования страницы HTML вставляем код
1) Код карты сайта в серых тонах:
<script src="[url]https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js"[/url] type='text/javascript'></script>
<script src="http://samasajt.blogspot.ru/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>
2) Код карты сайта с моими настройками:
<script src="[url]https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js"[/url] type="text/javascript"></script>
<script src="[url]http://samasajt.blogspot.ru[/url]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #9966CC; color: #9933CC; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #CC99FF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #9933CC; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style>
В обоих случаях нужно адрес блога заменить на свой.
Вы также можете подстроить карту под цветовую гамму своего блога.
В строке .post-archive h4 { border-bottom: 2px solid #9966CC; color: #9933CC; изменили 2 цвета:
#EEEEEE на #9966CC - цвет полосы разделителя между названием рубрики и блоками со ссылками;
#333333 на #9933CC- цвет названия рубрики.
В строке .ct-columns-3 p a { background:# FAFAFA ; color: #333 (цвет ссылки на статью); display: block; border: 1px solid #CC99FF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEE ;
заменила только #FFFFFF (белый цвет) - на цвет #CC99FF (светлый сиреневый). Это цвет рамки блока со ссылками до наведения курсора.
В строке .ct-columns-3 p a:hover { background: #9933CC; color:#FFF ;
меняем фон блоков со ссылками, который изменяется при наведении курсора мыши с темно-серого #555 на #9933CC (яркий сиреневый).
! Настройки, к сожалению, видны только
после публикации страницы с картой. Поэтому лучше тренироваться на
другом блоге, где есть хотя бы несколько статей с ярлыками.
2. После того, как все настройки Вас устраивают, опубликуйте страницу.
P.S. Вы можете оставить свои отзывы о новой карте сайта ниже в комментариях.
источник:http://samasajt.blogspot.ru/2014/01/novaja-karta-sajta-na-blogger.html
0 коммент.:
Отправить комментарий