Какая система комментариев лучше Cackle или Disqus

Какую форму для комментариев лучше всего использовать на сайте - блоге Cackle или Disqus.

Очень часто вебмастера и блогеры задаются вопросом, какую же форму комментирования устанавливать на свой сайт или блог. На примете две самые популярные системы комментариев Cackle и Disqus. Первая платная от 100 до 600 рублей в месяц, вторая полностью бесплатная. При этом функции обеих форм почти одинаковые, особых разрывов нет. Вот только Cackle позволяет оставлять комментарии тем посетителям у которых есть аккаунты в таких соцсетях, как Вконтакте, Одноклассники, Мой мир, Яндекс, Google+, Facebook, Twitter и другие. Тогда, как Disqus позволяет это делать лишь тем, кто зарегистрирован в Twitter, Google+, Facebook или же непосредственно в самом сервисе disqus. Конечно cackle в этом плане берет верх, это с одной стороны, но с другой стоит посмотреть на статистику, а она такова, что почти каждый владелец аккаунтов соцсетей Вконтакте, Одноклассники, Мой Мир имеет аккаунт в одной из перечисленных социальных сетей нужных для работы с disqus. Так что единственный козырь, которым якобы владеет cackle превращается в пустышку. Исходя из этого особой разницы между этими системами нет, а если ее нет, тогда зачем использовать ту, которая платная, если можно воспользоваться бесплатной. Попробуйте обратиться в службу техподдержки cackle ответа вы будете дожидаться около двух недель, а то и дольше. В общем для себя я уяснил, что лучше всего использовать форму комментариев от Disqus - это эффективно и бесплатно.

Как привлечь пользователей на сайт


Как привлечь пользователей (посетителей) на сайт или блог при помощи социальных сетей.

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

К примеру берем популярнейшую соцсеть Вконтакте. Все знают, что здесь обитает масса народу и в основном эти массы кучкуются в разных сообществах. Так вот, нам нужно завести страницу вконтакте после загрузить на аватарку скажем фото, которое захочет рассмотреть поближе каждый к примеру красивую девушку или красивого парня, затем на своей стене мы размещаем ссылку с нашего сайта на какую-то интригующею новость или статью, после этого можно зайти в сообщество где обычно зависает много людей и где комментарии к постам открыты. Здесь мы выбираем любой пост не очень старый, желательно самый свежий и комментируем его, желательно как-то осмысленно (умные люди так же привлекают к себе внимание) в общем уж как сможете. Фото должно сделать свое дело, как это происходит жертва видит красивое фото, открывает вашу страницу, смотрит его и заодно смотрит, что у вас на стене, переходит по ссылке на ваш сайт и там уже осуществляет какие-то другие действия, вот такая цепная реакция. С помощью этого метода за день, мне удавалось привлечь на свой сайт более тысячи посетителей. Можно выбрать много сообществ и по очереди оставлять там комментарии, естественно чем больше комментариев, тем больше посещений. И еще один важный факт, не постите ссылки на свой сайт в этих комментариях иначе ваш аккаунт забанят, как в самой группе так и Вконтакте.

Палитра цветов html

HTML генератор палитры цветов html

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

1 вариант









2 вариант
  • #5C97BF
  • #4B77BE
  • #1F3A93
  • #2574A9
  • #67809F
  • #34495E
  • #3A539B
  • #1E8BC3
  • #6BB9F0
  • #22313F
  • #336E7B
  • #19B5FE
  • #89C4F4
  • #2C3E50
  • #3498DB
  • #22A7F0
  • #94E0EE
  • #52B3D9
  • #59ABE3
  • #26A65B
  • #1E824C
  • #00B16A
  • #2ABB9B
  • #4DAF7C
  • #03A678
  • #26C281
  • #019875
  • #3FC380
  • #16A085
  • #2ECC71
  • #C5EFF7
  • #C8F7C5
  • #049372
  • #36D7B7
  • #66CC99
  • #1BA39C
  • #1BBC9B
  • #65C6BB
  • #BFBFBF
  • #ABB7B7
  • #DADFE1
  • #95A5A6
  • #C5DCE2
  • #BDC3C7
  • #EEEEEE
  • #D2D7D3
  • #F0E2C5
  • #EB9532
  • #E67E22
  • #F27935
  • #F9BF3B
  • #F7CA18
  • #F9690E
  • #F39C12
  • #D35400
  • #F4D03F
  • #F5AB35
  • #EB974E
  • #F2784B
  • #F4B350
  • #E87E04
  • #E74C3C
  • #CF000F
  • #C0392B
  • #D64541
  • #EF4836
  • #96281B
  • #D91E18
  • #E26A6A
  • #FF0000
  • #F22613
  • #E08283
  • #9B59B6
  • #8E44AD
  • #BE90D4
  • #BF55EC
  • #9A12B3
  • #913D88
  • #722D6A
  • #740A4E

Виджет последние комментарии Disqus

Установить на сайт или блог виджет последние комментарии Disqus

Подходит для любой платформы, будь то WordPress, Joomla, Blogger и т.д..

Тема Disqus пошла, как по маслу. Ну все таки самая популярная форма комментариев. И с тех пор, как она начала сбрасывать с пьедестала остальные формы комментариев, ее стали всячески приспосабливать для разных платформ. В нашем случае это платформа blogger. Изначально для формы комментариев blogger состряпали виджет последних комментариев. Это существенно упростило работу блогеров, потому как, чтобы посмотреть нету ли на блоге новых комментариев уже не нужно было открывать админ панель. Но, если у вас в настройках выбрана функция премодерации комментариев, в таком случае этот виджет вам не нужен. Разве что вы ставите его для своих читателей. В общем найти такой виджет для blogger проблем не составит, а вот для disqus уже совсем другое дело. Пересмотрел и протестировал я много разных виджетов и вот наконец выбрал один из лучших вариантов. Единственный минус (это относиться ко всем подобным виджетам disqus) когда посетитель вашего сайта оставляет комментарий, в этом виджете он появляется минут так примерно через пять. Судя по всему из-за длительной обработки на сервере. Ну в общем минус не сильно значительный, можно переварить.

Итак для установки на сайт или блог виджета последние комментарии disqus, нужно в разделе Дизайн - Добавить гаджет - HTML\Javascript - в нем вставляем код:

<script src='http://unique-disqus.disqus.com/recent_comments_widget.js?num_items=5&amp;hide_avatars=0&amp;avatar_size=40&amp;excerpt_length=100' type='text/javascript'/>

Меняете unique-disqus на название вашей формы комментариев, которое вы задавали при ее создании. Сохраняете гаджет.

Так же смотрите аналогичный виджет для комментариев Blogger

Комментарии Disqus не отображаются в браузере Internet Explorer

Комментарии Disqus не работают в браузере Internet Explorer. Решение проблемы.

Для начала дорогие вебмастера и блогеры вопрос на засыпку: Какой браузер самый популярный на планете? Если вы ответили Internet Eplorer тогда это абсолютно верный ответ. Лично я не вникал в подробности почему именно он. Мне кажется это из-за того, что браузер IE изначально встроен в операционную систему Windows и большинство домохозяек он вполне устраивает. Это лично мое мнение, если оно ошибочно можете поправить меня в комментах.

Что-то я немного отдалился от главной темы. В общем много вебмастеров и блогеров использующие на своих сайтах или блогах форму комментариев disqus часто сталкиваются с проблемой ее отображения в браузере Internet Explorer. И большинство из них считают, что проблема именно в браузере мол, чтобы комментарии отображались нужно обновить сам браузер. Но здесь проблема не в самом браузере, а в ваших сайтах и блогах. Чтобы исправить эту ошибку, вам нужно установить в свои шаблоны специальный плагин, вернее мета тег. Для этого откройте редактор HTML и сразу после значения <head> вставьте код:

<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>

После этого сохраните настройки и проверьте появились ли комментарии disqus в браузере IE.

17 адаптивных Шаблонов для blogger, коллекция 2016 года

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

Адаптивные шаблоны для Blogger 2016


Sora Buzz 
Sora Buzz бесплатный шаблон для bloggger 2016
Demo
Download
С недавних пор начал замечать, что темы разных веб-дизайнеров все чаще и чаще стали походить друг на друга. Неужто ли появились проблемы с идеями в этом плане. Sora Buzz, очень напоминает мне шаблон который уже есть в нашей коллекции, его можно найти на этой же странице чуть ниже, называется он Socio Viral. Не то, чтобы они были один в один, но все же явное сходство заметно невооруженным глазом. В общем наш новичок по своему уникален, так что давайте познакомимся с ним поближе. Сейчас в обществе блогеров жарко обсуждается новый стиль, которому приписывают свойство вирусного распространения информации. Не стоит пугаться никаких вирусов там нет, просто один из дизайнеров вкинул идею, а остальные поддержали вот и родился новый стиль.  Насколько я понял, такая шумиха поднялась из-за добавления большего количества кнопок поделиться в социальных сетях в остальном все, как обычно.



Value
Value бесплатный шаблон для blogger blogspot 2016 года
Demo
Download
Уже знакомая нам тема для blogger, правда немного переделанная, но не будем углубляться в прошлое. Посмотрим, какие возможности он может предоставить на данный момент. Value создан для электронной коммерции в основном для мультипликационной тематики. Полностью соответствует нынешнему развитию сообщества, с минималистским дизайном, который еще лучше будет фокусировать внимание посетителей на контенте. Сборка даст не малую фору вашему веб-ресурсу. Его дизайн поможет творческим компаниям представить свою продукцию самым креативным способом. Из выше описанного можно сделать один вывод, Value действительно заслуживает права находиться в этой коллекции.



AdMag
Ad Mag бесплатный шаблон для blogger
Demo
Download 
AdMag это простой и современный от части журнальный шаблон для blogger (blogspot). С его помощью вы можете более чем элегантно продемонстрировать своим посетителям статьи, фотографии, видео и много другое. Admag создавалась с большим вниманием ко всем ее деталям. Дизайн шаблона на высшем уровне, его качество видно сразу и это способствует достижению поставленной перед ним цели. Любителям журнальных типов шаблонов с широкими полотнами должно понравится. Правда любителям визуальных эффектов найти их здесь не удастся, поскольку их почти нет, зато предостаточно других интересных вещей.



Socio - Viral & Buzz
Socio - Viral & Buzz Responsive Blogger Template
Demo
Download
Примечательно, что Socio выполнен в довольно таки интересном плане. Неплохая прорисовка всех элементов, яркие цвета плюс не мало визуальных эффектов. Содержание контента выглядит презентабельно и на мой взгляд вполне удобно для читателей. Веб-дизайнер добавляет, что Socio очень гибок в использовании. По SEO оптимизации упоминать не буду поскольку шаблон бесплатный, а это значит, что не все так гладко. Для простого пользователя тема более чем добротная. Сообщения содержат в себе переключатель комментариев. Всего можно насчитать три формы комментариев Blogger, Disqus и Facebook.



Astonish

Demo \ Download
Astonish является одним из самых современных, чистых и креативных. Творческий и уникальный стиль с фантастическим слайдером, многочисленные почтовые форматы и отличные промо-блоки будут привлекать новых посетителей. Вы сможете внести новую жизнь в свой блог. Просто дайте своему творению немного Astonish. Полностью адаптивный, подходит для любого размера дисплея от низшего к более высоким разрешением и поддерживает все современные браузеры. Сделайте свой блог источником вдохновения для других людей.



DreamLine


Demo \ Download  \ Скачать шаблон на русском
Dreamline адаптивный шаблон для blogger (blogspot), который способствует тому, чтобы ваш сайт отлично смотрелся на смартфонах и планшетах, так же хорошо, как он выглядит на настольных устройствах. Короче говоря этот Dreamline совместим со всеми устройствами. Адаптивные и мобильные дружественные темы блоггер являются наиболее важными показателем вебресурса в результатах поиска.



Palki 2

Demo \ Download
Palki2 является адаптивным и SEO Оптимизированным бесплатным шаблоном blogger. Мы всегда сосредоточены на поисковой оптимизации. Вот почему развивать SEO дружественный потенциал является для нас одним из самых важных приоритетов. Мобильный и дружелюбный, важный фактор, который тоже влияет на SEO результат. Таким образом, ваши сайты или блоги будут использовать высокую выполняемую мобильную версию.



Bolina


Demo \ Download
Болина это первая тема Blogspot, которая работает исключительно на сокращенных кодах. Она идеально подходит для ресурсов с тематикой путешествия, фотографии, технологии, личные, новостные сайты, сайты моды. Bolina поставляется с тремя различными демо-макетами. Все, что вам нужно сделать это выбрать те, которые лучше подходят для вашего сайта. Bolina адаптируется с html5, что делает его динамичным, SEO дружественным c удивительным дизайном. Он имеет такие функции, как заранее, сокращенные коды, автоматический слайдер и динамические макеты домашней страницы. Все эти характеристики делают Болину уникальным и профессиональным. Наряду с этим, Болина кодируется с умом, поэтому вы можете настроить эту тему, чтобы разработать свой собственный дизайн для сайта.


Moveone

Demo \ Download
Очередная новинка, которая потрясла общество блоггеров. Moveone абсолютно универсален, он может использоваться, как Landing Page, как блог и журнальный сайт. Он создавался с одной целью подойти ко всем типам сайтов и блогов. Moveone обладает многими визуальными эффектами. Хорошо настроенная сео оптимизация и скорость загрузки всех элементов.



Life & Fashion
Demo \ Download
Думаю исходя из названия темы вы уже определили к каким тематикам она относиться . Но не спешите делать какие-то либо выводы на счет него, сперва нажмите кнопочку demo и внимательно осмотритесь по всех его сторонах. Life & Fashion это яркий и легкий, минималистический шаблон для blogger.



Jenny

Demo \ Download
Простой и без лишних мелочей. Заточен под стиль, моду, фотографии, портфолио. Просмотрев его можно понять, что Jenny создавался в основном для женских блогов. Очень простой и привлекательный шаблончик.



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



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



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



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



Fusion 
Fusion это элегантный и простой шаблон для blogger (blogspot) Он подходит для новостных сайтов или блогов, включая такие тематики, как мода, технологии, спорт и др. Fusion на 100% адаптивный и совместим с большинством популярных браузеров. По словам разработчика в него добавлено несколько сео плагинов по-этому сео оптимизация Fusion намного лучше нежели остальных тем blogger.



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

HTML5 audioplayer для blogger

Установить на сайт или блог стильный аудио плеер (blogger - blogspot)

Честно говоря не знаю окажется этот виджет кому-то полезным или нет, но все же он имеет право на существование. Помню когда я только начинал работать с blogger мне был нужен подобный плеер, правда я так и не нашел его, но выкрутился другим путем. Теперь же у новичков больше возможностей. Что могу сказать по нашему аудиоплееру, в общем он довольно симпатичный, функциональность процентов на девяносто. Не совсем удобно закидывать в него свои любимые хиты, но возможно со временем это измениться. Работает он только на платформе blogger (blogspot).


Итак, сперва обсудим, как его добавить на свой сайт или блог, а затем, как перебрасывать в него аудиозаписи. Для добавления аудиоплеера можно создать либо новый гаджет (HTML\Javascript) или же новую страницу (сообщение) и переключится на вкладку HTML. После вставляете туда код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/SEOCIPS-musiccc.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-music.js" type="text/javascript"></script>
<style>
*,:after,:before { box-sizing:border-box; }
.pull-left { float:left; }
.pull-right { float:right; }
.clearfix:after,.clearfix:before { content:''; display:table; }
.clearfix:after { clear:both; display:block; }
.track { width:2px; margin-right:5px; background:rgba(0,0,0,0); transition:background 250ms linear; }
.track:hover,.track.dragging { background:#d9d9d9; background:rgba(0,0,0,.15); }
.handle { right:0; width:2px; background:#999; transition:width 250ms; background:rgba(255,255,255,.2); }
.mhn-player { width:360px; height:500px; padding:15px; position:relative; margin:55px auto 0; background:rgba(0,0,0,.9); box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21); }
.mhn-player .album-art,.mhn-player .album-thumb { background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MC4zMTNweCIgaGVpZ2h0PSI5MC4zMTNweCIgdmlld0JveD0iMCAwIDkwLjMxMyA5MC4zMTMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDkwLjMxMyA5MC4zMTMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMTkxOTE5IiBkPSJNNDUuMTU2LDBDMjAuMjE4LDAsMCwyMC4yMTcsMCw0NS4xNTZjMCwyNC45MzksMjAuMjE4LDQ1LjE1Niw0NS4xNTYsNDUuMTU2YzI0LjkzOSwwLDQ1LjE1Ni0yMC4yMTgsNDUuMTU2LTQ1LjE1NkM5MC4zMTMsMjAuMjE3LDcwLjA5NSwwLDQ1LjE1NiwweiBNMjIuMzk3LDc4Ljc1M2MwLDAtNS4yNzQtMy41NC03LjIyNS01Ljc4Yy0xLjk1MS0yLjI0LTMuOTc0LTQuNjk2LTMuOTc0LTQuNjk2TDI2LjAxLDU4LjE2MWw1Ljc4LDUuNzhsMC4zNjIsMC4zNjFMMjIuMzk3LDc4Ljc1M3ogTTQ1LjE1Niw2My4yMTljLTkuOTc2LDAtMTguMDYzLTguMDg3LTE4LjA2My0xOC4wNjNjMC05Ljk3NSw4LjA4Ny0xOC4wNjMsMTguMDYzLTE4LjA2M2M5Ljk3NSwwLDE4LjA2Myw4LjA4NywxOC4wNjMsMTguMDYzQzYzLjIxOSw1NS4xMzIsNTUuMTMyLDYzLjIxOSw0NS4xNTYsNjMuMjE5eiBNNjQuMzAzLDMyLjUxM2MwLDAtMC42NjItMS4yMDQtMi4xNjctMi44OWMtMS41MDUtMS42ODYtMy45NzQtMy45NzQtMy45NzQtMy45NzRsMTAuMTE1LTE0LjQ1YzAsMCwyLjQwOCwxLjc0Niw0LjY5NiwzLjYxMmMyLjI4OCwxLjg2Nyw2LjE0MSw3LjIyNSw2LjE0MSw3LjIyNUw2NC4zMDMsMzIuNTEzeiBNNDUuMTU2LDQxLjE4MmMtMi4xOTUsMC0zLjk3NCwxLjc3OS0zLjk3NCwzLjk3NGMwLDIuMTk1LDEuNzc5LDMuOTc0LDMuOTc0LDMuOTc0YzIuMTk1LDAsMy45NzQtMS43NzksMy45NzQtMy45NzRDNDkuMTMsNDIuOTYxLDQ3LjM1MSw0MS4xODIsNDUuMTU2LDQxLjE4MnoiLz48L2c+PC9nPjwvc3ZnPg==) no-repeat center / 50%; }
.mhn-player .album-art { width:330px; height:330px; overflow:hidden; position:relative; border:1px solid #000; }
.mhn-player .album-art img { width:100%; display:block; }
.mhn-player .album-art:before { top:30px; left:50%; width:220px; content:'music'; font-size:72px; font-weight:600; position:absolute; margin-left:-100px; color:rgba(255,255,255,.4); }
.mhn-player .album-art:after { top:0; left:0; content:''; width:inherit; height:inherit; position:absolute; background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,1)); }
.mhn-player .album-art img { width:100%; position:relative; }
.mhn-player .album-art.blur img { -webkit-filter:blur(3px); -moz-filter:blur(3px); filter:blur(3px); }
.mhn-player a { color:inherit; text-decoration:none; }
.mhn-player .play-list { top:15px; left:15px; right:15px; display:none; bottom:245px; overflow-y:auto; position:absolute; width:auto !important; background:rgba(0,0,0,.4); padding-right:1px !important; }
.mhn-player .play-list a { color:#ccc; display:block; overflow:hidden; padding:6px 10px; white-space:nowrap; text-overflow:ellipsis; transition:all .4s ease-in-out 0s; }
.mhn-player .play-list a:hover { background:rgba(255,255,255,.2); }
.mhn-player .play-list a.active { color:#2ecc71; }
.mhn-player .play-list .album-thumb { width:35px; height:35px; overflow:hidden; margin-right:10px; border:1px solid #666; }
.mhn-player .play-list .album-thumb img { width:100%; display:block; }
.mhn-player .play-list .songs-info { max-width:240px; text-shadow:0 2px 2px #000; }
.mhn-player .play-list .songs-info .song-title { font-size:16px; }
.mhn-player .play-list .songs-info .songs-detail { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.mhn-player .current-info { left:30px; right:30px; color:#ccc; bottom:160px; margin-left:-15px; margin-right:-15px; position:absolute; text-shadow:0 2px 4px #000; }
.mhn-player .current-info>div { margin-top:10px; }
.mhn-player .current-info .song-title { font-size:24px; margin-top:10px; font-weight:400; }
.mhn-player .current-info .fa { min-width:30px; font-size:18px; text-align:center; font-weight:normal; }
.mhn-player .controls { margin-top:30px; position:relative; }
.mhn-player .controls .toggle-play-list { right:5px; width:40px; color:#ccc; height:40px; bottom:100px; border-radius:50%; line-height:40px; text-align:center; position:absolute; background-color:crimson; }
.mhn-player .controls .fa-pp:before { content:'\f04b'; }
.mhn-player .controls .active .fa-pp:before { content:'\f04c'; }
.mhn-player .controls .progress { height:1px; margin:15px 0; position:relative; background:#262626; }
.mhn-player .controls .duration { color:#ccc; font-size:14px; }
.mhn-player .controls .progress .bar { width:0; display:block; height:inherit; background:#bc3958; box-shadow:0 0 5px 0 #bc3958; }
.mhn-player .controls .action-button a { width:40px; height:40px; font-size:16px; margin-right:5px; border:2px solid; line-height:35px; border-radius:50%; text-align:center; display:inline-block; }
.mhn-player .controls .action-button a:hover,.mhn-player .controls .action-button a.active { color:#ccc; }
.mhn-player .controls .action-button a .fa { font-size:inherit; }
.volume { height:10px; width:100px; margin:0 10px; font-size:14px; cursor:pointer; display:inline-block; -webkit-appearance:none; background:transparent; }
.volume::-webkit-slider-runnable-track { height:.5em; background:#d8d8d8; border-radius:.25em; -webkit-appearance:none; }
.volume::-moz-range-track { border:none; height:.5em; background:#d8d8d8; border-radius:.25em; }
.volume::-ms-track { border:none; height:.5em; color:transparent; background:#d8d8d8; border-radius:.25em; }
.volume::-webkit-slider-thumb{-webkit-appearance:none; position:relative; margin:-.25em; border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-moz-range-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; cursor:ew-resize; border-radius:.5em}
.volume::-ms-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-ms-fill-lower,.volume::-ms-fill-upper { border-radius:5em; background:transparent; }
.volume::-ms-tooltip { display:none; }
.volume::-ms-fill-lower { background:#f05e7b; }
.volume::-webkit-slider-thumb { background:#dc143c; }
.volume::-moz-range-thumb { background:#dc143c; }
.volume::-ms-thumb { background:#dc143c; }
.volume::-webkit-slider-runnable-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume::-moz-range-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume[data-css="0"]::-webkit-slider-runnable-track{background-size:0% 100%}
.volume[data-css="0"]::-moz-range-track{background-size:0% 100%}
.volume[data-css="0.1"]::-webkit-slider-runnable-track{background-size:10% 100%}
.volume[data-css="0.1"]::-moz-range-track{background-size:10% 100%}
.volume[data-css="0.2"]::-webkit-slider-runnable-track{background-size:20% 100%}
.volume[data-css="0.2"]::-moz-range-track{background-size:20% 100%}
.volume[data-css="0.3"]::-webkit-slider-runnable-track{background-size:30% 100%}
.volume[data-css="0.3"]::-moz-range-track{background-size:30% 100%}
.volume[data-css="0.4"]::-webkit-slider-runnable-track{background-size:40% 100%}
.volume[data-css="0.4"]::-moz-range-track{background-size:40% 100%}
.volume[data-css="0.5"]::-webkit-slider-runnable-track{background-size:50% 100%}
.volume[data-css="0.5"]::-moz-range-track{background-size:50% 100%}
.volume[data-css="0.6"]::-webkit-slider-runnable-track{background-size:60% 100%}
.volume[data-css="0.6"]::-moz-range-track{background-size:60% 100%}
.volume[data-css="0.7"]::-webkit-slider-runnable-track{background-size:70% 100%}
.volume[data-css="0.7"]::-moz-range-track{background-size:70% 100%}
.volume[data-css="0.8"]::-webkit-slider-runnable-track{background-size:80% 100%}
.volume[data-css="0.8"]::-moz-range-track{background-size:80% 100%}
.volume[data-css="0.9"]::-webkit-slider-runnable-track{background-size:90% 100%}
.volume[data-css="0.9"]::-moz-range-track{background-size:90% 100%}
.volume[data-css="1"]::-webkit-slider-runnable-track{background-size:100% 100%}
.volume[data-css="1"]::-moz-range-track{background-size:100% 100%}
</style>



<br />
<div class="mhn-player">
<div class="album-art">
</div><div class="play-list">

 

<a class="play" data-album="Жанр" data-albumart="" data-artist="One tr" data-id="5" data-title="There do you go" data-url="https://sites.google.com/site/protewfdgd43/43546/7184ec3958ae.mp3" ></a>

<a class="play" data-album="Жанр" data-albumart="http://3.bp.blogspot.com/-Kw5Iu9dnGFE/VJjwLEwPZMI/AAAAAAAAB34/XezkYM46n6k/s1600/egoist.jpeg" data-artist="Название группы" data-id="1" data-title="название песни" data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/seocips-mp3-1.mp3" ></a>
    
<a class="play" data-album="Country song" data-albumart="http://3.bp.blogspot.com/_rSA9SVWw60w/SqslhK35_3I/AAAAAAAAI1g/69w9i9uh2QM/s400/AlanJackson-GreatestHits.jpg" data-artist="Alan Jackson" data-id="2" data-title="Remember When" data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/Remember%20When%20-%20Alan%20Jackson%20Lyrics.mp3"></a>

<a class="play" data-album="" data-albumart="https://1.bp.blogspot.com/-p9ZRXwsnxvc/Vei4zkJTo8I/AAAAAAAAU0s/_kiDrkQwuBE/s1600/Katy%2BPerry%2B%25E2%2580%2593%2BHits%2BCollection%2B%25282015%2529%2B320%2BKBPS.jpg" data-artist="Katy Perry" data-id="5" data-title="Roar" data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/08.%20Katy%20Perry%20-%20Roar.mp3"></a>
   

 </div>
<div class="audio">
</div>
<div class="current-info">
<div class="song-artist">
</div>
<div class="song-album">
</div>
<div class="song-title">
</div>
</div>
<div class="controls">
<a class="toggle-play-list" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-list-ul"></i></a>
    <br />
<div class="duration clearfix">
<span class="pull-left play-position"></span>
     <span class="pull-right"><span class="play-current-time">00:00</span> / <span class="play-total-time">00:00</span></span>
    </div>
<div class="progress">
<div class="bar">
</div>
</div>
<div class="action-button">
<a class="prev" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-step-backward"></i></a>
     <a class="play-pause" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-pp"></i></a>
     <a class="stop" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-stop"></i></a>
     <a class="next" href="https://www.blogger.com/blogger.g?blogID=1310113926037032348#"><i class="fa fa-step-forward"></i></a>
     <input class="volume" data-css="0.5" max="1" min="0" step="0.1" type="range" value="0.5" />
    </div>
</div>
</div>
</div>

Сохраняете гаджет или страницу и проверяете как работает плеер. На данный момент в нем находиться четыре композиции.
A class=''play'' - это начало кода каждого трека
Data-album - к какому стилю относиться песня поп, кантри, блюз, рэп и т.д.
Data-albumart - служит для добавления постера исполнителя.
Data-artist - название группы или исполнителя.
Data-title - название песни
Data-url - ссылка с помощью которой проигрывается композиция.

Так же читайте: Шрифт для сайта (блога) - плагин шрифтов

Первый шаг прошли теперь давайте разберем, как добавлять в аудиоплеер новые треки.
Для этого переходим по ссылке: sites.google.com здесь мы создаем сайт, заполняем строку: Укажите название сайта, проходим проверку капчи и жмем красную кнопку Создать. В появившемся окне вверху, с правой стороны кликаем по значку Создать страницу. После создания откроется новая страница, где нужно кликнуть по Добавить файлы и загружаем со своего компьютера нужный трек. После загрузки увидим свой трек, а напротив него с правой стороны значок в виде стрелки при клике по которой можно скачать трек, нам же нужно кликнуть по нему правой кнопкой мыши скопировать ссылку, она будет иметь примерно такой вид:
https://sites.google.com/site/skiseukdav4345/vayva/76b9ef6349fd.mp3?attredirects=0&d=1
в ней удаляем:
?attredirects=0&d=1
затем вставляем ссылку:
https://sites.google.com/site/skiseukdav4345/vayva/76b9ef6349fd.mp3
в значение Data-url сохраняемся и наслаждаемся любимыми композициями. 

Убрать ссылку автора в нижней части шаблона

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

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

Убрать эту ссылку можно несколькими путями и то не всегда они срабатывают. Первый, самый простой и не рекомендуемый, при помощи значения display: none; при помощи него можно скрывать любые элементы шаблона включая ссылки. Но это значение не рекомендуется использовать для текста в том числе и ссылок. Поисковые системы не в восторге от него и после этого ваш сайт скажем так будет не совсем просто отыскать в поисковике. Второй, последний, самый сложный и самый надежный способ это найти и удалить ссылку в редакторе HTML. Впрочем найти и удалить ссылку вовсе не сложно, сложно найти код из-за которого осуществляется редирект в случае удаления ссылки.

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

Адаптивные рекламные блоки Adsense


Прошло уже почти два года с тех пор, как компания Google представила адаптивные рекламные блоки своего детища Adsense для дружественных мобильных сайтов и блогов. До этого объявления Адсенс были синхронными с фиксированным размером. Такие опции значительно утруждали загрузку страниц, а на устройствах с разными разрешениями дисплея реклама обрезалась. Теперь же все рекламные блоки асинхронные, что позволяет страницам загружаться быстрее. Адаптивность конечно улучшена, но все же при ее срабатывании на сайте остается много свободного места и выглядит это не очень красиво.

На сегодняшний день есть новое решение, как сделать блоки еще более адаптивными, это касается вертикальных блоков, горизонтальные итак хорошо срабатывают. Для блоков размещенных в разделе Дизайн - Добавить гаджет - HTML\Javascript берем следующий код:



    <style type="text/css">
    .adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }

    @media (min-width:100px) { .adslot_1 { width:125px; height:125px; } }
    @media (min-width:180px) { .adslot_1 { width:180px; height:150px; } }
    @media (min-width:200px) { .adslot_1 { width:200px; height:200px; } }
    @media (min-width:250px) { .adslot_1 { width:250px; height:250px; } }
    @media (min-width:300px) { .adslot_1 { width:300px; height:600px; } }
    @media (min-width:336px) { .adslot_1 { width:336px; height:280px; } }
    @media (min-width:468px) { .adslot_1 { width:468px; height:60px; } }
    @media (min-width:728px) { .adslot_1 { width:300px; height:600px; } }

    </style>

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle adslot_1"
         style="display:inline-block;"
         data-ad-client="xxxxxxx"
         data-ad-slot="xxxxxx"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
     
Вставляете его в том же окошке где располагается ваш старый код адсенс. В новом коде вы можете заметить две строки со значением "хххххх" вместо них вам нужно вписать ID со своего старого блока. После этого старый код можно удалить. Еще один момент, если вы используете этот код дважды или даже трижды на своем сайте или блоге в таком случае, при втором добавлении, значение adslot_1 измените, вместо 1 пропишите 2. Если нужно и в третий раз добавить его вместо 1 пишите 3. В общем значение adslot должно быть уникальным иначе код не будет срабатывать в новых блоках.

Для блоков коды которых находятся в разделе Шаблон - Изменить HTML берем тот же код, но заточенный под редактор HTML:



    <style type="text/css">
    .adslot_1 { max-width: 300px; height: auto; margin:10px 0px; }

    @media (min-width:100px) { .adslot_1 { width:125px; height:125px; } }
    @media (min-width:180px) { .adslot_1 { width:180px; height:150px; } }
    @media (min-width:200px) { .adslot_1 { width:200px; height:200px; } }
    @media (min-width:250px) { .adslot_1 { width:250px; height:250px; } }
    @media (min-width:300px) { .adslot_1 { width:300px; height:600px; } }
    @media (min-width:336px) { .adslot_1 { width:336px; height:280px; } }
    @media (min-width:468px) { .adslot_1 { width:468px; height:60px; } }
    @media (min-width:728px) { .adslot_1 { width:300px; height:600px; } }

    </style>
    &lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;

    <ins class="adsbygoogle adslot_1"
         style="display:inline-block;"
         data-ad-client="xxxxxxx"
         data-ad-slot="xxxxxx"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

Его настраиваем по тому же примеру.

Valkyrie шаблон для blogger (blogspot)


Valkyrie адаптивный шаблон для blogger (blogspot) на русском языке.

Вот и первый шаблон в 2016 году. Честно говоря он должен был выйти где-то 19 декабря, но хотелось убрать все изъяны и сделать его идеальным. Valkyrie включает в себя несколько новых виджетов и современный адаптивный дизайн. Так же его особенность в том, что он имеет два сайдбара и при этом сохраняет достаточно высокую скорость загрузки. SEO оптимизация шаблона на уровне, поисковые системы несомненно подружатся с ним. Ну что же, давайте пройдемся по всем элементам от начала и до конца.

Главное меню (панель навигации) в наличии и включает в себя выпадающие ячейки. Ниже красуется статический слайдер избранных постов, отображается на главной странице. Сообщения блога располагаются в обычном порядке, имеют свойство выводит видео даже если в посте есть картинка. Постраничная навигация есть, может отображать неограниченное число сообщений. Переходим к сайдбарам. На всех страницах, кроме главной работает встроенный виджет последних новостей (лента новостей) обладает возможностью прокручивать все посты не отходя от кассы)).  Облако ярлыков в этот раз сделали светлым. Всплывающее поисковое окно. Новые, стильные кнопки социальных сетей. Ах да, наличие большего пространства дало возможность разместить более вызывающий виджет популярных сообщений. Еще одна замечательная новинка, плавающий виджет следующих и предыдущих постов. При наведении курсора на кнопку выезжает окно с заголовком поста. Для заголовков виджетов установили новый шрифт. И напоследок припаяли новый Lightbox созданный на jquery (кликните по картинке в посте и сами все поймете).

Чтобы настроить ленту новостей нужно в редакторе HTML найти ссылку http://kinohd720.blogspot.com/ и вместо нее вставить ссылку своего сайта.

Демо
Приобрести шаблон полная SEO оптимизация

Google webmaster tools повторяющиеся заголовки (теги title) и метаописания.

Google webmasters дублирующиеся заголовки (теги title) и метаописания. Как устранить проблему.

Не так давно я решил в очередной раз пройтись по сервису для вебмастеров Google Webmster Tools, чтобы посмотреть не возникло ли там каких либо неполадок. В общем все было отлично за исключением нескольких пунктов.  При просмотре раздела: Вид в Поиске - Оптимизация HTML я обнаружил не совсем приятное известие. Система оповестила меня, что заголовки некоторых постов повторяются (дублируются). То же самое происходило с несколькими метаописаниями. Какие последствия могут быть в связи с этим? Точно ничего хорошего, гугл никогда не воспринимал сайты и блоги, которые дублируют  контент. Лично у меня посещаемость сайта упала более чем на половину и восстановилась она после того, как я устранил сею проблему.

Причины дублирования заголовков и метаописаний. 


Есть две причины из-за которых это случается. Первая, вы действительно создали два поста с одними и теми же заголовками и метаописаниями. Вторая, возникает даже, если вы этого не делали. С первой причиной все понятно и устранить ее не проблема просто убрав посты с дублированными тегами title и метаописаниями. Но вторая не очень приятная, сейчас объясню почему. Типы ссылок на сайте могут быть разными к примеру обычная ссылка к посту имеет окончание html. Но кроме них есть и другие типы, ссылки для мобильных устройств с окончанием m=0, m=1, так же ссылки категорий (ярлыков), постраничной навигации с окончанием max-results и другие. В реальности робот индексирующий ваш сайт или блог сканирует все то, что ему позволено, в том числе и эти самые ссылки. И в идеале он не должен отмечать пост с ссылками, которые имеют окончанием html, m=1, m=0 т.д., как те в которых повторяется заголовок и метаописание. Но для этого на вашем сайте или блоге должен функционировать тег canonical, который помогает понять индексирующему роботу, что пост не дублируется.

Запретить роботу сканировать определенный тип страниц в Google webmaster tools


Есть еще один метод, который может устранить проблему. Он заключается в том, чтобы запретить роботу индексировать эти самые ссылки. Для этого вам нужно зайти в Google Webmaster Tools, здесь, с левой стороны ищем раздел Сканирование - в нем выбираем - Параметры URL, в открывшемся окне видим все типы ссылок, выбираем тот тип из-за которого возникла проблема путем нажатия на ссылку Изменить. В следующем окошке нужно указать: Изменяет ли этот параметр содержание страницы, которое видит пользователь? выбираем ответ: Да, параметр изменяет, реорганизует или ограничивает содержание страницы. Появится новое меню в котором вам нужно перетащить ползунок на отметку: Никакие URL. затем жмем по кнопке Сохранить. После этого нужно подождать некоторое время пока робот вновь проиндексирует ваш сайт.



Запретить роботу сканировать определенный тип страниц через пользовательский файл robots.txt


Тег canonical и запрет на сканирование страниц в google webmaster tools срабатывает не всегда. Так что, если спустя неделю картина все та же нужно осуществит данный запрет через пользовательский файл robots.txt. Это самый верный способ. После его применения уже со следующим сканированием робот должен выбросить страницы с повторяющимися заголовками и метаописаниями. Для его применения вам нужно проделать следующие шаги:

  1. Настроить под себя пользовательский файл robots.txt 
  2. Добавить файл в настройках поиска

Сделать это очень просто, сейчас вы сами в этом убедитесь.

Настраиваем пользовательский файл robots.txt

Вот, как выглядит стандартный файл robots.txt:

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://mojsajt.blogspot.com/sitemap.xml

К примеру нам нужно запретить сканировать страницы с параметром для мобильных устройств m=0 и m=1 для этого добавляем в наш файл две строчки и теперь он будет выглядеть следующим образом:

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /
Disallow: /*?m=0
Disallow: /*?m=1

Sitemap: http://mojsajt.blogspot.com/sitemap.xml

Если на ваши дубли влияет другой параметр вместо m=0 и m=1 пишите в этих строчках название этого параметра. И не забудьте после Sitemap указать адрес своего сайта.

Добавляем пользовательский файл robots.txt в настройки поиска

Файл мы подготовили осталось только добавить его в настройки поиска. Для этого переходим в раздел:

  • Настройки
  • Настройки поиска
  • Пользовательский файл robots.txt

Напротив последнего кликаем по ссылке Изменить, в появившемся окошке вставляем наш файл и Сохраняем изменения. Пример на картинке ниже.
 

Плагин шрифтов, новые шрифты для сайтов и блогов.

Добавить новые шрифты или сайта - блога - загрузить плагин шрифтов

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

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

Для того чтобы загрузить плагин шрифтов на сайт или блог, вам нужно перейти в сервис Google Fonts в строке напротив Preview text: вписываете слово или фразу это поможет вам подобрать нужный стиль. В этом же меню левее можно задать размер и отсортировать шрифты в алфавитном порядке, по дате добавления, количеству стилей и популярности.

Просматриваете список, выбираете те шрифты, которые вам понравились жмете по кнопке с правой стороны Add to Collection. Затем ищем внизу кнопку Use кликаем по ней, в открывшемся окне переходим к третьему пункту Add this code to your website. Вам нужно скопировать предложенный код и вставить его в HTML редакторе своего сайта (блога) между тегами <head> ... </head>.




Пользователям blogger нужно перейти в раздел Шаблон - Изменить HTML. Вот только этот код может не сохраниться в шаблоне и система выбьет ошибку. Чтобы этого не было нужно наш код преобразовать. Для этого переходим на сайт, который конвертирует кода для blogger, в окошке вставляете свой код, жмете по кнопке Convert Ad Code, копируете новый вид кода и теперь можно спокойно добавлять его в редактор HTML. После этого вы сможете задавать новый шрифт, как в постах так и в других элементах сайта или блога.