Inspire премиум шаблон для blogger с широкоформатным слайдером

Inspire адаптивный, премиум шаблон для blogger на русском языке

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

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

Теперь перейдем к строению шаблона и заодно вспомним изменения, которые были проделаны.

Панель навигации.

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

Широкоформатный слайдер

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

Сообщения блога

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

Постраничная навигация

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

Избранное сообщение и слайдер карусель

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

Footer - нижняя часть

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

Сайдбар

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

Страницы с сообщениями

Здесь колдовали над виджетом хлебные крошки, адаптивным дизайном картинок, датой публикации, виджетом поделиться в соцсетях и формой подписки на рассылку по email. Всего вышеуказанного изначально не было в шаблоне. Виджет Рекомендуем сделали на 4 поста вместо 2. Внешний вид коробки комментариев напоминал 90-ые) пришлось преобразить.

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

Типы шаблона и их настройка

Как уже упоминалось в начале поста, мы подготовили два разных типа шаблона Inspire и Inspire II. Для любителей по шире убрали с главной страницы сайдбар (на страницах с постами он функционирует) и расширили виджет сообщений блога.

Настройка шаблона очень проста:

1) Для широкоформатного слайдера просто создайте сообщения и задайте им ярлык под названием slider (с маленькой буквы).

2) Для виджета Избранное сообщение он же Best post of the Year в разделе Дизайн найдите внизу панель widget-sec откройте первый гаджет HTML/Javascript и вставьте туда код:

<script type="text/javascript"> var desccon = "The Best Post of The Year 2014"; </script> <script type="text/javascript" src="/feeds/posts/default/-/Авто?alt=json-in-script&amp;callback=bestpost"></script>

Ярлык Авто меняете на свой ярлык.

3) Для слайдера карусель делаем все тоже самое, что и с виджетом Best Post только открываем  гаджет HTML/Javascript который находится ниже него и вставляем туда код:

<script type="text/javascript"> var titlecb = "Action Posts"; var titlecs = "Latest Posts About Action"; </script> <script type="text/javascript" src="/feeds/posts/default/-/История?alt=json-in-script&amp;callback=labelthumbs"></script>

Ярлык "История" меняете на свой ярлык.

Демо - Inspire \ Демо - Inspire II
Приобрести шаблон полная SEO версия

Minimalist - бесплатный шаблон для Blogger

Minimalist - бесплатный шаблон для Blogger

Демо
Скачать шаблон
Настроить шаблон

Шаблон для blogger Minimalist обеспечит вашему сайту удивительно чистый и современный дизайн в стиле Masonry Grid. Скорость загрузки страниц блога с этим шаблоном достаточно высокая. Как и предыдущая тема Autumn, Minimalist обладает преимущественно светло-оранжевыми цветами. Он так же идеально подойдет для личных блогов, новостных сайтов, дизайнерских блогов, мода, стиль и других креативных проектов.

Данный шаблон не редактировался нашим сайтом.

Autumn - бесплатный шаблон для Blogger

Autumn - бесплатный шаблон для Blogger 2016

Демо
Скачать шаблон
Настроить шаблон

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

Autumn - это бесплатный шаблон для Blogger от прогрессивного издателя ODDThemes который мы не редактировали. Шаблон представлен преимущественно в светло-оранжевых тоннах с дизайном премиум-класса.

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

Шаблоны Bootstrap 3 бесплатные и премиум темы 2018

Бесплатные премиум темы - шаблоны Bootstrap 3 за 2016 год

Потрясающие шаблоны для сайтов, созданные на Bootstrap 3 в 2018 году

Абсолютно точно можно сказать, что сайты и блоги созданные при помощи инструментов Bootstrap набирают все больше и больше популярности в обществе вебмастеров и блогеров. Исследователи по части веб-дизайна уже в который раз заявили, что Бутстрап является одной из самых успешных разработок в данной области. Его инструменты значительно упрощают создание не только сайтов и блогов, но и их отдельных страниц, имеется ввиду обработка контента.

Bootstrap открывает новые возможности в сфере коммерческой деятельности. Его использование выводит веб-ресурсы на новый уровень.

Шаблоны bootstrap, которые находятся в нашей коллекции, добавлены за 2016 год и все они имеют обновления до 3 версии. Вам остается только выбрать и скачать понравившуюся тему.


My Profile
my_profile-шаблон на bootsrap

Демо \ Скачать
My Profile относиться к категории для персональных сайтов созданных на основе Flat Bootstrap. My Profile предназначен для наиболее четкого отображения вашего рода деятельности. Будь вы фотограф или фрилансер. Отображение картинок, анимаций при наведении, плоской сеточной модели и выравнивания элементов воссоздает уникальный адаптивный веб-шаблон. Такой дизайн не только сделает вас известным, но и покажет, что вы профессионал своего дела.



Kappe
kappe-шаблона на bootstrap 3

Демо \ Скачать
Хотите один из минималистических и дружественных шаблонов на Bootstrap? Тогда познакомьтесь с Kappe. Эта тема создана на HTML5 и CSS3, обрамлена шрифтами google fonts. Скрипты Kappe невероятно легкий, что делает его очень быстрым. Он будет показывать свою работу элегантным способом. Так же идеально подойдет для посетителей с мобильными устройствами. Больше подходит для персональных ресурсов.



Elevator 
elevator-шаблон для bootstrap 3

Демо \ Скачать
Elevator - созданный по линии дизайна Windows 8 с помощью кодов Metro UI CSS. Это многоцелевой инструмент со всеми необходимыми бизнес элементами. Elevator имеет творческий интерфейс, который воссоздает приятное впечатление от работы с сайтом.
Элементы и функции, которыми насыщен: адаптивность, Metro UI, Bootstrap v3.3.5, одно страничный, слайдер, два варианта для главной страницы, творческое взаимодействие, форма контактов на Ajax и еще много других полезных вещей.



Margo
Margo шаблон bootstrap 3 2016

Демо \ Скачать 
Ищете многоцелевой шаблон bootstrap 3? Если да, тогда Margo это безусловно то, что вам нужно. Он имеет простой, современный и адаптивный дизайн. Считается одним из лучших, предлагает много необходимых функций для профессионального вебсайта. Margo предлагает вам 10 разных вариантов для домашней (главной) страницы, а так же плюс 30 страниц для бизнеса. Это обновленная версия первого варианта, который был выпущен в 2015 году.



Intimate
Демо \ Скачать 
Мощный, бесплатный шаблон bootsrap 3 для личных сайтов и блогов с широкоформатным слайдером. Эта тема имеет деликатный дизайн от которого ваши читатели будут восторге. Его профессиональный вид и легко настраиваемые функции помогут вам, как можно лучше отобразить свои работы. Вы можете выбрать три разных варианта макета для главной страницы. 



Business

Демо \ Скачать
Откройте мир бизнеса с новым шаблоном Business. Эта тема поможет максимально эффективно продвигать ваши товары и услуги. Абсолютно не важно, какой тип бизнеса вы ведете с данным шаблоном весь процесс будет происходить просто и надежно. Business позволяет отображать на сайте массу чувствительных материалов, которые нуждаются в детализированной обработке. Business выпущен в апреле 2016 года. С ним ваш проект не будет иметь проблем с отображением в таких браузерах, как Chrome, Firefox, Opera, IE, Safari и др.



Pinball
Pinball-шаблон bootstrap 3 2014 - 2016

Демо \ Скачать
Pinball это широкоформатный шаблон Bootstrap 3 созданный в стиле социальной сети Pinterest. Шаблон имеет более легкий дизайн, что в свою очередь обеспечивает приятный просмотр контента. Страницы с постами имеют широкоформатный дизайн, в котором все элементы гармонично сочетаются. Навигационная панель предлагает разворачивающееся меню, окно поиска, чтобы пользователи могли найти нужную информацию, а так же достаточно места для логотипа.



ConBiz
conbiz-бесплатная-тема-шаблон-bootsrap-2016

Демо \ Скачать
ConBiz - это бесплатная тема Bootstrap 3 премиум класса, которая создавалась для таких типов сайтов, как Landing Page, сайт визитка или корпоративный сайт. Создатель шаблона информирует, что его творение лучше всего подойдет для фирм и предприятий ведущих бизнес в сфере строительства. Это простая и одновременно чудесная тема bootsrap, которая имеет современные функции управления. 

Бесплатная html форма подписки на сайт | Подписаться на рассылку по email | Feedburner

Бесплатная html форма подписки на сайт | подписаться на рассылку по email | Feedburner
Форма подписки является одной из самых важных частей сайта и блога. Если использовать данный виджет, можно получить большой поток трафика на свой веб ресурс. Сегодня я поделюсь с вами двумя, замечательными html формами подписки, в одну из которых встроены иконки социальных сетей и так же расскажу вам, как настроить эти формы (настройка будет происходить через очередной сервис Google, который называется Feedburner).

Что такое форма подписки на сайте?

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

Что такое Feedburner и как это работает?

Feedburner - это один из немногих сервисов RSS потоков (лента новостей веб ресурса). У него есть много функций, но самыми главными являются подписка на рассылку по email и статистика подписок по RSS. Когда кто-то подпишется на ваш сайт через Feedburner, используя свою почту, он автоматически будет получать на эту же почту ваши последние публикации. Для начала работы в сервисе Feedburner вам нужно создать аккаунт в гугл. Вашим идентификатор в сервисе будет ваш логин. Этот логин нужно будет вставить в одной из форм, которую вы выберите.

Где на сайте лучше всего разместить форму подписки?

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

Установка формы подписки на сайт

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

Чтобы формы отображались на ваших ресурсах сперва установите в своих HTML редакторах перед тегом </head> следующий код:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Код первой формы.

 html форма подписки на сайт первый вариант

Для первого варианта формы копируете и устанавливаете CSS код:

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Сделали? Замечательно! Теперь завершающий этап для данного варианта формы. HTML код ниже, вставляете в том месте своего сайта в котором должна отображаться форма подписки. Вот и код:

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

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

Код второй формы.

 html форма подписки на сайт второй вариант

Если второй тип формы понравился вам больше, тогда проделайте следующее. Скопируйте код CSS и установите его в своем редакторе. Код:

#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
.creadit a{color: #A7A6A6; float: right; font-size: 8px

HTML код для отображения формы вставляете там где она должна появиться на вашем сайте или блоге:

<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>
</div>
</div>
<div class="creadit">
<a href="http://msdesignbd.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>

Настройка форм.

Настройка выполняется очень просто. В HTML коде везде где найдете фразу: YOUR-USER-NAME (для первого варианта формы) или просто: USER-NAME (для второго варианта формы) вставьте свой логин из сервиса Feedburner.

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