Архивы категории: Обучение

Бесплатная почта

Здравствуйте читатели и друзья моего блога Успех в Интернет.

Зачастую к Вам на почту приходят всякого рода письма с предложениями по бизнесу или обучающих курсов, которые Вы не заказывали. Это происходит потому, что Вы на просторах интернета оставляете свой e — mail адрес, регистрируясь на различных сайтах.

Подбор параметров плеера

Здравствуйте друзья и читатели блога Успех в Интернет!

Сегодня хочу поделиться с сервисом http://youtubecolor.ru/index.html , в котором можно изменить дизайн плеера, может кто — нибудь воспользуется им. Плеера можно изменить под дизайн блога и он выглядит очень красиво. Также можно включить автовоспроизведение. Посмотрите это короткое видео.

 

А вот, что у меня получилось.

С уважением Вероника.

Как установить в блог слайдер

Приветствую друзей моего блога У спех в Интернет!

Сегодня покажу, как установить в блог слайдер популярное видео. Может Вы видели на блогах слайдер "Популярное видео". Пользователь нажимает на понравившее видео и переходят на него. Это очень удобно. Для того, чтобы установить слайдер переходите в админку блога и нажимаете на дизайн, затем добавляете гаджит html  и вставляете этот скрипт.

<div style="visibility: hidden;" id="info11"> </div>
<script>
//<![CDATA[

// Класс описывает сущность объектов для слайдбара
function ClassLink(priority, link_img, title, link_rec) {
this.priority = priority; // Количество просмотров
this.linkImg = link_img; // Ссылка на изображение
this.title = title; // Описание заголовка
this.linkResource = link_rec; // Ссылка на видео-ролик
// Метод сравнения двух объектов
// по полю количества просмотров
// Если текущий объект больше, то возврат 1
// Иначе если объект меньше, то возврат 0
// Если равно, то возврат -1
this.comparator = function(objectClassLink) {
if(objectClassLink.priority > this.priority) {
return 1;
} else if(objectClassLink.priority < this.priority) {
return 0;
} else if(objectClassLink.priority == this.priority) {
return -1;
}
}
}
var listNodes = []; // Массив объектов ClassLink
// Функция сортирует объекты
// по убыванию
// Сигнатура: 1 параметр - ссылка на массив объектов
function sortElements(list) {
// Буфер для хранения временных результатов
var temp;
// Цикл итераций прохода по списку
for(var j = 0; j < list.length; j ++) {
// Цикл итераций прохода по списку N+1
for(var k = (j + 1); k < list.length; k ++) {
// Выбрать первый элемент из множества и сравнить с следующим элементом n+1
if(list[j].comparator(list[k]) < 1) {
// Обмен местами
temp = list[j];
list[j] = list[k];
list[k] = temp;
}
}
}
return list;
}
// Функция поиска 12 популярных видео-ссылок
// на главной странице сайта
function searchTopLink() {
// Ссылка на базовый элемент иерархии модели DOM-документа
var elementBaseDiv = document.getElementById('Blog1');

// Дочерний элемент содержащий список всех блоков с ссылками
var firstElementList = elementBaseDiv.children[0]; // blog-posts hfeed

var fuck = 0;
if(document.getElementsByClassName('status-msg-wrap').length == 1) {
fuck = 2;
}
var j3 = 0;
// Цикл прохода по дереву элементов
for(var j = 0 + fuck; j < firstElementList.children.length; j ++) {
// Дочерний элемент div со всеми нужными данными(ссылки, количество просмотров, графика)
var nodeDiv = firstElementList.children[j];
// Количество просмотров через post header
var countShow = parseInt(nodeDiv.children[1].children[1].children[0].innerHTML);
// Ссылка на изображение
var linkToImg = nodeDiv.children[2].children[0].children[0].children[0].getAttribute("src");
// Описание заголовка
var linkTitle = nodeDiv.children[1].children[0].getAttribute("title");
// Ссылка на видео ролик
var linkToRec = nodeDiv.children[1].children[0].getAttribute("path");
//--------------------ИЗМЕНЕНИЕ СВОЙСТВ БЛОКОВ IMG and A для того что бы скрыть полоски на картинках-----------------------
// Свойства для дескриптора <a>
nodeDiv.children[2].children[0].children[0].style.display = "block";
nodeDiv.children[2].children[0].children[0].style.position = "relative";
nodeDiv.children[2].children[0].children[0].style.width = "192px";
nodeDiv.children[2].children[0].children[0].style.height = "120px";
nodeDiv.children[2].children[0].children[0].style.overflow = "hidden";
// Свойства для дескриптора <img>
nodeDiv.children[2].children[0].children[0].children[0].style.height = "160px";
nodeDiv.children[2].children[0].children[0].children[0].style.top = "-20px";
nodeDiv.children[2].children[0].children[0].children[0].style.position = "relative";
//-------------------------------------------------------------------------------------------------------------------------
// Выделить память для объекта
listNodes[j3++] = new ClassLink(countShow, linkToImg, linkTitle, linkToRec);
// Вывести на странице
/*document.getElementById('info11').innerHTML += "Количество: " + countShow + ", Ссылка на графику: " + linkToImg + ", Заголовок: " + linkTitle + ", Ссылка на ресурс: " + linkToRec + "<br>";*/
}
}
//]]>
</script>
<!--
Скрипт - слайдбар
Выполняет поиск на странице блоков с ссылками
на видео, внутри которых имеются элементы с указанием количества
просмотров. На основании информации можно выделить список
топ-12 или др., что позволить в отдельном блоке-виджете, разместить
ссылки на эти видео-ролики и по клику осуществлять переход.
Внутри слайдбара отобразить пиктограмму и заголовок используемый по-умолчанию.

Слайдбар состоит из нескольких блочных элементов div

1. wrapper-base-slide-bar
2.
-->

<script type="text/javascript">
//<![CDATA[
function Timer(funUser, delayMillisecond) {
this.interval_millisecond = delayMillisecond; // Интервал времени в миллисекундах
this.idFunction = 0; // Идентификатор созданной функция вызываемой через опрд.промежуток времени
this.userFunction = funUser; // Пользовательская функция
// Активация таймера
this.start = function() {
this.idFunction = setInterval(this.userFunction, this.interval_millisecond);
}
// Деактивация таймера
this.stop = function() {
// Функция clearInterval для снятия с обработки вызова
clearInterval(this.idFunction);
}
this.setDelayFunction = function(funUser) {
this.userFunction = funUser;
}
this.setIntervalMillisecond = function(millisecond) {
this.interval_millisecond = millisecond;
}
}

// Массив из 12 элементов
// каждый из которых является оболочкой для вложенных изображений и текста
var array_list = []; // Массив хранит сущности
var pElement; // Ссылка на текущий первый элемент в отображенном списке
var timer1 = new Timer(animation, 12); // Таймер который управляет процессом анимации
var timerAutomat = new Timer(animation2, 8000); // Таймер, который будет автоматически переключать ссылки
var aL = true, bL = false;

//
function animation2() {
if(!regul) {
if(t1 < numes-1 && aL) {
// Переключатель
nextVideoLink();
} else {
aL = false;
bL = true;
}

if(t1 > 0 && bL) {
prevVideoLink();
} else {
aL = true;
bL = false;
}
}
}

var speed_left = 0;
var coordsList = []; // Массив координат
var ar=280;
var t1=0, t2=1;
var status = -1;
var MOTION_LEFT = 0x0001;
var MOTION_RIGHT= 0x0002;
var regul = false; // Управляет доступом к переключение ссылок на слайде
var numes = 0;
var fff = -1;
// Анимация движения блоков
function animation() {

for(var j = 0; j < array_list.length; j ++) {

array_list[j].style.left = speed_left + "px";
//
if(speed_left == (ar*1)* t1) {
timer1.stop();
regul = false;
}
}

if(status == MOTION_LEFT) {
speed_left -= 14;
} else if(status == MOTION_RIGHT) {
speed_left += 14;
}
}

// Предыдущие несколько видео
function prevVideoLink() {
if(t1 > 0 && !regul) {
document.getElementById('left-button').style.backgroundImage = "url(http://infosona.ru/wp-content/uploads/strelka.png)";
document.getElementById('left-button').style.borderColor = "green";
document.getElementById('right-button').style.backgroundImage = "url(http://infosona.ru/wp-content/uploads/strelka-1.png)";
document.getElementById('right-button').style.borderColor = "green";
regul = true;
t1--;
//document.getElementById('info').innerHTML = "t1:" + t1 + "<br>";
status = MOTION_LEFT;
timer1.start();
} else {
document.getElementById('left-button').style.backgroundImage = "url(http://infosona.ru/wp-content/uploads/strelka.png)";
document.getElementById('left-button').style.borderColor = "white";
}
}
// Следующие несколько видео
function nextVideoLink() {
if(t1 < (numes - 1) && !regul) {
document.getElementById('right-button').style.backgroundImage = "url(http://infosona.ru/wp-content/uploads/strelka-1.png)";
document.getElementById('right-button').style.borderColor = "green";
document.getElementById('left-button').style.backgroundImage = "url(http://infosona.ru/wp-content/uploads/strelka.png)";
document.getElementById('left-button').style.borderColor = "green";
regul = true;
t1++;
//document.getElementById('info').innerHTML = "t1:" + t1 + "<br>";
status = MOTION_RIGHT;
timer1.start();
} else {
document.getElementById('right-button').style.backgroundImage = "url(http://infosona.ru/wp-content/uploads/strelka-1.png)";
document.getElementById('right-button').style.borderColor = "white";
}
}

// Инициализация состояния
function initSlideBar() {
try {
searchTopLink(); // Парсинг страницы и создание массива объектов-сущностей
sortElements(listNodes); // Отсортировать в порядке убывания
// Объект DIV-базовый для элементов-ссылок на видео
var base_element = document.getElementById("wrapper-slide-bar-center");
}catch(ex) {document.getElementById('wrapper-base-slide-bar-widget').parentNode.style.display = "none"; document.getElementById('sidebar').style.position="relative"; document.getElementById('sidebar').style.top="-16px";}
if(listNodes.length > 0) {

// Параметры свойств CSS объекта
base_element.style.width = "232px"; // Ширина блока
base_element.style.height = "185px"; // Высота блока
base_element.style.position = "relative"; // Тип позиционирования - относительный
base_element.style.overflow = "hidden";
//base_element.style.border = "1px dotted blue"; // Параметры рамки,- толщина, тип линии, цвет линии

numes = (listNodes.length >= 6) ? 6 : listNodes.length; // количество элементов сортированного массива, подходящих для вывода
var num = numes - 1;

var ddd = 0;
for(var j = (listNodes.length - 1); j >= (listNodes.length - numes); j --) {
// Объект класса A-строчный, ссылочный элемент
var object_a = document.createElement("A");
object_a.style.display = "inline-block";
object_a.style.position = "relative";
object_a.style.float = "left";
object_a.style.width = "230px";
if(ddd < (numes - 1)) {
object_a.style.marginLeft = -(280 * num) + "px";
num--;

} else object_a.style.marginLeft = 0 + "px";

object_a.href = listNodes[j].linkResource;
object_a.style.textDecoration = "none";
//object_a.style.backgroundColor = "silver";

// Объект класса SPAN- блочный элемент
var object_span= document.createElement("SPAN");
object_span.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif"; // Семейство шрифта
object_span.style.fontSize = "12px"; // Размер шрифта
object_span.style.width = "230px";
object_span.style.height = "170px"; //
object_span.style.position = "relative";
object_span.style.display = "block";
object_span.style.top = "-25px";
object_span.style.overflow ="hidden";
// Объект класса IMG - изображение
var object_img = document.createElement("IMG"); // Создание объета
object_img.width = "230"; // Ширина графической области
object_img.height= "200"; // Высота графической области
//object_img.align = "left";
object_img.style.marginRight = "10px";
object_img.src = listNodes[j].linkImg;

var value_header = listNodes[j].title;
var object_text_node = document.createTextNode(value_header);// Создание текстового объекта

object_span.appendChild(object_img); // Добавить элемент в конец списка

var sptemp = document.createElement('SPAN');
sptemp.style.height = "60px";
//sptemp.style.width = "280px";
sptemp.style.color = "white";
sptemp.style.display = "inline-block";

sptemp.appendChild(object_text_node);
sptemp.style.position = "relative";
sptemp.style.top = "-25px";
//object_span.appendChild(sptemp); // Добавить элемент в конец списка
object_a.appendChild(object_span); // Добавить элемент в конец списка
object_a.appendChild(sptemp);
// Добавить в массив сущностей
array_list[ddd++] = object_a;
}

for(var j = 0; j < array_list.length; j ++) {
base_element.appendChild(array_list[j]);
}

timerAutomat.start();
}
}

// Обработчик события полной загрузки данных в окно
window.addEventListener("load", initSlideBar, false);
//]]>
</script>

<style>
/* Селекторы свойств блочных элементов */
#left-button:hover, #right-button:hover {
cursor: pointer;
}
/* Селекторы свойств блочных элементов */
#wrapper-slide-bar-left {
width: 30px;
height: 150px;
float: left;
}
#wrapper-slide-bar-center {
width: 230px;
height: 185px;
float: left;
color: white;
}
#wrapper-slide-bar-right {
width: 25px;
height: 150px;
float: left;
}
#wrapper-slide-bar-center a:link {
color: black;
}
</style>
<!-- Измененное визуальное оформленеие для слайд-бара -->
<div id="wrapper-base-slide-bar-widget" style="width: 290px; height: 220px; margin: 0 auto; position: relative;">
<div id="wrapper-slide-bar-header" style="width: 290px; height: 30px; "><span style="font-size: 18px; position: relative; color: green; font-weight: bold; margin-left: 30px; top: 5px;">РЕКОМЕНДОВАННОЕ</span> <ul id="slide-bar-list-ul"></ul></div>
<div id="wrapper-group1" style="position: relative; width: 288px; height: 185px; ">
<div id="wrapper-slide-bar-left"><span id="left-button" style="top: 50%; margin-top: -11px; margin-right: 5px; position: relative;display: block; width: 22px; height: 22px; float: right; border-radius: 5px 5px 5px 5px; background-image: url('http://infosona.ru/wp-content/uploads/strelka.png'); border: 1px solid green;" onclick="prevVideoLink();"> </span></div>
<div id="wrapper-slide-bar-center"></div> <!-- В этот блок будут добавляться динамически ссылки на видео с кратким опиcанием -->
<div id="wrapper-slide-bar-right"><span id="right-button" style="top: 50%; margin-top: -11px; margin-left: 3px; position: relative;display: block; width: 22px; height: 22px; border-radius: 5px 5px 5px 5px; background-image: url('http://infosona.ru/wp-content/uploads/strelka-1.png'); border: 1px solid green;" onclick="nextVideoLink();"> </span></div>
</div>
</div>

Затем сохраняете и просматриваете. Не советую менять цвет т.к можно все поломать.

Если Вам понравится, пользуйтесь.

С уважением Вероника.

Как поставить в шапку гаджет

Приветствую всех читателей на моем блоге Успех в Интернет!

Эта статья для тех, у кого блоги расположены на платформе Blogspot. Сегодня я хочу рассказать, как можно поставить гаджет в шапку блога. Как Вы знаете, что у блогера не предусмотрена функция вставки в шапку гаджета.  Спросите для чего это мне нужно, это доплнительное место, куда можно поставить какой — то интересный скрипт, не залезая в шаблон html кода. Заходим в админку и нажимаем изменить шаблон html, сохраняя при этом  резервную копию. С помощью клавиши СTRL+ F вставляем в окно такой тег

<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement= нажимаем ENTER. Меняем на  maxwidgets=’3‘и maxwidgets=’yes
Сначала смотрим шаблон, а потом сохраняем его, если все нормально. Ив адмнке дизайна увидете дополнительный гаджет. В видеоблогах не предусмотрена такая функция navbar. Правда до конца еще не разобралась, но попробую. Можно поставить эту функцию и встроить туда гаджет аналогично. Я подробно рассказала в ролике. Только там необходимо воспользоваться этими тегами  <b:section class=’navbar1′ id=»navbar1′ maxwidgets=’1…. и

<b:widget id=’Navbar1′ locked=’true’ ……

С уважением Вероника.

 

Что такое адаптивный сайт

Привет читателям  сайта Успех в Интернет!  

Что такое адаптивный сайт?

Адаптивный сайт – сайт, который адаптирован на просмотр с любых устройств (планшетов, телефонов, смартфонов и т.д).

Почему я решилась на этот шаг?

Мне постоянно приходили письма от Google, что  мой сайт необходимо настроить на мобильные устройства. Я эти письма игнорировала. Думала,  зачем мне это надо, пока не решила зайти на  Google вебмастер и посмотреть свой сайт.

Там я увидела предупреждение, что мой сайт не сканируется поисковыми системами из – за того, что у меня не настроена мобильная версия. Оказывается, Google c  апреля 2015 года ввел новые правила о настройке сайтов под мобильные устройства.

Последним действием, чтобы адаптировать свой сайт под мобильные устройства, стало заявление моих знакомых, что сайт не корректно отображается у них на своих мобильниках. Можете прочитать о поисковой системе  здесь, я не буду останавливаться на этом.

Я начала искать шаблоны в Интернете. Забивайте поисковый запрос  «адаптивный дизайн на  WordPress» и скачивайте его к себе на компьютер, а затем загружайте на сайт. Потом проверьте его на сайте  https://developers.google.com/speed/pagespeed/insights/.

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

Мои ошибки:

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

Плагин для мобильных устройств, оказывается, такой есть  JetPack
Плагин для сжатия картинок WP Smush

Эти плагины можно скачать с официального сайта или с админки в вставке «плагины» введя в поисковый запрос.

И мои результаты. Нажмите на картинку, чтобы посмотреть.

adaptivnii

Долго не заморачивайтесь с дизайном сайта, выбирайте простоту и удобство для посетителей.
Можно  шлифовать свой сайт годами, чтобы посетители оценили Ваш дизайн, будучи, обладая чувством красоты. Возможно, дизайн они и оценят, но люди, которые уделяют внимание контенту, будут зарабатывать деньги, а вы сосать лапу.

С уважением Вероника.

 

Как установить игру на блог

Здравствуйте уважаемые гости и постоянные читатели моего блога "Успех в Интернет" !

Сегодня хочу рассказать,как можно установить игру на сайт или блог. Сначала расскажу для чего это надо. Есть такой термин "Поведенческий фактор сайта". Это означает, что посетитель задерживается на сайте и блоге достаточное время, поисковые системы это любят и Ваш сайт будет индексироваться лучше. Согласитесь, многие из- за любопытства захотят поиграть, и могут так увлечься, что достаточное время проведут у Вас на сайте. Игру в блог можно поставить в виджет на блоге или создать страницу игры и вставить туда несколько игр. Можно создать полностью блог на эту тематику. На движке WopdPress можно вставлять код в редакции html, при создании поста. Я уже вставила на одном из моих блогов в виджет игры. Можете посмотреть здесь . Давайте перейдем уже к самой установке. В интернете можно найти достаточно информации, где можно взять эти игры. Мне лично понравился этот сайт смотри . Выбираете понравившую игру и нажимаете ее. Открывается игра в полном размере, Вы можете поиграть и Вам дается код, который Вы вставляете на свой сайт, он находиться внизу слева. Копируете его, изменяете размеры в коде под себя.

Я выбрала игру "Оборона деревни". Вот его код.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="760" height="570">
<param name="movie" value="http://www.shum2money.ru/geim/brodilka/arkady/KingdomRush.swf">
<embed src="http://www.shum2money.ru/geim/brodilka/arkady/KingdomRush.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="760" height="570"></embed>
</object><br>
<a href="http://www.shum2money.ru/14.php">Игры аркады</a>

Красным цветом  отмечены размеры, а синее удалите, эта ссылка ведет на сайт, Вам она не к чему. Вы ведь хотите удержать посетителя на своем сайте, а не на чужом. Я думаю Вы справитесь, если возникнут трудности пишите в комментариях, я помогу.

PS Не которые игры не открываются и выходит предупреждение, тогда выберите другую игру.

С уважением Вероника!