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

гаджет подписчиков

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

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

Код абсолютно простой, с лёгкими настройками. Устанавливается в гаджет HTML/JavaScript или в сообщение блога.

<div class="sidebarContainer" id="sidebarSubscribe">
            <a target="_blank" href="http://feeds.feedburner.com/shpargalochkiru" class="subscribeSidebarBox" id="subscribeRSS">
                <span class="icon"></span>
                <span class="title">подписано уже</span>
                <span class="count">500+
            </span></a>
       
            <a target="_blank" href="https://twitter.com/VikserV" class="subscribeSidebarBox" id="followTwitter">
                <span class="icon"></span>
                <span class="title">друзья в  Twitter</span>
                <span class="count">100+
            </span></a>
       
            <a target="_blank" href="https://www.facebook.com/viktoria.barad" class="subscribeSidebarBox" id="likeFacebook">
                <span class="icon"></span>
                <span class="title">подписчиков в facebook</span>
                <span class="count">200+
            </span></a>  </div>

<style>
#sidebarSubscribe {
    padding: 25px 30px 20px;
}
a.subscribeSidebarBox {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 60px;
    margin-bottom: 8px;
    position: relative;
    width: 265px;
}
#sidebarSubscribe span {
    color: #6E6E6E;
    display: block;
    padding: 3px;
    position: absolute;
    text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .icon {
    background: url("http://4.bp.blogspot.com/-nJyhKwJmZzk/VOiMC_4rKDI/AAAAAAAAG1w/u3P9aicP4LI/s1600/blogolect.png") no-repeat scroll 0 0 transparent;
    height: 45px;
    left: 10px;
    top: 10px;
    width: 55px;
}
#sidebarSubscribe .title {
    font-size: 12px;
    left: 70px;
    top: 8px;
}
#sidebarSubscribe .count {
    font: bold 18px/28px 'Myriad Pro',Tahoma,Arialm,sans-serif;
    left: 70px;
    top: 23px;
}
#subscribeRSS .icon {
    background-position: 0 -50px;
}
#followTwitter .icon {
    background-position: -100px -50px;
}
#likeFacebook .icon {
    background-position: -200px -50px;
}
a.subscribeSidebarBox {
    background-color: #FAFAFA;
    border-radius: 10px 10px 10px 10px;
}
a.subscribeSidebarBox:hover {
    background-color: #FDFDFD;
}

a, a:active {
   text-decoration: none;
}

</style>


В коде я дала ссылки на RSS-канал и свою страницы в Twitter и Facebook. В строках, отмеченных голубым цветом, вставьте адреса своих страниц в социальных сетях. Можно  убрать не нужные вам. Или подобрать свои иконки и добавить ссылки на другие сети - канал You Tube, Pinterest, Инстаграмм, ВК и другие.

Для этого добавляйте в первом коде вот такой фрагмент

<a target="_blank" href="https://www.facebook.com/viktoria.barad" class="subscribeSidebarBox" id="likeFacebook">
                <span class="icon"></span>
                <span class="title">подписчиков в facebook</span>
                <span class="count">200+
            </span></a>


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

Не менее интересно выгладят выскальзывающие кнопки социальных сетей

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

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

Удачи всем.

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

Введите Ваш email


Привет, друзья. Как говорится, блогеру всегда есть чем поделиться. Мой отзыв о приложении 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


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