Друзья, приветствую вас. На днях публиковала пост и обратила внимание. как изменилась функция репоста сообщения или поделиться Твиттере постом. Кому как удобнее. Мне очень понравилось обновления. Прямо полный функционал.

 Вот посмотрите

окно репоста в твиттер

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

редактирование фото в твиттере

Если нажать на значок кисточки справа, то откроется окно редактора картинки ещё с дополнительными функциями. 

Можно выделить нужную часть, используя бегунок в низу. Увеличить или уменьшить изображение там же. А в самом верху ещё и опция добавить описание к картинке (ALT).
При нажатии на среднюю иконку, появляется функция создания опроса. Замечательно же. Много смайликов. И ещё с помощью последней кнопки можно задать расписание публикации поста. 

запланированный твитт

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

Самое интересное то, что после нажатия на кнопку ТВИТТНУТЬ мы попадаем на свою главную страницу в twitter, со всеми её функциями. Я аплодирую разработчикам. 

новые функции для публикации поста в твиттере из блога


Очень удобно и всё прямо из блога. Обязательно попробуйте у себя или можете твитнуть мой пост ( чем буду весьма благодарна) нажав на кнопку Твиттер в конце поста. Думаю, что вы тоже оцените эти новшества. 

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

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

введите пожалуйста свой email :

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


На картинке я показала как выглядел navbar у меня на тестовом блое. Чтобы увидеть, как он смотрится в самом низу, перейдите на этот блог по ссылке ниже и прокрутите до конца страницы


Как сделать

Заходим в панель администратора
Выбираем вкладку Тема
С помощью клавиш CTRL+ F ( читаем эту статью), находим строку ]]></b:skin>
Прямо над ней вставляем следующий код

#navbar-iframe {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
}


Сохраняем изменения. Наш navbar переместился в самый низ страницы.

И сделать просто, и панелька на месте, и не как у всех.

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

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

введите пожалуйста свой email :

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


При нажатии на пункт списка, появляется более подробное описание. Я для примера сделала некоторые пункты меню с описанием и переходом на нужную страницу. Здесь размещать можно всё. Например, сделать вопрос - ответ. Или создать кулинарное меню, разместить загадки и ответы. Масса вариантов. 

Посмотрите на тестовом блоге, как это работает.

Даю код целиком и разберём его ниже

<div id="page-wrap">
<h1>
Некоторые пункты меню </h1>
<br />
<br />
<section class="slide-up-boxes">
    <a href="http://www.shpargalochki.ru/p/blog-page_1.html">
     <h5>
О чём блог</h5>
<div>
Все статьи опубликованные статьи блога вы можете посмотреть здесь </div>
</a>
    <a href="http://www.shpargalochki.ru/p/blog-page_84.html">
     <h5>
Вопрос - ответ</h5>
<div>
На этой странице вы сможете задать вопросы автору блогу</div>
</a>
    <a href="http://www.shpargalochki.ru/p/blog-page_34.html">
     <h5>
Связь с автором</h5>
<div>
Если возникла необходимость связаться с автором блога , то вам сюда</div>
</a>
   </section>
  </div>
<style>
* { margin: 0; padding: 0; }

body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; }

#page-wrap { width: 370px; margin: 60px auto; }

h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }

p { margin: 0 0 20px 0; }

a { text-decoration: none; }

.slide-up-boxes a {
  display: block;
  height: 130px;
  margin: 0 0 20px 0;
  background: rgba(192, 192, 192, 0.5); /*цвет фона блоков */
  border: 4px solid #556B2F;/*размер и цвет рамки */
  height: 65px;
  overflow: hidden;
}

/* стили для пунктов аккордеона */

.slide-up-boxes h5 {

  color: #333;
  text-align: center;
  height: 65px;
  font: italic 18px/65px Georgia, Serif;
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

.slide-up-boxes a:hover h5 {
  margin-top: -65px;
  opacity: 0;
}

/* стили всплывающих блоков */
.slide-up-boxes div {
  position: relative;
  color: blak;
  font: 12px/15px Georgia, Serif;
  height: 45px;
  padding:10px ;
  opacity: 0;
  -webkit-transform: rotate(6deg);
  -webkit-transition: all 0.4s linear;
  -moz-transform: rotate(6deg);
  -moz-transition: all 0.4s linear;
  -o-transform: rotate(6deg);
  -o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
  opacity: 1;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url() 17px 17px no
-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url() 21px 10px no-
repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url() 14px 16px no-
repeat; padding-left: 133px; }
</style>


Готовый код можно установить и в сообщении блога в формате HTML, и в гаджет HTML/JavaScript ( как вы видели на моём тестовом).
При необходимости добавляйте ещё секции вида

  <a href="http://www.shpargalochki.ru/p/blog-page_1.html">
     <h5>
О чём блог</h5>
<div>
Все статьи опубликованные статьи блога вы можете посмотреть здесь </div>
</a>


Я в самом коде пометила комментариями, что можно изменить под ваш дизайн.
В первом коде div помечены ссылки на страницы, куда будет осуществляться переход. Если это не предполагается, просто уберите эти строки.
В тегах h5 прописываем свои пункты. Соответственно и в div нужный текст.
В последней части коды, которая отмечена серым, попробуйте вставить вместо фонов картинки в url( ) .

Вот такой необычный аккордеон со слайд эффектом в итоге получаем.

Спасибо за внимание, всем добра и до встречи.

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

введите пожалуйста свой email :

Доброго времени суток, друзья. Как создать кнопку «Follow» , которая является одним из важных виджетов, устанавливаемых на блоге. Кнопка «Follower» BLOGGER называется функцией «стать постоянным читателем (присоединиться к этому блогу)».

кнопка подписки

Пост подкорректирован и немного изменён.

Метод, который мы будем  использовать для создания кнопки «подписка», заключается в использовании ссылки «Подписаться», которая есть у виджета ПЧ (присоединяется к этому сайту), поэтому кнопка будет более удобной и простой в применении.

Первое, что нужно сделать - создать ссылку на блог follow + id, см. Пример ниже;

https://www.blogger.com/follow.g?blogID= 7438819944636028340


Идентификационный номер, выделенный жирным шрифтом, представляет собой номер идентификатора моего блога. Измените его на идентификатор вашего  блога. Чтобы получить или увидеть «идентификатор» войдите в админпанель  блогера, выберите нужный блог, если у вас их несколько. Затем посмотрите на адресную строку вашего блога.


Создали свою ссылку и пока сохраните её в блокноте или черновике. Рассмотрим варианты её размещения.

Как установить кнопку присоединиться в верхней части колонки комментариев

Идём во вкладку тема и находим строку ]]></b:skin> и над ней устанавливаем код

.comments .rightx{font-size:12px;position:absolute;$endSide:0;top:0;line-height:22px;max-height:22px;padding:4px 0 0 4px;margin-$endSide:0;background-color:#333333;overflow:hidden;display:block;}
.comments .rightx a{display:inline-block;min-width:75px;margin-$endSide:0;background-color:#333333;text-align:center;color:#ffffff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;text-decoration:none;text-transform: uppercase;}


Затем там же в шаблоне ищем строку

<h4 id='comment-post-message'>


 или

<h4 id='comment-post-message'><data:postCommentMsg/></h4>


 и заменяем одну из них на

<h4 id='comment-post-message'>
<span class='subscrnya'><data:postCommentMsg/></span>
<span class='rightx'><b:if cond='data:top.commentLabel'>
<a href='https://www.blogger.com/follow.g?blogID=7438819944636028340'>стать читателем блога</a>
  </b:if>
  </span>
 </h4>


<h4 id='comment-post-message'> или <h4 id='comment-post-message'><data:postCommentMsg/></h4> это код родных комментариев Блоггер включенных по умолчанию. 

Сохраните шаблон. Вот так примерно это выглядит

подписка


Добавить кнопку в меню навигации «Follow». Просто добавим ссылку в пункт меню.

Так примерно

<nav class='naviy' id='nav'>
<ul class='sf-menu' id='menunav'>
<li><a href='add_url'>Об авторе</a></li>
<li><a href='add_url'>Содержание</a></li>
<li><a href='https://www.blogger.com/follow.g?blogID=7438819944636028340'>Форма подписки</a></li>
</ul>
</nav>


Живой пример на моём блоге дела домашние в меню под шапкой. Можете попробовать, чтобы увидеть, как это будет выглядеть при нажатии.

Добавить кнопку - ссылку подписаться в сайдбар

<button onclick="window.location='https://www.blogger.com/follow.g?blogID=7438819944636028340'" style="background-color: orange; color: white; height: 30px; width: 201px;"><b>Присоединиться к блогу</b></button>


Добавить кнопку стать постоянным читателем в сообщении блога

В любом месте сообщения блога, переходим в режим HTML и вставляем код


<a href="https://www.blogger.com/follow.g?blogID=7438819944636028340" target="_blank"><button><b>подписка</b></button></a>




Уберите теги <button>...</button> останется только ссылка.

Или такая кнопка. Просто взяла вариант из сайдбара.



В последнем варианте можно сделать свою собственную кнопку - картинку. Подробнее здесь. А уж мотивирующий к подписке текст, придумайте сами.

Одним словом, вариантов много. И мимо интересной кнопки, точно не пройдут мимо. Включаем фантазию, а установка кнопки дело совсем не сложное. Можно и гаджет ПЧ оставить и ещё кнопочку куда - нибудь подключить. Хуже не будет.



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

введите пожалуйста свой email :

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

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

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

обновлённый редактор в блоге


Тут всё понятно. Те же функции с форматированием текста, цвета, выравниваем и прочим. Обратите внимание на кнопки в самом верху справа. Особенно на вот эти самые первые стрелочки < >.  Если нажать на них , то попадаем в режим HTML.

новый редактор Блоггер

Тут уже нет привычных кодов <div dir="ltr" style="text-align: left;" trbidi="on">  о которых я писала в этом сообщении. Они позволяли переводить ваш блог на такие языки как арабский, сирийский иврит и другие, которые читаются справа налево. Сейчас вы сами можете это задать (или нет) в новых настройках. Для этого нажмите на три кнопки ДОПОЛНИТЕЛЬНО в верху редактора. Немного о функциях и что мы здесь имеем

создание таблиц в Блоге

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

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


И ещё одно новшество. Вставка видео с компьютера и YouTube за считанные минуты без установки кода в формате Html. Нажимаем на иконку видео и тут же находим нужный ролик. Выбираем и жмём ВСТАВКА и вуаля...

вставка видео в новом редакторе блога

Для начинающих блоггеров очень удобно. Однако вставить видео с  Фейсбука и встроить ролик из других социальных сетей придётся старым способом. 

А так с боку все окончательные настройки сообщения. В верхне части те же функции просмотра, поправки и публикации поста. 

Ну , как - то так. Есть ещё не значительные изменения, но там всё понятно. Нужно посидеть и попробовать все опции у себя в черновике. 

Всем добра и здоровья. 

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

Введите Ваш email


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