среда, 22 марта 2017 г.

тест


.mykod { margin:10px; padding:15px 15px 15px 70px; border:2px solid #2288bb; border-radius: 10px; background-position:10px 50%; background-repeat:no-repeat; position:relative; background-color:#F0F9FF; font-family: monospace; font-size:90%; color: #2288bb; background-image:url("https://dl.dropboxusercontent.com/u/54357058/kod.png"); }

Ещё один вариант оформления кода

Вариант оформления кода с помощью CSS (вручную) в целом похож на последний способ, описанный в статье "Вставка кода в статью блога (продолжение)".
1. Создала новый класс .mykod, для которого расписала CSS стиль такого вида:
.mykod {
margin:10px;
padding:15px 15px 15px 70px;
border:2px solid #2288bb;
border-radius: 10px;
background-position:10px 50%;
background-repeat:no-repeat;
position:relative;
background-color:#F0F9FF;
font-family: monospace;
font-size:90%;
color: #2288bb;
background-image:url("https://dl.dropboxusercontent.com/u/54357058/kod.png");
}
Этот стиль CSS сохранила (как всегда) через  Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.
2. И теперь каждый раз, когда нужно оформить код, его нужно заключить между тегами:
<div class="mykod">ВАШ КОД</div>
То есть, сначала в визуальном редакторе пишем код (как простой текст статьи), а затем (после написания всей статьи), переключаемся на HTML-редактор и участок текста, соответствующий нашему коду, обрамляем в вышеуказанные div-ы.
Идею такого оформления кода я позаимствовала в статье "Красивое выделение текста".  Однако, не стала задавать несколько классов, а ограничилась только одним. CSS тоже изменила: удалила свойства, описывающие тени; подобрала другие цвета фона, текста и рамки; изменила шрифт на моноширинный, уменьшив его относительный размер; картинку "перебросила" на свой Дропбокс; и др.

источник

Как убрать рамку вокруг изображения

По умолчанию в блогах на Blogspot-е вокруг изображений (фотографий) в тексте статьи отображается рамка с небольшой тенью. Эта несколько невнятная рамка иногда меня раздражала, но как от неё избавиться, я не знала. Пока совершенно случайно не наткнулась на статью "How To Remove Blogger Picture/Image Shadow And Border".
Оказывается, всё очень просто: нужно просто внести изменения в CSS.
Для этого открываем вкладку "Дизайн" в админке блога → ссылка "Дизайнер шаблонов" → вкладка "Дополнительно" → Добавить CSS
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
Ниже приведу скриншоты до и после внесения изменений в CSS.
1. Рамка по умолчанию выглядит так:
Рамка по умолчанию вокруг изображения в блоге

2. Без рамки по умолчанию, по-моему, лучше:
Рамка по умолчанию удалена

воскресенье, 19 февраля 2017 г.

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

По запросам «похожие статьи blogger«, «похожие посты blogger«, «похожие сообщения blogger» Яндекс не особо порадовал выдачей. Есть кое-какие скрипты, которыми пользуется большинство, но меня они не особо устроили. Потому, порыв блогосферу, наткнулся на замечательного товарища — Doctor VU, который у себя в жж выложил модифицированный скрипт «Ссылки на похожие сообщения для Blogger«. Его и установил. Схожесть ссылки определяется только её принадлежностью к метке.
Плюсы скрипта:
1. Отсутствие ссылок на сторонние ресурсы;
2. Возможность исключать из выдачи метки, не имеющие ни одной ссылки;
3. Возможность переименовывать метки в выдаче и объединять разные метки под одним названием;
4. Возможность отдельно указать, какие метки следует всегда исключать из выдачи;
5. Возможность встроить название метки в заголовок;
6. Возможность указать заголовок, который отображается, когда нет ни единой релевантной ссылки;
7. Простота настройки.
Установка скрипта «Похожие статьи»:
1. Заходим в панель управления блогом и переходим на вкладку «Изменить HTML». Ставим галочку напротив «Расширить шаблоны виджета».
2. Находим строчку <data:post.body/> и вставляем после неё следующий код:

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

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

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

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



Эта ссылка ведёт на изображение в виде зелёной галочки перед заголовком сообщения: 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'> 
и сразу под строкой вставляем этот код (код не содержит скрытых сторонних ссылок) :



В строках:
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> и прямо над ней вставляем код:

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



источник

Flash