Похожие статьи для Blogger

По запросам «похожие статьи blogger«, «похожие посты blogger«, «похожие сообщения blogger» Яндекс не особо порадовал выдачей. Есть кое-какие скрипты, которыми пользуется большинство, но меня они не особо устроили. Потому, порыв блогосферу, наткнулся на замечательного товарища — Doctor VU, который у себя в жж выложил модифицированный скрипт «Ссылки на похожие сообщения для Blogger«. Его и установил. Схожесть ссылки определяется только её принадлежностью к метке.

Плюсы скрипта:
1. Отсутствие ссылок на сторонние ресурсы;
2. Возможность исключать из выдачи метки, не имеющие ни одной ссылки;
3. Возможность переименовывать метки в выдаче и объединять разные метки под одним названием;
4. Возможность отдельно указать, какие метки следует всегда исключать из выдачи;
5. Возможность встроить название метки в заголовок;
6. Возможность указать заголовок, который отображается, когда нет ни единой релевантной ссылки;
7. Простота настройки.

Установка скрипта «Похожие статьи»:
1. Заходим в панель управления блогом и переходим на вкладку «Изменить HTML». Ставим галочку напротив «Расширить шаблоны виджета».
2. Находим строчку <data:post.body/> и вставляем после неё следующий код:

<b:if cond=’data:blog.pageType == "item"’> <div class=’similiar’> <div class=’widget-content’> <br/> <div id=’data2007840981’/> <div id=’data2007840980’/> <br/> <script type=’text/javascript’> var headerN = «Похожие статьи:»; /* Заголовок виджета, когда в нём отображается более чем одна метка. */ var header1 = «Еще статьи из категории \»__LABEL__\»:»; /* Заголовок виджета, когда в нём отображается одна метка. Если в заголовке есть слово __LABEL__, то вместо него будет подставлено имя метки. */ var header0 = «»; /* Текст, выводимый, если нет ни одной метки и ссылки. */ var homeUrl3 = "<data:blog.homepageUrl/>"; /* Адрес блога, откуда берём список постов. */ var maxNumberOfPostsPerLabel = 5; /* Максимальное число постов, отображаемых для каждой метки. */ var maxNumberOfLabels = 4; /* Максимальное число отображаемых меток. */ var excludeEmptyLabels = true; /* Скрывать ли метки, для которых нет подходящих постов. true — скрывать, false — отображать. */ var excludeLabels = []; /* Метки, которые не следует отображать. */ /* Смена отображаемых имён. Здесь перечисляем соответствия реального имени метки и названия, которое будет показано на странице. Если для двух меток указать одно название, они при отображении склеятся в одну метку. Если метка здесь не перечисляется, то отображается под своим настоящим названием. */ var renameLabels = {}; function is_in(item, array) { for (k in array) if (array[k] == item) return true; return false; } function label_title(label) { if (renameLabels[label]) return renameLabels[label]; return label; } totalLabels = 0; receivedReplies = 0; var receivedItems = []; var k_label; function labelReceived() { receivedReplies++; if (receivedReplies != totalLabels) return; var labelCount = 0; for (k_label in receivedItems) { var items = receivedItems[k_label]; if (items.length == 0 && excludeEmptyLabels) continue; labelCount++; } var labelCount1 = 0; for (k_label in receivedItems) { var items = receivedItems[k_label]; if (items.length == 0 && excludeEmptyLabels) continue; var ul = document.createElement('ul'); var itemsCount = 0; for (var k_item in items) { item = items[k_item]; var li = document.createElement('li'); var a = document.createElement('a'); a.href = item.href; var txt = document.createTextNode(item.title); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); itemsCount++; if (itemsCount == maxNumberOfPostsPerLabel) break; } var txt = document.createTextNode(k_label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); if (!(labelCount == 1 && header1.search && header1.search(/(LABEL)/) != -1)) div1.appendChild(h); div1.appendChild(ul); document.getElementById('data2007840980').appendChild(div1); labelCount1++; if (labelCount1 == maxNumberOfLabels) break; } var txt; if (labelCount == 1 && header1) txt = document.createTextNode(header1.replace(«__LABEL__», k_label)); else if (labelCount) txt = document.createTextNode(headerN); else if (header0) txt = document.createTextNode(headerN); if (txt) { var h = document.createElement(«h4»); h.appendChild(txt); document.getElementById('data2007840981').appendChild(h); } } function receiveReply_123(json) { var label = «»; for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); label = decodeURI(label); break; } } var labelTitle = label_title(label); if (typeof receivedItems[labelTitle] != «object») receivedItems[labelTitle] = []; for (var k in json.feed.entry) { var entry = json.feed.entry[k]; var href = «»; for (var kl in entry.link) { if (entry.link[kl].rel == «alternate») { href = entry.link[kl].href; break; } } if(href != «» && href != location.href) { var item = { «href» : href, «title» : entry.title.$t}; receivedItems[labelTitle].push(item); } } labelReceived(); } function sendQueryForLabel(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=receiveReply_123'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var parsedlabels = []; var labelsCount = 0; function list_items(textLabel) { if (labelsCount >= maxNumberOfLabels || is_in(textLabel, excludeLabels) || is_in(textLabel, parsedlabels)) { labelReceived(); return; } labelsCount++; parsedlabels.push(textLabel); sendQueryForLabel(homeUrl3, textLabel); } <b:loop values=’data:posts’ var=’post’> <b:loop values=’data:post.labels’ var=’label’> totalLabels++; </b:loop> </b:loop> <b:loop values=’data:posts’ var=’post’> <b:loop values=’data:post.labels’ var=’label’> list_items("<data:label.name/>"); </b:loop> </b:loop> </script> </div> </div> </b:if>

3. Изменяем настройки виджета на свой вкус.
4. Пользуемся!

Если вам необходимы какие-то особые возможности, которые данный код предоставить не в состоянии, вы можете обратиться за помощью, посетив ЖЖ автора скрипта.

источник

Виджет похожие сообщения без миниатюр для Blogger

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

Рассмотрим установку виджета похожие сообщения без миниатюр.

Перейдём в Шаблон - Изменить HTML.
Отмечаем галочкой “Расширить шаблоны виджетов”
С помощью поиска (Ctrl+F) находим строку:

 </head>

и прямо над ней вставляем код:

<!--Related Posts Scripts and Styles Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:blue; } #related-posts a:hover{ color:blue; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:bold; font-size:15px; text-color:#000000 } #related-posts ul li{ background:transparent url(https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png) no-repeat ; display:block; list-style-type:none; margin-bottom: 13px; padding-left: 30px; padding-top:0px;} </style> <script type='text/javascript'> var relatedpoststitle="Похожие сообщения:"; </script> <script src='http://slivsol-pc-user.googlecode.com/files/related-posts.js' type='text/javascript'/> <!--Remove--></b:if> <!--Related Posts Scripts and Styles End-->

Эта ссылка ведёт на изображение в виде зелёной галочки перед заголовком сообщения: https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png его вы можете заменить на своё или полностью удалить выделенную строчку если не хотите, чтобы изображение присутствовало.В этой строке var relatedpoststitle="Похожие сообщения:"; вы можете поменять название заголовока виджета.

Дальше находим строку:

<div class='post-footer-line post-footer-line-1'>

если такой нет, то такую:

<p class='post-footer-line post-footer-line-1'> 

и сразу под строкой вставляем этот код (код не содержит скрытых сторонних ссылок) :

<!-- Related Posts Code Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=7"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=7; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End -->

В строках:

var maxresults=

и
max-results=

можно настроить количество выводимых ссылок на похожие сообщения без миниатюр.

Если вы хотите, чтобы виджет выводился не только в конце каждой статьи, но и на главной странице тоже, то  удалите из кода все эти строки:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- remove --></b:if>Если возникнут вопросы по более детальной настройке виджета похожие сообщения без миниатюр для Blogger, спрашивайте в комментариях.

источник

Как в Blogger добавить похожие статьи для каждого сообщение

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

После очень простых действий на вашем блоге, в зависимости от ярлыков, будут отображены "похожие сообщения" и выглядит это так:

Как добавить "похожие сообщения" на блог

1. Сначала заходим в панель управления blogger. Выбираем вкладку"Шаблон ⇨ Изменить HTML". Далее с помощью сочетаний клавиш (Ctrl+F),  находим строку в вашем шаблоне </head> и прямо над ней вставляем код:

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://dl.dropbox.com/u/48089857/relatedthumbs19.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

2. Теперь ищем одну из этих строчек <div class='post-footer-line post-footer-line-1'> 
Если вдруг не найдёте, то  <p class='post-footer-line post-footer-line-1'> 

Если уж вдруг нет никакой из эти строчек, то находим <data:post.body/>

Далее сразу после любой из этих строчек вставляем этот код:

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='#' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='#' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Похожие сообщения"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

источник

Flash

<img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 85px; width: 185px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 100px; width: 400px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_3" data-original-id="BLOGGER_object_3" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 100px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_5" data-original-id="BLOGGER_object_5" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 67px; width: 185px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_7" data-original-id="BLOGGER_object_7" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 100px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_9" data-original-id="BLOGGER_object_9" /> <img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 90px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_11" data-original-id="BLOGGER_object_11" /> <object type="application/x-shockwave-flash" data="http://xflash.ucoz.ru/Nadpisi300-50/122.swf" width="200" height="75"><param name="bgcolor" value="#ffffff" /> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> <param name="movie" value="" /> <param name="flashvars" value="st=;file=" /></object>

Радио для блога

Радио онлайн

<!--НАЧАЛО БЛОКА РАДИО ОНЛАЙН--> <style type="text/css"> #ro_block h2 { background: #800000; padding: 6px; margin: 0; line-height: 100%;} #ro_block h2 a { background: #800000; color: #334cb0; font: normal bold 12px Arial, Verdana; text-decoration: none;} #ro_block h2 a:hover { text-decoration: underline;} </style> <div id="ro_block" align="center"> <h2 id ="ro_h2"> <a href="http://radio-online.com.ua/" target="_blank">Радио онлайн</a></h2> <div id="ro_player"> </div> <div id="ro_img"> </div> </div> <script type="text/javascript">var roMyRad = "36,34,28,31,29,58,27,35,33,126,39,43", roBlockWidth = 200, roImgKol = 5;</script> <!--КОНЕЦ БЛОКА РАДИО ОНЛАЙН--> <script type="text/javascript" src="http://radio-online.com.ua/scripts/rns.js" charset="windows-1251"></script>

Слушать радио онлайн бесплатно

<div id="RO_Kiev" style="text-align:center;width:240px;background:#fff;"> <a href="http://fmradio-online.ru/ua.php" id="aRK">Слушать радио онлайн бесплатно</a></div> <script type="text/javascript" src="http://fmradio-online.ru/scripts/rnsK.js" charset="UTF-8"></script>

Слушать радио онлайн бесплатно

<div id="RO_Moskva" style="text-align:center;width:240px;background:#fff;"> <a href="http://fmradio-online.ru/" id="aRM">Слушать радио онлайн бесплатно</a></div> <script type="text/javascript" src="http://fmradio-online.ru/scripts/rnsM.js" charset="UTF-8"></script>

Внимание! 

При внесении каких-либо изменений в код работоспособность блока онлайн радио не гарантируется!

Оценка поста

Эх, как чешутся руки подписывать посты не по-человечески, ну, по крайней мере, не так попсово. Особенно я бы развернулся в сегодняшней теме поста. Но ах, ах... Нужно угождать поисковикам. Работа у них сложная и совсем без юмора, легкомысленных заголовков они не прощают. Поэтому сегодня просто и очень серьезно попытаемся сделать наши сообщения в блоге "звезданутыми". С помощью гаджета оценки постов.

Во всю важность данного дополнения я смутно верю, но, тем не менее, это достаточно интересный способ узнать о мнении читателей. Как итог, оцененные статьи помогут понять какую информацию хотели бы видеть у вас в блоге. Ведь звездный пост, положительно одобренный читателями, подобно хорошему пятизвездочному коньяку, приятно согревает душу ;)

Осуществим задумку мы в несколько абсолютно не энергозатратных действий. И, как всегда, для нашего блога от Blogger. Данный гаджет оценки статей подходит больше для нестандартных шаблонов, в большинстве которых отсутствует родной рейтинг от Blogger.
Для начала в административной панели заходим в раздел "Дизайн". Далее переходим во вкладку "Изменить HTML". Следующим действием с помощью CTRL+F находим в шаблоне блога:

<p class='post-footer-line post-footer-line-1'>

При отсутствии онного отрезка кода, ищем:

<div class=''post-footer-line post-footer-line-1'>

После любой из найденных строк вставляем следующий код, виновника сегодняшнего "звездного" поста:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='star-ratings'> <b:if cond='data:top.showStars'> <div 
expr:g:background-color='data:backgroundColor' expr:g:text- 
color='data:textColor' expr:g:url='data:post.absoluteUrl' 
g:height='42' g:type='RatingPanel' g:width='180'/> </b:if> </span>
</b:if>

Следующим действием снова ищем строку в шаблоне:

<b:include name='nextprev'/>

После нее сразу вписываем:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Отмучившись, сохраняем шаблон и пробуем обнаружить заветные звездочки в конце статей.
Хочу сказать, что сей гаджет, все-таки будем так называть его в целом, ведет себя достаточно своеобразно. У меня он заработал на тестовом блоге, а вот на другом - постеснялся показаться. Быть может, у вас его судьба сложится удачно.

источник

Скрипт ротатор баннеров-баннерокрутилка

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

К чему это я? Да, к тому, что скрипт ротатор баннеров, а по простому баннерокрутилка, оказывается универсальный, он подходит для любого сайта и в том числе, и для платформы Blogger. Поэтому, если у вас установлены на своём блоге рекламные материалы партнёрок или другие различные баннеры, то можно объединить их в одно рекламное место. Тем самым не будет увешен весь блог, как новогодняя ёлка, рекламными объявлениями. Для вас будет хорошо, а для ваших посетителей, тем более.

Скрипт ротатор баннеров для сайта - баннерокрутилка

Скрипт ротатор баннера

Установить баннерокрутилку в Blogger можно с помощью волшебного гаджета HTML/JavaScript,вставив в него такой код:

<script type="text/javascript"> var mycrib = []; mycrib[0] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>' mycrib[1] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>' mycrib[2] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>' var x = 0; function rotate(mycrib) { while (x < mycrib.length) { var sort = Math.floor(Math.random() * mycrib.length); if (mycrib[sort] != 0) { document.getElementById('adspace').innerHTML = (mycrib[sort]); mycrib[sort] = 0; x++; } } } </script> <script> #adspace { } #adspace img { } </script> <div id="adspace"> <script type="text/javascript"> rotate(mycrib); </script>
В скрипте нужно вставить ссылки на рекламодателя и на картинки, а также, указать нужный размер изображений и название баннера. Желательно, чтобы баннеры были одного размера, так будет красивей. Если вы хотите прокручивать больше трёх баннеров, тогда нужно добавить ещё один код, выше строки var x = 0;:

mycrib[3] = '<noindex><a href="Ваша ссылка" target="_blank" rel="nofollow"><img src="Ссылка на изображение баннера" alt="Название баннера" width="240" height="400"></a></noindex>'
Надеюсь, дамы и господа, вам всё понятно. И со скриптом и для чего нужен ротатор баннера. А я с вами досвидакуюсь, совсем не надолго. До встречи. Пока, пока.

источник

Карта блога с картинками для 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 и до новых встреч.

источник