5+ Кнопки Demo и Download для Blogger

Demo и кнопка download используются для многих целей в нашем блоге. Когда мы предоставляем какие-либо загружаемые источники нашим читателям, мы используем кнопку download. Обычно мы используем Demo кнопку для демонстрации чего-либо из любого внешнего источника. Я доработал кнопки Demo и  Download для Blogger. В этой статье я покажу вам, как добавить эти кнопки в ваш блог Blogger.

Эти кнопки Demo и  Download созданы с использованием только HTML и CSS. Этот простой и легкий дизайн кнопки будет работать с любым шаблоном Blogger. Так что не беспокойтесь о конкурентоспособности этих кнопок. Добавить Demo и кнопку Download в блоге Blogger очень просто. Я покажу все со скриншотом, так что не волнуйтесь.

Добавить кнопки Demo и Download в Blogger

Мы знаем, что Blogger нуждается в большем количестве настроек, чем другие CMS. Поскольку Blogger не поддерживает плагины, нам нужно добавить кнопки Demo и  Download в нашем блоге Blogger, отредактировав наш текущий шаблон Blogger.

Это не так сложно. Вам просто нужно добавить кусок кода CSS в шаблон блога. После этого вам нужно использовать небольшой кусочек HTML-кода, чтобы показать свои кнопки.

1. Войдите в свой аккаунт блогера и перейдите в раздел «Тема». Теперь вы увидите кнопку

 « Редактировать HTM ». Нажмите на неё, чтобы открыть редактор шаблонов Blogger. Примечание. Перед редактированием сохраните резервную копию шаблона блога.

2. Найдите эту строку: ]]></b:skin> . Теперь скопируйте приведенный ниже код CSS и вставьте его прямо над строкой ]]></b:skin>. Нажмите на кнопку « Сохранить шаблон ».


Demo и Download стиль кнопок 1:

CSS-код (основной):

/* Demo Download Button By BlogOrnate
------------------------------------------------------ */
.boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.boddbtn ul {padding:0;margin:0;}
.boddbtn li {list-style:none;display:inline;padding:0;margin:5px;}
.demobtn,.downloadbtn{color:#fff !important;padding:12px 15px !important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demobtn {background-color: #3498db;}.downloadbtn {background-color: #34d968}.demobtn:hover {background-color: #2980b9;color: #fff;}.downloadbtn:hover {background-color: #2fbd5a;color: #fff;}

Примечание. Замените выделенный раздел кодами стиля 2, стиля 3, стиля 4 или стиля 5, чтобы получить нужный вид кнопки.

Demo и Download стиль кнопок 2:

.demobtn {background-color: #516EAB;}
.downloadbtn {background-color: #29C5F6}
.demobtn:hover {background-color: #435B8E;color: #fff;}
.downloadbtn:hover {background-color: #26A6CE;color: #fff;}

Demo и Download стиль кнопок 3:

.demobtn {background-color: #EB4026;}
.downloadbtn {background-color: #CA212A}
.demobtn:hover {background-color: #C83821;color: #fff;}
.downloadbtn:hover {background-color: #A61B22;color: #fff;}

Demo и Download стиль кнопок 4:

.demobtn {background-color: #444444;}
.downloadbtn {background-color: #2C3D4F;}
.demobtn:hover {background-color: #222;color: #fff;}
.downloadbtn:hover {background-color: #24313F;color: #fff;}

Demo и Download стиль кнопок 5:

.demobtn {background-color: #E84C3D;}
.downloadbtn {background-color: #82BF57}
.demobtn:hover {background-color: #C83821;color: #fff;}
.downloadbtn:hover {background-color: #6FA34A;color: #fff;}

3. Вот HTML-код для добавления Demo и кнопки Download в ваш блог. Скопируйте приведенный ниже HTML-код> перейдите в режим редактирования HTML сообщения> Вставьте код в сообщение блога, чтобы показать выбранную вами кнопки Demo и  Download.

HTML-код:

<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="#" rel="nofollow" target="_blank">DEMO</a></li>
<li><a class="downloadbtn" href="#" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Примечание:
замените # вашим собственным URL.

Это была полная процедура добавления и использования кнопок Demo и Download в блоге Blogger. Если вам понравился этот пост, пожалуйста, поделитесь им и оставьте свой отзыв через комментарий.