Привет, друзья. Как говорится, блогеру всегда есть чем поделиться. Мой отзыв о приложении Blogger для Android. Скачать это приложение и установить можно непосредственно со смартфона или с помощью google play с компьютера на этой странице. 

приложение Блоггер

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

Вот так на экране появиться значок установленного приложения Blogger

приложение для Блоггер

Открываем его и появиться название блога. Если у вас их несколько, нужно нажать на название и появится список всех блогов. Выбирайте нужный.

приложение для андроид

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

Маловато, конечно. 

Минусы

Публиковать в таком виде сообщение не стоит. Нет настроек сообщения - пользовательская ссылка, описание для поисковых систем и др.

Нет возможности  задать описание и тайтл для картинок.

Сами изображения в формате png и большого размера. Вот так примерно выглядит ссылка на картинку. 

<a href="https://lh3.googleusercontent.com/-U_d6U76ApMc/XkjtSsAtYDI/AAAAAAAANYA/PrBv2FBHQGAxvEiHMZFGSy-CWp9wcWrpwCLcBGAsYHQ/s1600/1581837638181362-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" height="320" src="https://lh3.googleusercontent.com/-U_d6U76ApMc/XkjtSsAtYDI/AAAAAAAANYA/PrBv2FBHQGAxvEiHMZFGSy-CWp9wcWrpwCLcBGAsYHQ/s320/1581837638181362-1.png" width="191" />
  </a>

Комментариев к другим сообщениям не видно. 

Нет возможности редактировать через режим HTML. Хочется надеяться, что разработчики Блоггер доведут до совершенства это приложение.

В общем можно писать посты и редактировать опубликованные. Это тот случай, когда нет под рукой компьютера, а идея очередного сообщения созрела. Можно делать снимки и при необходимости сразу их перебрасывать из галереи в черновик Блоггер. Оно для тех, которые готовы работать над своим блогом даже вне дома. 

Пост, который вы читаете, целиком писала через приложение BLOGGER. Тут же делала и вставляла скриншоты со смартфона. В итоге сообщение оказалось в черновиках почти готовое. Почему бы и нет. Приложения, позволяют блоггерам «поймать» мысль, чтобы в дальнейшем создать на его основе качественный текст или сразу опубликовать её для всеобщего обозрения.

Попробуйте поиграться.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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


Посмотрите сразу, что мы имеем в итоге.




А вот и сам код слайдера для видео

<center>
<div>
<iframe allowfullscreen="" frameborder="0" height="315" name="slider" src="https://www.youtube.com/embed/BhB35ELD_QA?rel=0" width="560"></iframe></div>
</center>
<br />
<center>
<a href="https://www.youtube.com/embed/BhB35ELD_QA?rel=0&amp;autoplay=1" target="slider">●
</a>
<a href="https://www.youtube.com/embed/xFa2_PVMeDQ?rel=0&amp;autoplay=1" target="slider">●
</a>
<a href="https://www.youtube.com/embed/J2KH7q71xeY?rel=0&amp;autoplay=1" target="slider">●
</a><a href="https://www.youtube.com/embed/kgz1KNVMaUU?rel=0&amp;autoplay=1" target="slider">●</a></center>


Если не нужно, чтобы ролики начинались сразу после нажатия на превью, уберите &autoplay=1

Вместо жирной ● можно написать нумерованный список 1. 2, 3 ... Ну, или что - то ещё придумать.

Есть возможность более интересно оформить сам слайдер. Например как в телевизионном кадре . Выглядит примерно так. В статье, ссылку на которую дала, написано где сам адрес ролика (для тех кто не знает).


видео галерея
Все адреса роликов я выделила цветом.  Обратите внимание, в строках, которые отмечены голубым цветом нужно вставить в двух местах адрес первого ролика.

Для добавления ещё видео к списку пропишите дополнительно участки кода

<a href="https://www.youtube.com/embed/kgz1KNVMaUU?rel=0&amp;autoplay=1" target="slider">●</a>


Подобным образом можно отобразить не только видео - ролики с YouTube , но и встроить видео из социальных сетей.

Ещё можно вставить и открыть видео - ролик в новом окне.

Делитесь друзьями своим видео, презентациями, мастер - классами.

Сегодня всё. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

оформление текста

В статье про красивое оформление участка текста я приводила несколько вариантов. Оттуда и взяла первый код в качестве примера сегодня. Полностью код такой. Я отметила наклонным шрифтом код CSS. Это стили и, именно они, отвечают за внешний вид.  А внизу небольшая строка кода  HTML.

<style>.set {
font-size:16px;

color: #CCA6A6;
border-left:5px solid #CCA6A6;
border-right:5px solid #CCA6A6;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 10px #CCA6A6;
-webkit-box-shadow:0px 0px 10px #CCA6A6;
-moz-box-shadow:0px 0px 10px#CCA6A6;
}
.set:hover {
font-size:16px;
color: #A6BDCC;
border-left:5px solid #A6BDCC;
border-right:5px solid #A6BDCC;
box-shadow:0px 0px 10px #A6BDCC;
-webkit-box-shadow:0px 0px 10px #A6BDCC;
-moz-box-shadow:0px 0px 10px #A6BDCC;
}</style>

<div class="set ">здесь ваш текст</div>


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

Давайте уже разберёмся , как это легко оформить, а то слишком долгое вступление получилось. Рассмотрим 2 способа.

Вариант 1

Проще всего это сделать используя блокнот. Это одна из стандартных программ-компонентов ОС Windows. Она прилагается к любой версии этой операционной системы в обязательном порядке. Откройте «Пуск» и перейдите во «Все программы».  Выбираете папку «Стандартные» и кликните по «Блокнот». У кого 10 - ка или другие ОС немного по другому. 

Сейчас копируете предложенный код и устанавливаете его там. И там же, вместо строки  «здесь ваш текст» пишите тот текст, который нужно выделить. Теперь просто уже из блокнота копируете то, что получилось и в редакторе BLOGGER, переходите в формат  HTML. В нужном месте вашей статьи его вставьте.


Вариант 2.

Если вы написали уже сообщение и хотите в тексте оформить участок, в том месте, где это предполагается, так же переходите на формат HTML и вставляем первую часть кода CSS. В примере это участок, заключённый в теги <style>......</style>  о нём я писала в начале поста


Потом в конце выделяемого участка устанавливаем HTML код . В примере это класс "set "

<div class="set ">здесь ваш текст</div>



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


Вот что в итоге у нас должно получиться после всех не сложных манипуляций с применением этого кода. Красота.

Даже если у вас сразу не получается и результат  в режиме просмотра не виден, не отчаивайтесь. Удалите содержания поста в черновике и попробуйте снова. Потихоньку  придёт понимание что да как.

Здесь ещё стоит обратить внимание на один момент. Если выделяется таким образом стихотворение или список, то нужно между строками обязательно в конце прописывать тег </dr> (он переносит текст на другую строку). 

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

И ещё небольшое дополнение. Если вы остановились на каком - то одном определённом варианте оформлении участка текста, и именно его предполагаете использовать всегда, то лучше установить код CSS непосредственно в шаблоне блога перед строкой ]]></b:skin>, но только уже без тегов <style>......</style> . Потом только при необходимости останется добавить в тело поста только строку кода HTML. У меня именно так в шпаргалках для выделения всех кодов сделано.

Если что - то не донесла ещё или не совсем понятно, пишите в комментариях.

Вот, как обещала некоторые ссылки

Как оригинально оформит участок в тексте
3 варианта оформления участка в тексте 
Цитата или участок в текст 

Ещё больше других вариантов оформления текста можно увидеть на странице «все статьи» в меню сверху в разделе «текст».

Удачи всем и до встречи. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

название страницы

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

То есть, там где после публикации сообщений идёт название поста, здесь пустое место. А само название оказалось на странице. Посмотрите у себя и убедитесь в этом. Это только в статичных страницах, а в самих постах такого нет. И у нас нет возможности как - то настроить размер шрифта и текста этого, как бы заголовка. И убрать обычным методом мы его не можем.  Кто - то и не обратит внимание на это, но всё же.

Исправить это не сложно.

Внесём некоторые дополнения в шаблон блога. Идём во вкладку Тема и не забываем делать резервную копию.

1Убрать название у одной страницы

Находим в шаблоне такой участок кода (может быть несколько)

<b:if cond='data:post.title'>
здесь участок кода
</b:if>


Дополняем их, чтобы код выглядел так:

<b:if cond='data:blog.url != "Адрес_страницы"'>
<b:if cond='data:post.title'>
здесь участок кода
</b:if>
</b:if>


 Кому - то, может? понадобиться убрать названия всех страниц

2. Как убрать название у всех страниц (постов в том числе)

Опять нужен тот же код (или несколько)

<b:if cond='data:post.title'>
здесь участок кода
</b:if>


В этом случае мы его просто закомментируем, аналогично тому, так закрывали коды виджетов в стате убрать всё лишнее с главной страницы.

Комментируем их, чтобы код был таким

span style="color: #cc0000;"><!-- <b:if cond='data:post.title'>
здесь участок кода
</b:if>-->


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

❗Возможно пригодится - правильный адрес статичных страниц.

Всем добра и до встречи  .

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

Во - первых оно обратит внимание читателя и в то же время его легко можно закрыть одним нажатием кнопки если уж очень "режет глаз".

выделить нужный блок цветом с кнопкой закрыть

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

Скопируйте приведённый ниже код и установите его в этом редакторе для просмотра.

Код

<style>.note{padding:2px;margin:0;font-size:16px;font-weight:400;position:relative;color:black}
.note p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400;background:rgba(255,255,255,.8)}
.note .close-note{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:.3;cursor:pointer}
.note b,.note a{font-weight:500;}
.note .close-note:hover{opacity:1}
.note .close-note:focus,.note .close-note:active{outline:0}
.gradient{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93', endColorstr='#f84272', GradientType=1 )}
</style>
<div class='note gradient'>
  <p>здесь любой ваш текст <b>и здесь ваш текст</b></p>
<div aria-label='Close Note' class='close-note' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>


Можно отрегулировать padding:2px;margin:0 отступы, чтобы выровнять расстояние.

Можно изменить свойство gradient, выделенное зелёным, в зависимости от вашего дизайна. Есть замечательный генератор градиент фона. https://www.colorzilla.com/gradient-editor/

Чтобы изменить цвет фона, пожалуйста, замените background:#2b0c93 на возможные

.red{background:#E53935}
.pink{background:#D81B60}
.purple{background:#8E24AA}
.indigo{background:#3949AB}
.blue{background:#1E88E5}
.cyan{background:#00ACC1}
.teal{background:#00897B}
.green{background:#43A047}
.yellow{background:#FDD835}
.orange{background:#FB8C00}
.brown{background:#6D4C41}
.grey{background:#546E7A}

Если возникнет идея и захочется в сообщении выделить несколько блоков разным цветом и в разных местах поста, тогда в каждом следующем варианте замените в коде везде note на note1, note2, note3 и  так далее.  И значение цвет background, соответственно. Я выше привела некоторые из них. 

Сейчас, когда определились с местом положения блока и фоном, устанавливайте код в гаджет HTML/JavaScript в любом месте макета блога. Или же в теле поста в нужном месте, перейдя в режим HTML.

Если нужно без разрыва сделать разноцветные блоки, как на первой картинке, код HTML можно прописать так

<style>
.note{padding:2px;margin:0;font-size:16px;font-weight:400;position:relative;color:black}
.note p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400;background:rgba(255,255,255,.8)}
.note .close-note{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:.3;cursor:pointer}
.note b,.note a{font-weight:500;}
.note .close-note:hover{opacity:1}
.note .close-note:focus,.note .close-note:active{outline:0}
.gradient{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93', endColorstr='#f84272', GradientType=1 )}
.red{background:#E53935}
.pink{background:#D81B60}
.purple{background:#8E24AA}
.indigo{background:#3949AB}
</style>

<br />
<div class="note gradient">
Здесь блок с классом note gradient<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note red">
Здесь второй блокс классом note red<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note pink">
Здесь третий блок с note pink<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note purple">
Блок с note purple<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note indigo">
И блок с note indigo<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>


Так же скопируйте код и просмотрите в редакторе, ссылка на который выше.

Вот такие разноцветные блоки (окно для заметок, важных моментов, объявлений) можно легко и оригинально использовать на своих блогах.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email



Пользовательский поиск