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

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

21.05.201213251

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

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

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

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

<script type="text/javascript" src="http://yraaa.ru/test/9/img/jquery-1.3.2.min.js"></script>


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

<script type="text/javascript" src="http://yraaa.ru/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('http://yraaa.ru/_pu/12/18637517.png') top left;
width:10px;height:10px;overflow:hidden
}
.chromebar .m10 {
color:black;
cursor:default;
background:url('http://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('http://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>

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



Сохраните в социальную сеть
Комментарии (1)
Гость 23.05.2012 в 16:06Спам
Я думал реальное оповещение браузера))
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт