Просьба установки расширения для Google Chrome

02012-05-2119321Денис Абдуллин

Предлагаемый код – это оформленная под браузер Google Chrome панель, которая запрашивает установку какого-либо расширения, это простая просьба установки расширения для Google Chrome. Вы можете использовать ее не только для установки расширения, но и для чего-нибудь другого. Панель корректно отображается только в браузере Chrome, обратите на это внимание (чтобы отображалось только в Chrome, нужно самостоятельно поработать).

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

Скопируйте код, все, что вам нужно здесь заменить, так это ссылку на установку. Она выделена подчеркиванием здесь. Также вы можете самостоятельно откорректировать текст, цвета и изображение, если есть такая задумка.

JQuery (если не установлен, то вставлять код между <head> и </head>)

Код (установить сразу после <body>)

<script type="text/javascript" src="/images/cookies.js"></script>
<div class="chromebar">
<div class="clss" onclick="close_chrome()"><div class="ic"><div class="m10"> </div></div></div>
<div class="bn"><div onclick="document.location.href='http://yraaa.ru/chrome/yraaa.crx'">Установить</div></div>
<div class="tx">Установить расширение предлагаемое сайтом <b>yraaa.ru</b>?</div>
</div>
<div class="zgl1">&nbsp;</div>

<script type="text/javascript">
function close_chrome() {
setCookie('s01', '1', 10, "/");
$('.chromebar').animate({top:'-64px'},200);$('.zgl1').slideToggle(200)
}
nchr = getCookie('s01')
if(nchr != '1') {setTimeout(function(){$('.chromebar').animate({top:'0px'},200);$('.zgl1').slideToggle(200)},1000)}
</script>

<style type="text/css">
.zgl1 {height:37px;overflow:hidden;display:none;}
.chromebar .clss {float:right;padding:13px;padding-left:15px;padding-right:9px}
.chromebar .clss .ic {
background:url('//yraaa.ru/_pu/12/18637517.png') top left;
width:10px;height:10px;overflow:hidden
}
.chromebar .m10 {
color:black;
cursor:default;
background:url('//yraaa.ru/_pu/12/18637517.png') top left;
width:10px;height:10px;overflow:hidden;
opacity:0;
-webkit-transition:opacity linear .1s}

.chromebar .clss:hover .m10{opacity:1}

.chromebar .bn {float:right;padding-top:3px}
.chromebar .tx {cursor:default;padding:10px;padding-left:43px;background:url('//yraaa.ru/_pu/12/68151486.png') top left no-repeat}
.chromebar .bn div:hover {border:1px solid #414141}

.chromebar .bn div:active {border:1px solid #414141;
background-image: -webkit-linear-gradient(bottom, rgb(249,249,249) 5%, rgb(230,230,230) 53%);
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.05, rgb(249,249,249)),
 color-stop(0.53, rgb(230,230,230))
);
}

.chromebar .bn div {
cursor:default;
padding:7px;
padding-bottom:6px;
border:1px solid #838383;
-webkit-border-radius: 3px;
background-image: -webkit-linear-gradient(bottom, rgb(230,230,230) 5%, rgb(249,249,249) 53%);
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.05, rgb(230,230,230)),
 color-stop(0.53, rgb(249,249,249))
);
}
.chromebar {
overflow:hidden;
z-index:999999;
color:black;
font-family:Arial;
font-size:14px;
border-bottom:1px solid #B6BAC0;
top:-37px;left:0px;
position:fixed;
width:100%;
height:36px;
background-image: -webkit-linear-gradient(bottom, rgb(255,232,147) 5%, rgb(255,242,182) 53%);
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.05, rgb(255,232,147)),
 color-stop(0.53, rgb(255,242,182))
);}
</style>

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

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Порядок вывода комментариев: