Напишите пожалуйста Html код чтобы при открытии сайта на экран автоматически выводилось предложение добавить сайт в избранное или закладки браузера. если сайт добавлен в закладки браузера или избранное то предложение не должно появляться.
Заранее благодарен. Константин
, можете менять толщину и цвет рамки, отступы внутри таблицы, ширину таблицы, её выравнивание и фоновый цвет самого блока.
border: 1px solid #ff1919″
/* Рамка в 1 пиксель, цвет=#ff1919 стоит красный */
cellpadding=»5″
/* Отступ от края таблица, чтобы текст не прилипал к рамке */
width=»160″
/* Ширина таблицы в пикселях */
align=»center»
/* Выравнивание таблицы по средине */
bgcolor=»#ffffff
/* Цвет фона в таблице цвет=#ffffff стоит белый */
В коде также нужно поменять и ссылку на вашу кнопку:
Абсолютная ссылка на изображение кнопки и её размеры.
Просмотреть примеры работы кнопки добавления в избранное или в закладки можно на этом сайте на страницах с описаниями видеокурсов и на сайте Байк Шоу: http://showsbike.narod.ru/
Да чуть не забыл, в своих блоках я использовал кнопки с названиями: Создать Закладку
Сделать такую кнопочку можно на сервисе кнопок: http://cooltext.com/Buttons
(Сайт правда на английском языке но разобраться не трудно, а если вы мой подписчик на видеоуроки по созданию сайта на Яндекс Народе, то вы получали ссылку на урок по созданию кнопок в этом сервисе.)
Как вставить данный html код на сайте сделанном в конструкторе на Яндекс Народе, для этого используем модуль вставка произвольного кода на сайт < >.
Во многих интернет-магазинах имеется такая полезная вещь, как функция добавить в избранное
, с помощью которой, товар можно без проблем найти в разделе избранное
своего личного кабинета. Вот сегодня мы и создадим первую часть данного материала с помощью HTML
, CSS
и JQUERY
, а в следующем материале уже сделаем добавление в избранное на PHP и MYSQL.
По поводу дизайна добавления, я решил сделать свое оформление, которое в принципе, без труда можно будет найти подобное и на других сайтах. Это как говорится, дело принципа, каждому выбирать свое) Пример, оформления Вы можете посмотреть в демо версии или на рисунке ниже.
Первый шаг.
HTML.
И так, переходим к первому и самому простому шагу, это написание HTML
кода и сначала подключаем все нужные скрипты и стили.
Теперь создаем каркас для нашего, скажем так, товара, прописываем ему класс product
, который будет формировать сам общий блок товара, далее нам потребуется кнопка для добавления в избранное, выглядеть она будет как закладка, поэтому при нажатии она должна скрываться во внутрь, при повторном нажатии раскрываться в первоначальное состояние.
Для этого создаем блок с классом favorites
, в который помещаем две кнопки add
- добавить в избранное и remove
- удалить с избранного. Как видим, все очень просто, остается только добавить любую картинку с товаром и на этом можно переходить к следующему шагу JQUERY
.
Второй шаг.
JQUERY.
Так как, работа с добавлением и удалением с избранного связанна с кликом, поэтому нам нужно начать с события по клику. Внутри документа создаем переменную id
, в которую записываем первоначальное состояние с помощью метода hasClass
.
После чего создаем условие, в котором обращаясь к переменной id
и проверяем, если мы добавили товар, то добавляем класс simple
с помощью метода addClass
.
И наоборот, если убрали товар с избранного, то удаляем класс simple
с помощью метода removeClass
.
$(document).on("click", ".favorites", function () {
var id = $(this).hasClass("simple");
if (!id) {
$(this).addClass("simple");
} else {
$(this).removeClass("simple");
}
});
Третий шаг.
CSS.
Ну и осталось реализовать самый последний шаг, это наши стили, без которых ничего работать должным образом точно уж не будет. Потому что тут все строится, как на позиционировании, так и формировании трансформации кнопок. Для начала мы дадим нашему основному блоку правильное позиционирование и сделаем его строковым.
Product {
position: relative;
display: inline-block;
}
Теперь займемся расположением кнопок добавить и удалить с избранного. Из главных свойств выделим позиционирование, положение сторон, высоту, ширину и индекс, без которого наши кнопки не будут видны.
В качестве элементов управления, я выбрал inline
картинку, поэтому работать будем с ее позиционированием.
Favorites {
position: absolute;
top: 0;
right: 0;
width: 55px;
height: 55px;
z-index: 1;
}
.favorites .image {
position: absolute;
width: 55px;
height: 55px;
background: url("../img/favorites.png") no-repeat;
cursor: pointer;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.favorites.simple {
background: url("../img/favorites.png") no-repeat 100% 100%;
}
Напоследок, нам нужно поработать с классом simple, который будет осуществлять добавление и удаление элементов управления, а также с трансформации и фоновым позиционированием.
Favorites .add {
background-position: 0 0;
-webkit-transform: rotate3d(1,1,0,0deg);
-moz-transform: rotate3d(1,1,0,0deg);
-ms-transform: rotate3d(1,1,0,0deg);
-o-transform: rotate3d(1,1,0,0deg);
transform: rotate3d(1,1,0,0deg);
}
.favorites.simple .add {
-webkit-transform: rotate3d(1,1,0,180deg);
-moz-transform: rotate3d(1,1,0,180deg);
-ms-transform: rotate3d(1,1,0,180deg);
-o-transform: rotate3d(1,1,0,180deg);
transform: rotate3d(1,1,0,180deg);
}
.favorites:hover .add,
.favorites.simple .add {
background-position: -56px 0;
}
.favorites .remove{
background-position: -111px 0;
-webkit-transform: rotate3d(1,1,0,180deg);
-moz-transform: rotate3d(1,1,0,180deg);
-ms-transform: rotate3d(1,1,0,180deg);
-o-transform: rotate3d(1,1,0,180deg);
transform: rotate3d(1,1,0,180deg);
}
.favorites.simple .remove {
-webkit-transform: rotate3d(1,1,0,0deg);
-moz-transform: rotate3d(1,1,0,0deg);
-ms-transform: rotate3d(1,1,0,0deg);
-o-transform: rotate3d(1,1,0,0deg);
transform: rotate3d(1,1,0,0deg);
}
.favorites .remove:hover {
background-position: -167px 0;
}
Не забывайте!
Еще раз повторюсь, что все свойства обязательны, так как рассчитаны на сугубо данный вид управления элементами. Честно сказать, на старых браузерах, смотрится это дело не очень, если к примеру, брать IE8
, так как в основном касается трансформации, но что остального, думаю решение вполне себя оправдало.
Многие вебмастера похоронили такой вид привлечения постоянных читателей блога, как прямые переходы пользователей из закладок
. Именно о добавлении станицы в закладки
– целесообразности этой функции на сайте мы сейчас и поговорим.
Отчасти это связанно с тем, что ведущие сео блоги (куда обращены все взоры начинающих и не очень начинающих вебмастеров) ориентированы на свою возрастную аудиторию, которая в основной своей массе пользуется RSS ридерами или вовсе Твиттером. Сейчас действительно очень редко где можно встретить кнопочку – “добавить страницу в закладки”. А вот и зря! Некоторые тематики подразумевают более возрастную группу, которая с большим трудом переваривает “нововведения” вроде twitter’ов, и даже RSS ридеров, которые уже давно вошли в обиход.
Таким людям гораздо понятнее закладочка – Избранное
, где все сайты лежат отсортированными в любимом браузере.
Конечно же, никто не запрещает таким фанатам закладок нажать заветное сочетание клавиш Ctrl + D
и добавить, таким образом, заветную закладку, но ведь для очень многих людей, жуткие комбинации на клавиатуре, пускай даже состоящие всего из 2ух клавиш – это как ладан для черта.
Конечно - это в основном представители старшего поколения, консерваторы, но и про них тоже нельзя забывать, особенно, когда тематика сайта ориентирована под эту возрастную группу людей.
Итак, задача – разместить на сайте кроссбраузерную
кнопку “Добавить в Закладки” или “Добавить в Избранное” – как вам больше нравится. Главное, повторюсь – это кроссбраузерность, т.е. работоспособность этой кнопки в ведущих браузерах – Google Chrome, Mozilla Firefox, Opera, Internet Explorer.
Скажете легкая задачка?! Отнюдь – все проблемы кроются в универсальности кода, в его кроссбраузерности
. Один код подходит только для Internet Explorer’a и не работает для других браузеров.
Вот пример, который наиболее распространен в интернете.
Добавить в избранное
Или вот вариант простенького, но бесполезного java скрипта:
Add this Page to your Favorites
Данные коды работают только с браузером Internet Еxplorer! Чтобы скрипт по добавлению закладки был действительно кроссбраузерным, в нем должна быть встроена проверка браузера клиента и в зависимости от браузера использоваться соответствующий код добавления в закладки
.
Данный скрипт работает с бразуерами Firefox, Opera, но вот Гугловский Хром его не понимает и в выводит предложение нажать Ctrl + D добавив таким образом страницу в закладки.
Но это лучшее, что мне удалось накопать на просторах интернета (установка антенн не в счёт!).
Кроссбраузерный скрипт:
<
script type="text/javascript">
function getBrowserInfo() {
var t,v = undefined;
if (window.chrome) t = "Chrome";
else if (window.opera) t = "Opera";
else if (document.all) {
t = "IE";
var nv = navigator.appVersion;
var s = nv.indexOf("MSIE")+5;
v = nv.substring(s,s+1);
}
else if (navigator.appName) t = "Netscape";
return {type:t,version:v};
}
function bookmark(a){
var url = window.document.location;
var title = window.document.title;
var b = getBrowserInfo();
if (b.type == "IE" && 8 >
= b.version && b.version >
= 4) window.external.AddFavorite(url,title);
else if (b.type == "Opera") {
a.href = url;
a.rel = "sidebar";
a.title = url+","+title;
return true;
}
else if (b.type == "Netscape") window.sidebar.addPanel(title,url,"");
else alert("Нажмите CTRL-D, чтобы добавить страницу в закладки.");
return false;
}
<
/script>
Добавить в избранное
<
/a
>
Для использования этого скрипта на своем сайте, надо добавить верхнюю часть, которая между тэгами <
script type="text/javascript"
>
и в заколовок (header) вашей темы.
Если у вас будет решение – как добавить функцию добавления в закладки для браузера Хром
в скрипт, тогда отзовитесь, пожалуйста, в комментариях!
Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В HTML5 расширились возможности атрибута rel
тега
и теперь с его помощью можно легко добавлять в избранное любые сайты и отдельные страницы.
Достаточно к ссылке добавить rel="sidebar"
и при нажатии на нее откроется специальная панель в браузере для создания новой закладки. Пока значение sidebar
поддерживают два браузера - Firefox и Opera, остальные игнорируют атрибут rel
и переходят по указанной ссылке как обычно.
Чтобы расширить количество браузеров и добавить к ним IE, к ссылке также можно подключить небольшой скрипт. В итоге получится, что Firefox, Opera, Internet Explorer вызовут специальную панель, остальные браузеры перейдут по ссылке (пример 1).
Пример 1. Добавление в избранное
HTML5
IE
Cr
Op
Sa
Fx
Добавить в избранное
function addBookmark() {
if (document.all) window.external..ru");
}
Добавить в избранное
Как в итоге выглядит применение rel="sidebar"
? Результат зависит от браузера. Firefox к примеру открывает такое окно (рис. 1).
Рис. 1. Добавление в избранное в Firefox
В Opere вид несколько другой, но смысл аналогичный (рис. 2).
Рис. 2. Добавление в избранное в браузере Opera
У Internet Explorer самый лаконичный интерфейс (рис. 3).
Рис. 3. Добавление в избранное в браузере Internet Explorer
Пока использование атрибута rel
непривычно из-за его слабой поддержки браузерами, но потенциал у него огромный, а число значений постепенно расширяется. Так что включать в ссылки его надо.
Тема очень популярная. Сервисы с созданием он-лайн закладок пользуются популярностью, но давайте попробуем решить задачу. Не будем использовать сторонний сервис, а решим данную проблему на сайте. В итоге посетитель, нажав на ссылку, сможет добавить сайт в закладки (аналогично Ctrl+D и тп).
Как добавить сайт в закладки (избранное)? Используем JavaScript
Создаём файл с названием bookmark.js
. В него вставляем указанный ниже код.Код JavaScript
(файл bookmark.js
)
Function AddToBookmark(a)
{
var title = window.document.title; // запоминаем заголовок активной страницы/вкладки
var url = window.document.location; // адрес тоже запоминаем
If (window.sidebar) { // такой объект есть только в Gecko
window.sidebar.addPanel(title, url, ""); // используем его метод добавления закладки
}
else if (typeof(opera)=="object") { // есть объект opera?
a.rel="sidebar"; // добавлем закладку, смотрите вызов функции ниже
a.title=title;
a.url=url;
return true;
}
else if(document.all) { // ну значит это Internet Explorer
window.external.AddFavorite(url, title); // используем соответсвующий метод
}
else {
alert("Для добавления страницы в Избранное нажмите Ctrl+D"); // для всех остальных браузеров, в т.ч. Chrome
}
Return false;
}
Ну и чтобы скрипт заработал, достаточно подключить файл bookmark.js
и вставить ссылку с js
, которая при клике вызывала бы работу скрипта.
Код HTML
Пример работы Добавления вкладок
Добавить ссылку в избранное
На самом деле я бы рекомендовал остановиться на этом варианте. Второй я предложу уже больше ради разнообразия, поскольку в нём есть свои проблемы.
Как добавить сайт в избранное? Второй вариант
Раньше функция работала только в Internet Explorer, а после правок в HTML 5 работает в Opera и Mozilla, но не во всех версиях IE и Chrome.Перед закрывающим тегом head
вставляем
function addYoursite() {
if (document.all) window.external.addFavorite("http:/yoursite.ru", "Сайт yoursite.ru");
}
Только соответственно меняем yoursite.ru
на адрес Вашего сайта.
Добавить в избранное
И соответственно тоже меняем yoursite.ru
на адрес Вашего сайта.
Готово. Проверяем.
Похожие публикации
width="139">
