Sitemap с картинками и количеством комментариев



Еще вариант карты блога с картинками и комментариями с одной и двумя колонками

Ув. читатели, скрипт работает не во всех шаблонах.

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

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

Посмотрите скриншот: статьи блога в одну колонку

Настройка и установка карты блога

А это скриншот карты с двумя колонками

Настройка и установка карты блога с двумя колонками


Скопируйте код ниже, в черновике 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: 157px;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #ссс;
    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: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    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Number of posts:",
    jumpPageLabel  = "page",
    commentsLabel  = "comment",
    rmoreText      = "Читать дальше&#9658;",
    prevText       = "previous",
    nextText       = "next",
    siteUrl        = "http://goazhetybloga.blogspot.com",
    postPerPage   = 8,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/16094131351/sitemaps.js"></script>
</div>


Это код с двумя колонками. Выделенное красным-высота блока; синим-ширина блока; лиловым-размеры изображения; зеленым-url адрес вашего блога; оранжевым-количество статей на странице. 

Для того, чтобы статьи блога отображались одной колонкой, настройте ширину  width: 47%;, надо выставить 97%, будете смотреть по ширине страницы Вашего блога.

Как видите ничего трудного в установке такой карты для блога нет. Протестировала скрипт на всех своих блогах, и в не стандартных шаблонах тоже. Устанавливается без проблем. 

Корректировала только ширину, так как размеры страниц во всех блогах разные. Делитесь со своими друзьями в социальных сетях, а я не надолго говорю Вам До свидания. 




Автор статьи ✎ Olga Protasova Выпуск ✹ 8/01/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *