Меняем read more на кнопку.


Изменяем стандартный шаблон Blogspot и улучшаем внешний вид блога заменой всех стандартных решений на свои креативные идеи.Тег more или читать дальше в стандартном шаблоне скучен и безлик.Изменим его при помощи  CSS на более презентабельный вид.Вместо скучной надписи на это место установим визуальную кнопку-обманку в 3Д стиле.



Читать дальше или кнопка


Опытный пользователь без труда определит отсутствие привязки оформления блога к какому-то шаблону.По сути то и самого шаблона,как такового нет.Есть просто чистый лист и десяток гаджетов  HTML и JavaScript,установленных в футере блога,хотя от половины нужно избавиться,но руки пока не доходят.Использование такого варианта позволяет эксперементировать по мере приобретения необходимых навыков в создании HTML -страниц и создавать любые формы оформления постов блога исходя лишь от настроения.
Простота и адаптивность шаблона Blogspot позволяет даже неопытным пользователям научиться азам редактирования и построения страниц.Использование различных вариантов стилей CSS может вывести ваш блог на блогспот совершенно на другой уровень,отличный от стандартных вариантов использования платформы Blogger.Поверхностные знания CSS и необходимость создания активной кнопки для своих нужд при отладке и настройке в визуальном онлайн редакторе натолкнули на мысль об использовании вымученного стиля для полного изменения дизайна разделителя анонса и основной части поста.При желании этот стиль можно будет применить и к другим элементам оформления блога,таким как главное меню,название гаджетов или добавить активную кнопку для перехода по ссылке.Вариантов для применения много ( Смотреть примеры ) несмотря на размер кода.

Установка кода кнопки вместо read more.


Для того чтобы изменить дизайн подписи разделителя перехода нужно просто скопировать этот небольшой фрагмент кода и установить  перед закрывающим тегом ]]></b:skin>,или же в открывшемся окне в настройках шаблона блога на вкладке дополнительно.В результате все разделители приобретут такой вид,как у меня на страницах анонсов.
.jump-link a{ background-color:#408080; font-family: 'Verdana', sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; padding:5px 20px; padding-right:30px; background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%); border-radius: 10px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 3px 0px 0px #ccc, 0px 10px 5px #408080;opacity:0.7;

Для установки новой кнопки в теле поста необходимо в нужном месте в режиме редактирования HTML добавить такой блок,где в подписанных местах необходимо произвести замены на свои необходимые значения.
<div class='jump-link'><a href='ссылка на сайт'>текст кнопки</a></div>

В результате добавления этого фрагмента вашу страницу украсит ещё одна 3Д кнопка.Изменить цвет и оформление кнопки под свой дизайн можно воспользовавшись

а цвет подобрать на странице код для цвета HTML.Для редактирования цвета кнопки,перейдя в редактор,скопируйте весь код целиком и вставьте слева в окно на странице,а справа появиться изображение соответствующие данному варианту кода.Да и не забудьте заключить верхний код в теги <style>...</style> без них код в редакторе работать не будет.




















Отправить комментарий