Создание блога в Adobe Muse

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

 

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

 

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

 

  1. Instagram - в основном визуальный контент.
  2. Wordpress - полноценный блог с возможностью стилизации его под свой сайт.
  3. Medium - блог-платформа для более серьезной аудитории, возможность редактировать текст, вставлять иллюстрации, видео и музыку. Нельзя изменять стиль блога.
  4. Blogger -  врать не буду, я на нем не сидел, но сервис довольно популярный.
  5. Эгея - это мое любимое. Полноценный движок для блога, встраиваемый на ваш сайт. Настраиваемый, но очень сложно для тех, кто не сталкивался с кодом.

 

Ну а теперь давайте поговорим о возможности их интеграции.

Интеграция Instagram на ваш сайт

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

www.lightwidget.com

Дальнейшую инструкцию по настройке и установке плагина Instagram на ваш сайт смотрите в видео.

Интеграция блога на Medium, Wordpress и других платформах

Прежде, чем завести свой блог и интегрировать его на сайт, проведите небольшой анализ имеющихся блоговых платформы. Выберите самую подходящую для вас. Некоторые платформы позволяют изменять оформление в блоге, некоторые предоставляют возможность только редактирования ваших публикаций. Определитесь со своей аудиторией, на какой площадке ваша? Вы можете завести блог и на Business Catalyst. Но он платный и сложен в настройке. Мы обязательно поговорим о нем в следующем курсе.

 

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

Сайт для создания фида - https://feedburner.google.com

 

Для того, чтобы настроить внешнее оформление ваших постов, скопируйте этот код:

<style>

 

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

@import url('https://fonts.googleapis.com/css?family=Lora:700&amp;subset=cyrillic');

 

li.rss-item p {

 

font-family: 'Roboto', sans-serif;

font-size: 16px;

margin-bottom: 1.2em;

 

}

 

#medium-feed-snippet {

 

padding-left:10px !important;

 

}

 

.rss-item a:link {

 

font-family: 'Lora', serif;

 

}

 

.rss-items {

    display: flex;

    flex-wrap: wrap;

    flex-direction: row;

    align-items: stretch;

    align-content: stretch;

    justify-content: space-around;

}

 

.rss-item a {

    margin-bottom: 2px !important;

    display: block;

}

 

.rss-items li {

    flex-shrink: 30%;

    margin-right: 2%;

    margin-bottom: 40px;

    float: left;

    display: block;

    width: 30%;

    margin-right: 2%;

    position: relative !important;

    background-color: white;

    padding-top: 10px;

    box-shadow: 0px 3px 8px rgba(0,0,0,0.22);

}

 

.rss-item &gt; a:first-child {

    font-size: 1.8em;

    padding-left: 10px;

    padding-right: 10px;

    color: black;

    font-weight: bold;

}

 

.rss-item-auth {

    color: #000000;

    padding-left: 10px;

    padding-right: 10px;

    color: grey;

}

 

span.rss-date {

    margin-bottom: -0.6em;

    display: block;

    font-size: 1.2em;

    color: grey;

    padding-left: 10px;

    padding-right: 10px;

    padding-top: 0px;

}

 

li.rss-item p {

    margin-bottom: 1.2em;

    padding-left: 10px;

    padding-right: 10px;

}

 

.rss-item a:link, .rss-item a:visited, .rss-item a:active {

    text-decoration: none;

    line-height: 1.2em;

 

color:black;

}

 

.rss-item a:hover {

    text-decoration: none;

    color: grey;

}

 

 

:hov

 

.cls

 

element.style {

}

li.rss-item p {

    margin-bottom: 1.2em;

}

li.rss-item p.medium-feed-image {

    margin-bottom: 1.2em;

    padding-left: 0px !important;

    padding-right: 0px !important;

}

 

</style>

Теперь перейдите на страницу, на которой у вас будут представлены статьи блога. Правой кнопкой мыши щелкните по свободному месту экрана, сбоку от макета вашей страницы, в появившемся меню выберите пункт "свойства страницы". В открывшемся окне активируйте вкладку "метаданные" и вставьте скопированный код в графу "HTML для Head".

 

Теперь просто загрузите страницу в браузер.

Скоро продолжение...

Магазин

Шаблоны сайтов

Курсы Adobe Muse

Иллюстрации

Социальные

Онлайн уроки

Блог

Будем друзьями

Instagram

Twitter

Medium