Скрипт на закладки пользователя для сайта uCoz

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

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

Так будет выглядеть, после как все установите и выставите хоть одну закладку.

Весь установочный процесс прописан с источника:

Особенности: 

1. Здесь не нужно использовать модули. 
2. Понятный и классический вид. 
3. Удобное функционал на добавление и удаление. 

Установка:
 
1. Админ панель > Страница материала и комментариев к нему (Нужный каталог) и добавляем html: 

<div class="Bookmark" data-id="$ID$" data-img="$SCREEN_URL$" data-title="$ENTRY_TITLE$">   1   </div>
Остаемся на этой странице, где нужно выставить вывод для создания и парсинга тем, где можно все оформить как блок.

<div id="Bookmark-content"></div>

Если блок вам не нужен на этой страницу скройте его добавив style="display:none;" 

Здесь же на этой странице, нужно добавить js код: 

<script> 
 dates = new Date();  
 sDt = dates.getDate();  
 sDm = dates.getMonth() +1; if(sDm < 10) {sDm = '0'+sDm}; 
 sDy = dates.getFullYear(); 
 sTh = dates.getHours(); 
 sTm = dates.getMinutes();  
 Bookmark = $('.Bookmark').attr('data-id'); 
 BookmarkImg = $('.Bookmark').attr('data-img'); 
 BookmarkTitle = $('.Bookmark').attr('data-title'); 
 BookmarkUrl = location.href; 
 $('.Bookmark').click(function() { 
 if($('#Bookmark-content div').hasClass("Bookmark"+Bookmark)) { 
 $('#Bookmark-content .Bookmark'+Bookmark).remove(); 
 $(this).html('??'); 
 } else { 
 $(this).html('?'); 
 $('#Bookmark-content').prepend('<div class="BookmarkAll Bookmark'+Bookmark+'" onclick="location=\''+BookmarkUrl+'\'"><img src="'+BookmarkImg+'"><p onclick="BookmarkDel('+Bookmark+')">?</p><b>'+BookmarkTitle+'</b><br><em>'+sDt+'.'+sDm+'.'+sDy+' в '+sTh+':'+sTm+'</em></div>'); 
 }; 
 BookmarkSave = $('#Bookmark-content').html(); 
 localStorage.removeItem("BookmarkSave"); 
 localStorage.setItem('BookmarkSave', ''+BookmarkSave+'');  
 }); 
 BookmarkLoad = localStorage["BookmarkSave"];  
 $('#Bookmark-content').html(BookmarkLoad);  
 if($('#Bookmark-content div').hasClass("Bookmark"+Bookmark)) { $('.Bookmark').html('?'); } 
 function BookmarkDel(id) { 
 $('#Bookmark-content .Bookmark'+id).remove(); 
 $('.Bookmark').html('??'); 
 BookmarkSave = $('#Bookmark-content').html(); 
 localStorage.removeItem("BookmarkSave"); 
 localStorage.setItem('BookmarkSave', ''+BookmarkSave+'');  
 }; 
 </script>
CSS

.Bookmark { 
  background: #7196b6; 
  display: inline-block; 
  padding: 3px 0px; 
  width: 32px; 
  text-align: center; 
  color: #fff; 
  position: absolute; 
  margin: 55px 0px 0px 759px; 
  font-size: 19px; 
  font-family: sans-serif; 
  border-radius: 4px; 
  font-weight: bold; 
 } 
 .BookmarkAll img { 
  width: 25px; 
  height: 25px; 
  border-radius: 10% 0px; 
  vertical-align: middle; 
  margin: 0px 10px 5px 0px; 
 } 
 .BookmarkAll b { 
  position: relative; 
  top: -7px; 
  text-transform: capitalize; 
  white-space: nowrap; 
  overflow-x: hidden; 
  text-overflow: ellipsis; 
  max-width: 225px; 
  display: inline-block; 
  font-family: sans-serif; 
 } 
 .BookmarkAll p { 
  position: absolute; 
  margin: -30px 0px 0px 275px; 
  background: #e8e8e8; 
  padding: 2px 3px; 
  color: darkcyan; 
  border-radius: 2px; 
  min-width: 12px; 
  text-align: center; 
   
  font-size: 10px; 
  font-family: cursive; 
 } 
 .BookmarkAll em { 
  position: absolute; 
  font-size: 9px; 
  font-style: normal; 
  margin: -16px 0px 0px 34px; 
  color: #91a8bb; 
 }
Здесь в стилистике, вы можете изменить палитру цвета, к примеру, если у вас сайт в демном дизайн.