Искала код карты сайта на платформе blogspot, так как все мои карты оказались, к сожалению, неработающими. Нашла очень симпатичную карту. Немного её доработала в плане изменения цветов, размера шрифтов и хочу поделиться с Вами этим кодом. Как она долго будет действовать - это скорее всего вопрос к её автору на сайте .
Найдите в коде слова, выделенные красным шрифтом. Это url адрес моего блога, Замените его на свой адрес. Ознакомьтесь какой нежный симпатичный вид имеет предложенная мною карта . Если Вас не устраивает подобранные мною цвета, поэкспериментируйте с оттенками и замените их соответственно дизайну Вашего блога (выделены для Вашего удобства). Откройте новую страницу на Вашем блоге, дайте ей название, к примеру: "Карта блога", "Рубрики", "Меню", "Путеводитель по блогу" и т.п. Сохраните, нажмите просмотр и, если всё в порядке, - опубликуйте. Зайдите в "Дизайн" своего блога, "Страницы" и отрегулируйте очерёдность размещения страниц на панели блога. Всё, Вы прекрасно справились с задачей. И, надеюсь, карта увеличит посещаемость Вашего блога. Автору карты большое спасибо за предоставленный код. Кстати, там ещё есть одна карта - можете посетить и убедиться сами.
Если Вам была полезна эта информация - самой лучшей благодарностью будет распространение сообщения в инете. Всех Вам благ и почаще заходите на мой блог!
Если Вам была полезна эта информация - самой лучшей благодарностью будет распространение сообщения в инете. Всех Вам благ и почаще заходите на мой блог!
А вот сам код
<div id="tabbed-toc">
<span class="loading">Loading, please wait for a moment...</span></div>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://sv-much-tatiany.blogspot.com", // 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: #CD2626;'>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: #FFFFFF;
border: 0;
border-top: 5px solid #698B22;
background-color: #1C1C1C
-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 12px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color: #6C7B8B;
text-transform:uppercase;
text-decoration:none;
padding:0 16px;
cursor:pointer;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #696969;
color: #FFF;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #B9D3EE;
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 #B9D3EE;
-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:12px 14px;
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: 12px;
}
#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>