Карта блога с картинками для Blogger

Приветствую вас дорогой читатель! Сегодня хочу предложить для пользователей платформы Blogger карту сайта/блога с картинками/миниатюрами. Многие мои читатели в комментариях спрашивали карту сайта именно с миниатюрами. Я пробовал раньше найти её в буржунете, но всё было напрасно, простые карты есть, а вот с картинками рабочей карты блога, нет.

Вспомнил я про Sitemap with Thumbnail blogger благодаря нашей участнице сообщества "Я Блоггер" в социальной сети Google Plus Ольге Протасовой. Она опубликовала запись с нужной картой и вот я решил возобновить свои поиски. Искал по картинкам (лучший вариант, советую) и вот на вьетнамском ресурсе namkna.blogspot.ru улыбнулась удача. Нашёл, что так долго искал - карта блога для Blogger  с картинками в два ряда. Вот она:

Карта блога для Blogger с картинками

Единственный недостаток этой красивой карты - статьи не разбиты по рубрикам, что конечно не очень удобно читателям. С помощью такой карты можно просмотреть все опубликованные статьи на блоге перелистывая страницы. И так, перейдём к установке.

Как установить карту блога для Blogger с картинками

Создайте новую страницу в блоге, дайте ей название и в режиме HTML вставьте такой код:

<style scoped="" type="text/css">#toc-outer {color:black;font:normal 11px/14px Arial,Sans-Serif;height:auto;margin:0 auto;overflow:hidden;padding:0;text-align:left;}#loadingscript {padding:0px 0px;height:37px;text-indent:-9999px;color:transparent;background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;}.itemposts {float: left;height: auto;overflow: hidden;width: 47%;box-shadow: 1px 1px 5px #C3C3C3;background: none repeat scroll 0% 0% #F9F9F9;border: 1px solid #FFF;margin: 3px 5px 8px;padding: 0px 3px;}.itemposts h6 {border-bottom: 1px solid #CCC;color: #333;font: bold 12px Arial;height: 15px;overflow: hidden;text-transform: none;margin: 0px 0px 5px;padding: 2px 6px !important;}.itemposts h6 a{color: red;}.itemposts h6 a:hover {color:#38f;text-decoration:none;}.itemposts img {background-color:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:left;height:65px;margin:0 7px 5px 0;padding:3px;width:65px;z-indent:99999px;}.itemposts .iteminside {}.itemposts .itemfoot {border-top: 1px solid #CCC;clear: both;overflow: hidden;padding: 4px 5px;}.itemposts .itemfoot a.itemrmore {color:#333;float:right;font-weight:bold;text-decoration:none;}.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}#itempager {clear:both;padding:10px 0;}#pagination,#totalposts {color:#000;display:block;font:bold 10px Verdana,Arial,Sans-Serif;margin-bottom:10px;text-align:center;padding:0;}#pagination span, #pagination a {color: #FFF;display: inline;margin: 0px 1px;padding: 2px 5px;text-indent: 0px;background-color: #068BC9;background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);border: 1px solid #3161C2;text-decoration: none;border-radius: 10px;}#pagination a:hover {background-color:#333}#pagination span.actual {background-color:black}#pagination span.hidden {display:none}</style><script>var showPostDate = true,showComments = true,idMode = true,sortByLabel = false,labelSorter = "Blogspot-tips",loadingText = "Loading...",totalPostLabel = "Всего сообщений:",jumpPageLabel = "Страница",commentsLabel = "comment",rmoreText = "Подробнее►",prevText = "Назад",nextText = "Вперёд",siteUrl = "######",postPerPage = 10,numChars = 150,imgBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";</script><script src="http://yourjavascript.com/2812562314/kjmagic-2col-sitemap.js"></script>

В место звёздочек вставьте свой адрес блога, скрипт (http://yourjavascript.com/2812562314/kjmagic-2col-sitemap.js) лучше всего закиньте на свой хостинг и поменяйте ссылку на свою. Вот вроде и всё, во стальном разберётесь - цвета, ширина, количество выводимых статей на странице и так далее. Если что спрашивайте в комментариях. Можете посмотреть видео по установке данной карты.

источник

Все статьи Blogger - карта для блога

Вид содержание блога на статической странице:

Все статьи блога Blogger

Естественно, друзья, вы можете настроить стиль карты сайта под свой дизайн блога. Стили Css карты объедены со скриптом в один код и поэтому вам не надо будет лезть в сам шаблон блога, весь код устанавливается сразу на страницу в режиме HTML. Код для вставки на отдельную страницу такой:

<div id="tabbed-toc"><span class="loading">Загрузка, подождите минуту...</span></div><script type="text/javascript">var tabbedTOC = {    blogUrl: "#########", // 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>

 Здесь, в коде замените решётки #### на адрес (URL) вашего блога, а вид/стиль карты настраивается между строк </script> и </style>. Вот пожалуй и всё. Надеюсь, у такой карты блога найдутся её почитатели. Удачи всем любителям платформы Blogger и до новых встреч.

источник

Карта блога: как сделать

Хочу поделиться полезной штукой, которую мне удалось раскопать на днях в Интернете. Речь об установке очень полезной для каждого блога опции "Карта". Это отдельная страничка, на которой приводится перечень всех опубликованных постов как оглавление в книге. Оказывается, многие владельцы блога давно о ней знают и пользуются. Предлагаю присоединиться к ним)))).