Blogger (подборка статей из инета): карта блога

Показаны сообщения с ярлыком карта блога. Показать все сообщения

пятница, 25 мая 2018 г.

Галерея с картинок в Blogger

источник: Я блоггер https://yablogger.info/.

ДЕМО: https://demo-yablogger.blogspot.com/2017/09/blogger-galereya-izobrazhenij.html
Что бы создать галерею из картинок применим тег html <table>. С помощью этого тега можно создать таблицу(https://yablogger.info/kak-sozdat-tablicu-v-html-teg-table.html),
разбить текст на 2 колонки(https://yablogger.info/razbit-tekst-na-kolonki-v-html.html).
Открываем HTML редактор сообщения под цифрой 2 на скриншоте и вставляем код:

<table>
<tr><td>Картинка1</td>
<td>Картинка 2</td>
<td>Картинка 3</td></tr>
</table>

или такой код:

<table border="0"cellspacing="1"cellpadding="1" width="100%"><tr><td>Картинка 1 </td><td>Картинка 2 </td><td>Картинка 3</td> </tr></table>

Добавили, нажимаем на кнопку СОЗДАТЬ под цифрой 1, в текстовом редакторе сообщения вы не увидите код, там откроются слова:
Картинка 1 Картинка 2 Картинка 3
Ставим курсор перед каждым словом Картинка и загружаем фотографии, выбираем маленький размер, по желанию добавляем подпись, все галерея готова. Удаляем слова и цифры.

Галерея изображений для blogger (https://yablogger.info/kak-sdelat-galereyu-iz-kartinok-v-blogger.html#more-95)

Чтобы сделать 2 ряда, т.е 6 картинок в галерее, после загрузки 3-х картинок, слова картинка 1, картинка 2 и картинка 3 переместятся во второй ряд под изображениями. Делаем все так же как с первым рядом, но если будем делать, как и в первом случае, то второй ряд будет прилипать к первому. Что бы их разделить, ставим курсор перед словом и нажимаем Enter.

Загружать желательно только три фотографии в ряд, четвертая в разных шаблонах может выходить за границы блока контента.

четверг, 10 мая 2018 г.

Слайдер (ротатор контента) для Blogger

Какими же преимуществами обладает этот слайдер перед другими?

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

начинается перелистывание.

              Основа  easySlider, где добавили "размеры" картинки и установил регулировку паузы. 

По просьбе aldous, автор замечательного блога  Blogger не для чайников (https://www.blogger.com/null) оформил заголовки страниц в слайдере ссылками и таким образом появился ротатор контента, который вы видите на моем блоге.

               Размеры у всех разные и поэтому от стрелочек пришлось отказаться! Вместо стрелочек управление в ввиде слов: "предыдущее", "следующее", которые на размеры не влияют.

               Зато, вся процедура существенно упростилась и вместо трех скриптов теперь один, а так же отпала необходимость "лезть" в шаблон!

Демо можно посмотреть здесь: 

Заходим в Дизайн и вставляем скрипт в "Добавить гаджет - HTML/JavaScript".

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

<style>#slide-container {

                  height:165px;

                  position:relative;

                   width:530px;

                  }

                  #slider {

                  height:165px;

                  left:24px;

                  overflow-x:hidden;

                  overflow-y:hidden;

                  position:relative;

                   width:530px;

                  }

                  .slide-desc {

                  padding:10px;

                  position:absolute;

                  right:0px;

                  text-align:left;

                  top:0;

                   width:290px;

                  z-index:1;

                  }

                  .slide-desc h2{display:block;}

                  .crosscol .widget-content {position:relative;}

                  #slider ul, #slider li,

                  #slider2 ul, #slider2 li{

                  margin:0;

                  padding:0;

                  list-style:none;

                  }

                  }

                  </style><div id="slider">

                  <script style="text/javascript">

                     var showpostthumbnails_gal  = true;

                      var showpostsummary_gal   = true;

                   var random_posts         = true;

                    var numchars_gal   = 210;

                   var numposts_gal   = 34;

                  function showgalleryposts(json) {

                      var numPosts = json.feed.openSearch$totalResults.$t;

                      var indexPosts = new Array();

                   document.write('<ul>');

                      for (var i = 0; i < numPosts; ++i) {

                          indexPosts[i] = i;

                      }

                   if (random_posts == true){

                      indexPosts.sort(function() {return 0.5 - Math.random()});

                   }

                      if (numposts_gal > numPosts) {

                          numposts_gal = numPosts;

                      }

                      for (i = 0; i < numposts_gal; ++i) {

                          var entry_gal = json.feed.entry[indexPosts[i]];

                    var posttitle_gal =  entry_gal.title.$t;

                          for (var k = 0; k <  entry_gal.link.length; k++) {

                              if ( entry_gal.link[k].rel == 'alternate') {

                                   posturl_gal =  entry_gal.link[k].href;

                                  break;

                              }

                          }

                    if ("content" in entry_gal) {

                              var postcontent_gal = entry_gal.content.$t

                          }

                          s = postcontent_gal;

                          a = s.indexOf("<img");

                          b = s.indexOf("src=\"", a);

                          c = s.indexOf("\"", b + 5);

                          d = s.substr(b + 5, c - b - 5);

                          if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {

                              var thumburl_gal = d

                          } else var thumburl_gal = '[url]http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';[/url]

                          document.write('<li><div id="slide-container"><span class="slide-desc"><h2><a href="' + posturl_gal + '">');

                          document.write(posttitle_gal + '</a></h2>');

                          var re = /<\S[^>]*>/g;

                          postcontent_gal = postcontent_gal.replace(re, "");

                          if (showpostsummary_gal == true) {

                              if (postcontent_gal.length < numchars_gal) {

                                  document.write(postcontent_gal);

                                  document.write('</span>')

                              } else {

                                  postcontent_gal = postcontent_gal.substring(0, numchars_gal);

                                  var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");

                                  postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);

                                  document.write(postcontent_gal + '...');

                                  document.write('</span>')

                              }

                          }

                     document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="220px" height="165"/></a></div>');

                          document.write('</li>');

                      }

                   document.write('</ul>');

                  }

                  </script>

                  <!-- replace with your web address (marked with red color) -->

                  <script src="[url]http://blogodel.com/[/url]feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

                   <script src='[url]http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'[/url] type='text/javascript'></script>

                  <script src='[url]http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js'[/url] type='text/javascript'></script>

                  <script type='text/javascript'>

                  //<![CDATA[

                  $(document).ready(function(){

                   $("#slider").easySlider({pause: 4000,

                   nextId: 'next',

                   prevId: 'prev', nextText: ' Следующее &#9658;', prevText: '&#9668; Предыдущее ',                       

                   auto: true,

                   continuous: true

                   });

                  });

                  //]]>

                  </script>

Код без скрипта jquery (для тех у кого не "идет" предыдущий код)

<style>#slide-container {

              height:165px;

              position:relative;

              width:530px;

              }

              #slider {

              height:165px;

              left:24px;

              overflow-x:hidden;

              overflow-y:hidden;

              position:relative;

              width:530px;

              }

              .slide-desc {

              padding:10px;

              position:absolute;

              right:0px;

              text-align:left;

              top:0;

width:290px;

              z-index:1;

              }

              .slide-desc h2{display:block;}

              .crosscol .widget-content {position:relative;}

              #slider ul, #slider li,

              #slider2 ul, #slider2 li{

              margin:0;

              padding:0;

              list-style:none;

              }

              }

              </style><div id="slider">

              <script style="text/javascript">

                 var showpostthumbnails_gal  = true;

                  var showpostsummary_gal   = true;

               var random_posts         = true;

  var numchars_gal   = 210;

               var numposts_gal   = 34;

              function showgalleryposts(json) {

                  var numPosts = json.feed.openSearch$totalResults.$t;

                  var indexPosts = new Array();

               document.write('<ul>');

                  for (var i = 0; i < numPosts; ++i) {

                      indexPosts[i] = i;

                  }

               if (random_posts == true){

                  indexPosts.sort(function() {return 0.5 - Math.random()});

               }

                  if (numposts_gal > numPosts) {

                      numposts_gal = numPosts;

                  }

                  for (i = 0; i < numposts_gal; ++i) {

                      var entry_gal = json.feed.entry[indexPosts[i]];

                var posttitle_gal =  entry_gal.title.$t;

                      for (var k = 0; k <  entry_gal.link.length; k++) {

                          if ( entry_gal.link[k].rel == 'alternate') {

                              posturl_gal =  entry_gal.link[k].href;

                              break;

             }

                       }

                if ("content" in entry_gal) {

                          var postcontent_gal = entry_gal.content.$t

                      }

                      s = postcontent_gal;

                      a = s.indexOf("<img");

                      b = s.indexOf("src=\"", a);

                      c = s.indexOf("\"", b + 5);

                      d = s.substr(b + 5, c - b - 5);

                      if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {

                          var thumburl_gal = d

                      } else var thumburl_gal = '[url]http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';[/url]

                      document.write('<li><div id="slide-container"><span class="slide-desc"><h2><a href="' + posturl_gal + '">');

                      document.write(posttitle_gal + '</a></h2>');

                      var re = /<\S[^>]*>/g;

                      postcontent_gal = postcontent_gal.replace(re, "");

                      if (showpostsummary_gal == true) {

                          if (postcontent_gal.length < numchars_gal) {

                              document.write(postcontent_gal);

                 document.write('</span>')

                          } else {

                              postcontent_gal = postcontent_gal.substring(0, numchars_gal);

                              var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");

                              postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);

                              document.write(postcontent_gal + '...');

                              document.write('</span>')

                          }

                      }

                 document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="220px" height="165"/></a></div>');

                      document.write('</li>');

                  }

               document.write('</ul>');

              }

              </script>

              <!-- replace with your web address (marked with red color) -->

              <script src="[url]http://russkiyiliteratura.blogspot.ru/[/url]feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

              <script src='[url]http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js'[/url] type='text/javascript'></script>

              <script type='text/javascript'>

 //<![CDATA[

              $(document).ready(function(){

               $("#slider").easySlider({pause: 4000,

               nextId: 'next',

              prevId: 'prev', nextText: ' Следующее &#9658;', prevText: '&#9668; Предыдущее ',                       

               auto: true,

               continuous: true

               });

              });

              //]]>

              </script>

Дополнение: маркировка, это длинна анонса, маркировка - скорость смены анонса. Маркировка  и так же  такой фон - ширина элементов слайдера и картинок.
Внимание! Если у вас уже установлены динамические виджеты с jquery, со скриптом вида (указан в коде ЖЕЛТЫМ фоном):

<script src='[url]http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'[/url] type='text/javascript'></script>то слайдер может не пойти. 

http://blogodel.com/2012/11/slajder-rotator-kontenta-dlja-blogger.html

пятница, 4 мая 2018 г.

Карта сайта по ярлыкам - семь вариантов

https://www.shablonu-dlya-blogger.ru/2015/08/blogger-sitemap.html

Карта сайта для Blogger по ярлыкам  

Простая карта сайта (таблица)Демо 

Простой вариант с таблицей на три столбика в которых отображается заголовок статьи, дата публикации и ее ярлык. Формируется из всех сообщений блога.

Нужно перейти в раздел Тема - Изменить HTML в редакторе находите код ]]></b:skin> перед которым нужно будет вставить следующий код:

/* CSS Full Sitemap */

           #bp_toc {background:#4DB2EC;color:#666;margin:0 auto;padding:5px;}

           span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}

           .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}

           .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}

           .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}

           .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;

           text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}

           .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {

           text-decoration:none;}

           .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}

           .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}

           .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}

           #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}

           .toc-entry-col1 {counter-increment:rowNumber;}

           #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}

           td.toc-entry-col2 {background:#fafafa;}

Сохраняем шаблон и переходим в раздел Страницы - Создать Страницу в открывшемся редакторе переходим на вкладку HTML и вставляем следующий код:

<div id="bp_toc">

           </div>

           <script src="[url]https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js"[/url] type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">

           #comments {display:none;}

           </style>

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

Карта сайта аккордеон

Смотреть Демо

           Данный вариант виджета отображает столбиком все ярлыки блога в алфавитном порядке. При нажатии на ярлык появляются последние сообщения из данной категории. В отличии от первого варианта, этот может показывать последние 150 сообщений по каждому ярлыку. Для установки создайте Страницу, перейдите на вкладку HTML, вставьте туда содержимое скачанного файла и опубликуйте страницу.

Карта сайта с  постраничной навигацией

Смотреть Демо

           Здесь у нас так же появляется список ярлыков, но при нажатии по ярлыку колонка с постами появляется с правой стороны. Прелесть этой карты заключается в том, что она имеет свою навигацию. За раз может выводить до 150 сообщений. Так же показывает количество сообщений для каждого ярлыка. Способ установки такой же, как и во втором типе. Скачать файл с HTML кодом.

Карта сайта со спойлером и миниатюрами

Смотреть Демо

           Данный тип чем-то напоминает карту аккордеон, здесь категории так же раскрываются в низ, но в добавок к заголовку прикреплено изображение (миниатюра). Каждая категория может выкатывать до 150 сообщений. Установку чутка отличается и вообще сам виджет довольно капризный. Для установки скачайте файл. HTML код файла вставьте в разделе Тема - Изменить HTML в самом низу редактора перед закрывающим тегом </body>. После создайте новую Страницу, перейдите на вкладку HTML и пропишите там [sitemap] теперь можете опубликовать страницу.

Карта с миниатюрами и безлимитной прокруткой страниц

Демо

            Наконец-то добрались к последнему виджету. Идем дальше, у пользователей есть следующие возможности при просмотре публикаций с ее помощью:

            1) Сортировать выдаваемые посты (сообщения) по новым и обновленным. Обновленные - это ваши опубликованные посты в которых вы, что-то дописывали или убирали от того и обновленные.

            2) Читатель вашего блога или сайта может выбрать определенную категорию постов.

            3) Поиск поста вручную, введя в строку поиска его название.

4) Изначально карта выдает шесть постов, чтобы увидеть остальные нужно кликнуть по кнопке Load more. Когда посты заканчиваются вместо кнопки Load more появляется кнопка Top при нажатии которой осуществляется скроллинг страницы вверх.

            Все эти функции вы можете прощупать на тестовом блоге.

            Переходим к установке виджета Для установки вам нужно создать новую страницу, перейти на вкладку HTML и разместить там код - скачать. В скрипте найдите ссылку - [url]http://dan-blog102.blogspot.com[/url] вместо нее вставьте ссылку своего блога.

Карта блога с картинками и нумерованной навигацией

Смотреть демо

            Данный вариант чем-то похож на предыдущий, только вместо безлимитной навигации у него прикручена постраничная навигация. Одна страница вмещает 150 публикаций. Хотя видок у нее так себе, но довольно удобная штука, подойдет для крупных вебресурсов. Чтобы установить скачайте файл, создайте новую страницу, на вкладке HTML вставьте содержимое файла и опубликуйте страницу.

Динамическая карта блога 

Демо

            Весьма интересный способ внедрения карты сайта предложил вьетнамский программист. Его способ заключается в том, чтобы использовать один из динамических шаблонов blogger и знакомый всем тег Iframe. Для установки скачайте файл, создайте страницу, перейдите на вкладку HTML и вставьте код из файла. 

После найдите строку: 

<iframe src="[url]https://dan-blog111.blogspot.com/view/flipcard"></iframe>[/url] вместо ссылки [url]https://dan-blog111.blogspot.com[/url] вставьте ссылку своего блога. Так же можете поменять внешний вид сообщений, для этого нужно прописать в той же строке вместо flipcart одно из следующих значений: timeslide, classic, sidebar, magazine, mosaic или snapshot.

источник:  https://www.shablonu-dlya-blogger.ru/2015/08/blogger-sitemap.html

среда, 18 апреля 2018 г.

Карта блога на Blogger

ИСТОЧНИК:  https://wordpressmania.ru/karta-bloga-dlya-blogger-s-kartinkami/

Вспомнил я про Sitemap with Thumbnail blogger благодаря нашей участнице сообщества "Я Блоггер"

в социальной сети Google Plus Ольге Протасовой. Она опубликовала запись с нужной картой и вот я решил возобновить свои поиски. Искал по картинкам (лучший вариант поиска, советую) и вот на вьетнамском ресурсе улыбнулась удача. Нашёл, что так долго искал - карта блога для Blogger с картинками в два ряда.

Вот она красава:

Blogger карта с картинками 

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

на блоге перелистывая страницы. Кому подходит, тогда вперёд.

Как сделать карту блога в Blogger

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

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

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

Можете посмотреть видео по установке данной карты, для наглядности.

понедельник, 16 апреля 2018 г.

Новая карта сайта на Blogger

1) Создаем карту сайта для Blogger:    http://samasajt.blogspot.ru/2012/07/blogger.html. 

При создании использовался скрипт scriptabufarhan.googlecode.com. Летом 2013 работать перестал. Тогда я написала статью

             2) Содержание блога - меняем код на работающий:  http://samasajt.blogspot.ru/2013/01/blog-post.html. 

Скрипт был также разработан Абу Фарханом. Использовался с его сайта в обход сервиса googlecode.com, так как там проводилась реорганизация.

               3) Оглавление блога с графикой:http://samasajt.blogspot.ru/2013/01/blog-post_12.html

Интересный вариант карты сайты с превьюшками статей, найденный в Интернете. Минус - нет разбивки по рубрикам. Поэтому  используем скрипт для странички Все гаджеты для Blogger:http://samasajt.blogspot.ru/p/blog-page_7752.html. (Инструкция - как сделать страницу с Перечнем всех записей по одному ярлыку:http://samasajt.blogspot.ru/2013/01/blog-post_1468.html).

              4) Затем вариант карты сайта без скрипта:http://samasajt.blogspot.ru/2013/02/blog-post.html. 

Но здесь нет разбивки по ярлыкам/рубрикам.

               Новая карта сайтаотсюда здесь:http://www.mycrib.ru/2013/09/karta-site-blogspot.html.

               Первоначально карта выглядела в серых тонах:

Прямоугольные блоки со ссылками на статьи располагаются в три столбца. Есть разделения по рубрикам=ярлыкам. При наведении курсора мыши на название статьи,  меняется фон прямоугольника на темно-серый.

              Мне такие цвета показались скучноваты и получилось вот что:

              Итак, как добавить такой вариант содержания блога.

              1. Создаем пустую новую страницы с названием "Карта сайта" и в режиме редактирования страницы HTML вставляем  код

               1) Код карты сайта в серых тонах:

            <script src="[url]https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js"[/url] type='text/javascript'></script> 

            <script src="http://samasajt.blogspot.ru/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> 

            <style type="text/css"> 

            .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } 

            .post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; } 

            .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} 

            .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } 

            .ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; } 

            .ct-columns-3 p a:hover { background: #555; color: #fff; } 

            @media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } 

            </style>
              2) Код карты сайта с моими настройками:

               <script src="[url]https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js"[/url] type="text/javascript"></script> 

            <script src="[url]http://samasajt.blogspot.ru[/url]/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> 

            <style type="text/css"> 

            .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } 

            .post-archive h4 { border-bottom: 2px solid #9966CC; color: #9933CC; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; } 

            .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} 

            .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } 

            .ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #CC99FF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; } 

            .ct-columns-3 p a:hover { background: #9933CC; color: #fff; } 

            @media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } 

            </style>
            В обоих случаях нужно адрес блога заменить на свой.Вы также можете подстроить карту под цветовую гамму своего блога.

   В строке .post-archive h4 { border-bottom: 2px solid #9966CC; color: #9933CC; изменили 2 цвета: #EEEEEE на #9966CC - цвет полосы разделителя между названием рубрики и блоками со ссылками;#333333 на #9933CC- цвет названия рубрики.В строке .ct-columns-3 p a { background:# FAFAFA ; color: #333 (цвет ссылки на статью); display: block; border: 1px solid #CC99FF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEE ; 

 заменила только #FFFFFF (белый цвет) - на цвет #CC99FF (светлый сиреневый). Это цвет рамки блока со ссылками до наведения курсора.

   В строке .ct-columns-3 p a:hover { background: #9933CC; color:#FFF ; 

 меняем фон блоков со ссылками, который изменяется при наведении курсора мыши с темно-серого #555  на #9933CC (яркий сиреневый).

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

   2. После того, как все настройки Вас устраивают, опубликуйте страницу.

   P.S. Вы можете оставить свои отзывы о новой карте сайта ниже в комментариях.
источник:http://samasajt.blogspot.ru/2014/01/novaja-karta-sajta-na-blogger.html

воскресенье, 15 апреля 2018 г.

Создать страницу "содержание"

1. Выделите и скопируйте нижерасположенный код

<script src=http://ScriptAbufarhan.GoogleCode.com/svn/trunk/daftarisiv2.js>
</Script>
<script src="http://YouSite.BlogSpot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc">
</Script> 

2. Находясь в панели управления блогом:  http://blogspot-urokivladimiraesipova.blogspot.com/2011/10/blogspot_18.html, на вкладке "Отправка" - “Изменить страницы” нажмите “Создать страницу”


3.В поле заголовок впишите - Содержание

   Нажмите, “Изменить HTML”.

   В основное окно, вставьте скопированный код.

   Вместо YouSite впишите первую часть (до первой точки) URL своего блога.

Вы его придумали в статье Как создать блог на BlogSpot:  http://blogspot-urokivladimiraesipova.blogspot.com/2011/10/blogspot.html.
Нажмите “Опубликовать страницу”

Примечание: URL  блога  BlogSpot-UrokiVladimiraEsipova.BlogSpot.com,  

YouSite заменим на BlogSpot-UrokiVladimiraEsipova

4. Перейдите на главную страницу блога.

Обратите внимание, в виджете “Страницы” появился пункт “Содержание”, нажмите на него и откроется созданная страница “Содержание”
5. Обратите внимание, на странице “Содержание” статьи блога сгруппированы по Ярлыкам (мы про них говорили в уроке “Добавляем разделы в блог:  http://blogspot-urokivladimiraesipova.blogspot.com/2011/11/kak-raspredelit-stati-po-kategoriyam.html”)
Обратите внимание, что на странице Содержание названия статей являются активными ссылками на на сами статьи. Если по ним кликнуть мышкой, то откроется страница со статьёй, что очень удобно!

Добро пожаловать!

Мои ссылки

Ищите меня здесь:

Blogger (подборка статей из инета)

Галерея с картинок в Blogger

Слайдер (ротатор контента) для Blogger

Код без скрипта jquery (для тех у кого не "идет" предыдущий код)

Карта сайта по ярлыкам - семь вариантов

Карта сайта для Blogger по ярлыкам

Карта сайта с постраничной навигацией

Карта сайта со спойлером и миниатюрами

Карта с миниатюрами и безлимитной прокруткой страниц

Карта блога с картинками и нумерованной навигацией

Динамическая карта блога

Карта блога на Blogger

Новая карта сайта на Blogger

Создать страницу "содержание"

Панель администратора:

Метки:

Комментарии

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