2013-09-16

Красивые карты сайта для blogspot

карта sitemap blogspot
На просторах зарубежного интернета нашла для вас две симпатичные карты сайта для ваших блогов на площадке blogspot. Как установить карту и настроить читайте ниже.
Сообщение отредактировано 17.12.2015 г.
Карта блога №1 для Blogger (Blogspot) вы пока видите вы моем блоге. В ближайшем будущем я ее собираюсь менять. Карта выглядит в виде таблицы ссылок на статьи блога. При выборе статьи, наведении мышки на ссылку меняется цвет ячейки. Если вы знакомы с css, то можете изменить цвета, подогнать оформление карты под дизайн вашего блога. Скриншот:
контекстная реклама

Недостатком карты является некорректное отображение в Internet Explorer.
Блог автора скрипта карты для blogspot; http://www.blogtipsntricks.com/
Как установить?
  1. Создайте новую страницу блога, дайте название,
  2. В режиме HTML новой страницы вставьте код карты:
    ..
    <script src="https://ms-design.googlecode.com/svn/Sitemap.js" type="text/javascript"></script>
    <script src="http://www.mycrib.ru/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    <div style="display: none;">
    </div>
    <style type="text/css">
    .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
    .post-archive h4 {background:#fff;border-bottom:1px solid #fafafa;color:#444;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:#fff;color:#444;display:block;border-bottom:3px solid #f0f0f0; font-size: 14px; line-height: normal; outline:none;padding:10px 15px;transition:all .25s ease-in-out;}
    .ct-columns-3 p a:hover {background:#02a4e5;color:#fff;border-bottom:3px solid #0392cb;}
    .ct-columns-3 p span{color:#fff!important;font-style:normal!important;font-weight:normal!important;}
    @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></div>
  3. Замените адрес сайта в коде, выделенный желтым на url вашего блога.
  4. Опубликуйте страницу.
Карта блога №2 для Blogger (Blogspot)   Вторая карта блога более компактная и удобная, записи скрыты под категориями (точнее, метками, ярлыками блога. Именно так на Blogger мы условно делим наши записи на рубрики). Автор неизвестен. Скриншот:
карта блога

Как вставить в блог?
Также, как и в первом случае, создайте новую страницу блога и вставьте в режиме html код:
<div id="tabbed-toc">
<span class="loading">Loading, please wait for a moment...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.mycrib.ru", // Enter your blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Default thumbnail size
    noThumb: "", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window. `false` to open in same window
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts or
 //define how many recent posts are to be marked by changing the number
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
//the "New!" text
};
</script>
<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script>
<style>
/*Sitemap  */
#tabbed-toc {
 width: 99%;
 margin: 0 auto;
 overflow: hidden !important;
 position: relative;
 color: #222;
 border: 0;
 border-top: 5px solid #FC0204;
 background-color: #1D1D1D;
 -webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
 display:block;
 padding:5px 15px;
 font:normal bold 11px Arial,Sans-Serif;
 color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
 margin:0;
 padding:0;
 list-style:none;
 }
#tabbed-toc .toc-tabs {
 width: 24.8%;
 float: left !important;
}
#tabbed-toc .toc-tabs li a {
 display:block;
 font:normal bold 10px/28px Arial,Sans-Serif;
 height:28px;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#ccc;
 text-transform:uppercase;
 text-decoration:none;
 padding:0 12px;
 cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
 background-color: #515050;
 color: #FFF;
 }
#tabbed-toc .toc-tabs li a.active-tab {
 background-color: #FFFC03;
 color: #222;
 position: relative;
 z-index: 5;
 margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
 width: 75%;
 float: right !important;
 background-color: #F5F5F5;
 border-left: 5px solid #FFFC03;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
 float:none;
 display:block;
 position:absolute;
 top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
 position:relative;
 z-index:5;
 font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
 display: block;
 position: relative;
 font-weight: bold;
 font-size: 11px;
 color: #222;
 line-height: 2.8em;
 height: 30px;
 padding: 0 10px;
 text-decoration: none;
 outline: none;
 overflow: hidden;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
 display:block;
 font-style:italic;
 font-weight:400;
 font-size:10px;
 color:#666;
 float:right;
}
#tabbed-toc .panel li .summary {
 display:block;
 padding:10px 12px;
 font-style:italic;
 border-bottom:4px solid #275827;
 overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
 float:left;
 display:block;
 margin:0 8px 0 0;
 padding:4px;
 width:72px;
 height:72px;
 border:1px solid #dcdcdc;
 background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
 background-color: #DBDBDB;
 font-size: 10px;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
 background-color:#222;
 color:#FFF;
 outline:none;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
 background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
 background-color:#fff;
 border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
 overflow:hidden;
 width:auto;
 float:none !important;
 display:block;
}
#tabbed-toc .toc-tabs li {
 display:inline;
 float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
 background-color:#222;
 color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
 color:#000;
}
#tabbed-toc .toc-content {
 border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
 display:none;
}
}
</style>
Укажите свой blogUrl (адрес блога) вместо ссылки, выделенной желтым.
P.S. Не забудьте, что если карта блога не отображается, значит у вас не присвоено ни одного ярлыка к записям блога. И если вы хотите, чтобы в вашей карте присутствовали все статьи, то проследите за тем, чтобы к каждой записи вашего блога стояла метка.

15 комментариев :

Сергей Дмириев комментирует...

Вторую хочу поставить на свой блог, карта понравилась, но не работает, висит слово Loading... и всё, не подскажете в чём может быть проблема?

Mycrib комментирует...

Сергей, скопируйте код из комментария, и все должно получиться. Я думаю, что скорее всего проблема в кавычках, которые при публикации кода в блог, иногда неправильно проставляются.

Код:

<link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.allbloggertricks.com/" title="Tabbed TOC">All Blogger Tricks</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://centr-gaz.blogspot.ru/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Сергей Дмириев комментирует...

Спасибо большое, всё заработало!

Анонимный комментирует...

сеипатичные карты, но вот на первую антивирус ругается "нод" а так бы себе замутил)

Дмитрий Геннадьевич комментирует...

Честно сказать , перерыл в инете кучу инфы по данному вопросу , есть варианты , но мне ни один не понравился . Пришлось самому все делать для себя ручками .

Алеся Левитская комментирует...

И мы хотим сами сделать, ручками своими, чтобы не было чужих ссылок. Подскажите прямой путь, где можно взять компактную информацию, чтобы с нуля написать этот скрипт и не заимствовать ни у кого?

Элси комментирует...

Хотела поставить второй вариант, сохранила на гугл диск и оттуда копирую, а архива нет. В общем что-то я напутала, да? (гугл диск, потому что после блокировки так мне мастера посоветовали)

Иванова Наталья комментирует...

Элси, да второй карты похоже уже не существует.. На тестовом блоге она не работает. Я не сохранила заблаговременно на свой сервис((

Igor Sannicov комментирует...

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

Иванова Наталья комментирует...

Igor, для того, чтобы проставить ярлыки, нужно отредактировать все записи на блоге. Сообщение -> изменить. Справа от текстового блока будет графа "Ярлыки". Нажмите на нее и заполните ключевыми словами через запятую, например, blogspot, виджеты и т.п. Эти слова должны характеризовать вашу статью.
Попробуйте. И да, вторая карта из этой записи уже не работает (

Иванова Наталья комментирует...

Igor Sannicov, попробовала вторую карту - тоже, к сожалению, не работает(( Придется править запись.

Код карты блога, такой как у меня:

<link href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://blogtoc-cometa.googlecode.com/files/blogtoc_wa.js">
</script>
<script src="http://www.mycrib.ru/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>


Вместо адреса моего блога поставьте свой.

Алексей Лещенко комментирует...

Я добавил карту своего блога http://le2x.blogspot.com/sitemap.xml в Яндекс, буду ждать результата. Платформа blogger автоматически генерирует карту сайта. Скажите а в файле robot.txt обязательно прописывать sitemap.xml ?

Иванова Наталья комментирует...

Алексей, в robots.txt можно добавить sitemap и в xml

Ирина Дмитриенко комментирует...

У меня на странице в режиме HTML стоит код. Нужно ли его удалять перед тем, как вставлять новый код?

Иванова Наталья комментирует...

Ирина, вы можете его удалить, а можете вставить свой код перед закрывающимся тегом div:

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />Здесь ваш код</div>


Предупреждаю, что в данной статье коды карт уже не работают. Исправить статью пока некогда.

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности