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. Если вам понравился этот пост, пожалуйста, поделитесь им и оставьте свой отзыв через комментарий.
