Карта блога
Привет Всем, кто меня читает. Вы знаете как вдохновляют добрые слова? Конечно, знаете. Впервые за существования блога я почувствовала, что мои подсказки кому-то помогли. И это меня вдохновило с новой силой писать свои записки. Хочу еще раз выразить благодарность Галине Петерсен, за слова которые подняли мне  боевой дух!


Итак сегодня поговорим о картах блога. Очень нужная  "вещь" многие продвинутые блоггеры рекомендуют сделать  2 карты одну карту для посетителей, что бы им было проще ориентироваться по блогу,  другую для поисковых роботов. В частности для Яндекса. Так как этот вредный «робот»  индексирует только главную страницу, а следовательно в поисковике будет видна только главная страница и не о каких SEO ключах не может быть и речи, да что там SEO ключи он ни когда не увидит ваши первый сообщения.

Но сегодня мы поговорим о картах блога для читателей. Я предложу вам несколько вариантов. Буду рада если они вам помогут.

И так:

Для начала нужно создать страницу

 дальше открыть html  и вписать вот эти варианты кода


 Первый код:

<div dir="ltr" style="text-align: left;" trbidi="on"><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://(адрес вашего блога) /feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
Смотреться  он будет так


Второй код

Немного сложнее
Нужно в шаблоне найти </b:skin>  и выше него вставить этот код:
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}


Далее зайти на страница как и в первом коде и нажав HTML  вставить этот код

<script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js">
</script>
<script src="Адрес вашего блога/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript">
</script>


Вид у него такой.


Чуть позже, как разберусь с sitemap.xml  именно такая карта нужна, для поисковых роботов я поделюсь с вами!

24 коммент.:

  1. Анечка, спасибо за Карту! У меня был первый вариант, решила изменить на второй:)) Но почему моя карта выглядит по-другому, не как у вас? Как мне сделать, как у вас - один раздел выделить, а другие закрыть? Спасибо заранее за ответ:))

    ОтветитьУдалить
    Ответы
    1. Жанна, пересмотрю код может неправильно скопировала. Обязательно исправлю и скажу

      Удалить
  2. Спасибо! Переделала свою карту блога по вашему второму варианту. Он мне больше нравится! :-bd

    ОтветитьУдалить
  3. Анна, а что дальше делать? Ну то есть как создать сами разделы карты и вкладки в ней?

    ОтветитьУдалить
    Ответы
    1. Это скрипт он автоматически прописывает разделы согласно ярлыкам, а вкладки будут название сообщений под которым вы записали тег (ярлык)

      Удалить
  4. Класс=)))Эта вещь мне тоже пригодится=)))Большое спасибо

    ОтветитьУдалить
  5. спасибочки.. пославила этот скрипт и сразу увидела что настоящий бардак в ярлыках :( нужно наводить порядок

    ОтветитьУдалить
  6. Не за что Катерина. Не переживайте, конечно не приятно поправлять, но лучше поздно чем никогда. Рада знакомству.

    ОтветитьУдалить
  7. блин,я совсем тупик:(
    я только создала блог и никак не могу разобраться:(
    куда нужно вводить код ?

    ОтветитьУдалить
    Ответы
    1. Катя не переживайте, по началу все сложно.
      Посмотрите внимательно картинку http://4.bp.blogspot.com/-rOGvglIaiGQ/UMHKTU96TEI/AAAAAAAAAe8/NNJciyl0pfg/s1600/1%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9.png. Создайте страницу далее нажмите html вставьте код, опубликуйте

      Удалить
    2. как найти в сообщении html http://3.bp.blogspot.com/-0ruR2AFZteY/UnT07CQVrfI/AAAAAAAADSc/NBHwWYzqL0M/s1600/%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B5.png

      Удалить
  8. Оо, спасибо за ценный совет!!! ))) Попробую в своем блоге эту карту)))) и отпишусь про результаты)))

    ОтветитьУдалить
  9. Аня, здравствуйте!
    Сделала страницу "Карта блога", с Вашим кодом, но она пустая. Как ее теперь заполнить?

    ОтветитьУдалить
    Ответы
    1. Это автоматический скрипт, он заполняется сам беря информацию из ваших ярлыков, если у вас нет ярлыков то карта будет пустая

      Удалить
  10. О, вот и до карт добралась, теперь понятно, что это.
    Но я, как всегда, хочу "свое" )
    Не подскажешь, где почитать об оформлении карты, ярлыков, случайных сообщений, чтобы можно было туда вставить свои цвета или хотя бы где выбор есть готового, а то все классно, но мне как-то оформление не очень мурчит(

    ОтветитьУдалить
  11. все цвета и оформление это сss код, можешь поиграться со второй картой bskin это и будет твое оформление.

    ОтветитьУдалить
    Ответы
    1. Буду развлекаться с кодом - я вообще в нем мало что понимаю, но кое-что все-таки разобрать могу %)

      Удалить
  12. Анна, здравствуйте!
    Также вставила карту сайта, но она пустая. Хотя ярлыки имеются ко всем статьям. Подскажите, в чем ошибка? только начинаю разбираться с blogspot...

    Вот мой блог, можете, посмотреть, пожалуйста?
    Заранее большое спасибо!

    http://anzheladianova.blogspot.com/

    ОтветитьУдалить
    Ответы
    1. Angel- A У вас работает карта)) я ее вижу.

      Удалить
    2. да-да, Я уже сделала. Спасибо,что проверил!!!

      Удалить
  13. Анна, большое спасибо! Второй вариант очень красивый. Правда получилось не с первого раза, пока не вставила код перед

    ОтветитьУдалить
  14. Откуда внешняя ссылка http://ww1.abu-farhan.com?

    ОтветитьУдалить

Есть вопросы? Или просто хочется поговорить? Оставляйте комментарии