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

<EMBED src="URL вашего mp3 файла " autostart=true loop=false volume=100 hidden=true><NOEMBED><BGSOUND src="имя файла mp3"></NOEMBED>


Команды:

Приветствую вас снова уважаемые  читатели, в этой краткой статье мы рассмотрим возможность установки на нашем блоге кнопки "Scroll to top" или Вверх если перевести, она нам необходима для того чтоб наш читатель смог быстро подняться в вверх если он прокрутил длинную статью до конца и как то не приятно когда нужно прокручивать всю статью обратно вверх, по этому мы облегчим ему процесс возврата с ног до головы так скажем.Установка скрипта не сложная, вот сам скрипт:

<!-- Начало Скрипта -->
<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE', EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px; cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Вверх</a>
<!-- Конец Скрипта -->

Скрипт нужно установить сразу перед тегом </body> для этого заходим в панель блогера Настройки - Изменить HTML и ишим в коде (Ctrl + F) тег </body> и вставляем внимание не после него а перед ним.


Вы наверняка заметили что в конце есть ссылка Вверх "<a href='#' id='w2b-StoTop' style='display:none;'>Вверх</a>"

Рад что вы читаете данную статью на моем блоге о возможностях приукрасить и придать динамичности вашему блогу или сайту.В этом  обзоре я пакажу ясный пример установки на блоге или же на своем сайте "цифровые часы" с детальным обзором настройки.javaScript  помогает нам вебмастерам придать своему интернет-ресурсу динамичности по этому мы воспользуемся этим приоритетом.Ближе к скрипту, выглядит он не сложно и пустить даже вы явасцрипт не изучали вам не трудно будет с этим скриптом разобраться.Вот сам сцкрипт:

<script type="text/javascript">

function showTime()

 {

  var dat = new Date();

  var H = '' + dat.getHours();

  H = H.length<2 ? '0' + H:H;

  var M = '' + dat.getMinutes();

  M = M.length<2 ? '0' + M:M;

  var S = '' + dat.getSeconds();

  S =S.length<2 ? '0' + S:S;

  var clock = H + ':' + M + ':' + S;

  document

    .getElementById('time_div')

      .innerHTML=clock;

  setTimeout(showTime,1000);  // обновить  1 раз в секунду.

 }

</script>

<div id="main"> 

<div id="time_div" style="font-size:28px;color:orange;font-weight:700;font-family:Verdana;background-color:transparent;margin-left:80px;">

<script type="text/javascript">

  showTime();

</script>

</div>

</div>

Что мы имеем здесь, это сам скрипт которого нет необходимости изменить и перейдем мы ко второй части данного кода и видим тег <div id="main">  который содержит еще 1 тег  <div id="time_div" style="font-size:28px;color:orange;font-weight:700;font-family:Verdana;background-color:transparent;margin-left:80px;">  и в нутри его стоит скрипт что отвечает за отображением времени из функций showTime(); .Нас интересует именно внешний вид часов по этому обратим внимание на  второй div что содержит стили:

<div id="time_div" style="font-size:28px;color:orange;font-weight:700;font-family:Verdana;background-color:transparent;margin-left:80px;">

Теперь разберем что нас интересует по внешнему виду скрипта:

1.font-size:28px; - это размер шрифта и можете менять на свое усмотрение также  ка и все остальные css  стили;

2.color:orange; - это цвет текста часов, то есть цвет цифр;

3.font-weight:700;- здесь мы определяем жирность шрифта в интервале от 100 до 900;

4.font-family:Verdana; - здесь указано семейство шрифтов;

5.background-color:transparent; - задаем прозрачный фон для тега <div id="time_div" > в котором содержится скрипт часов.

6.margin-left:80px; - здесь указан отступ текста с левой  стороны от сайд бара или от другово дива в котором находится наш див  <div id="time_div"> его можете поменять на свое усмотрение.

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

 

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

LiveInternet -Один из крупнейших интернет-проектов среди русскоязычных сайтов для учета посещаемости сайтов.

24Log -Сайты, установившие счетчик, выводятся на странице Рейтинга сайтов с прямыми ссылками, а это повышает  индекс цитирования сайта в яндексе.

RAMBLER Top 100 -Счетчик и добавление сайта в рейтинг ТОП 100 каталог.Можно подобрать счетчик под дизайн блога.

HotLog -Позволяет  настроить "Невидимый счётчик" и таким образом он не портит  дизайн сайта, участие в рейтинге и расширенные пакеты статистики как :

HotLog GOLD- сбор/обработка статистики на выделенном удальеном сервере,включены все сервисы,подробные отчеты без ограничений времени хранения на сервере и приоритетная поддержка клиента.

HotLog SILVER- Статистика по страницам c параметрами запросов,задание до 10 целей, данные об IP-адресах  ваших посетителей,точки входа и выхода на вашем блоге или сайте.

Рейтинг@mail.ru -Учет статистики вашего блога или сайта ,регистрация в каталоге рейтинга Mail.ru.

InetLog -Множество отчетов для анализа посетителей вашего сайта или блога.

Openstat -Возможность установить почти невидимый счетчик.Статистика  собираются не сразу после установки счетчика и требуют подтверждения регистрации по email.

Google Analytics — это сервис, который предоставляет компания Google, для создания расширеннои статистики посетителей веб-сайтов.

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

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

Большой плюс Мета тегов тот что они не выскакивают на страницах сайта и некому не мешают но они очень важны для роботов которые читают корневой код сайта, они там должны найти "Descrition" и "Keywords" с английского описание и ключевые слова и мы им поможем .


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

<meta name="title" content=" Имя вашего сайта " />

<meta name="description" content="Короткое описание сайта " />

<meta name="keywords" content="ключевые, слова, через, заппятую " />

<meta name="owner" content=" Еmail адрес автора сайта , пример: colealucas@gmail.com " />

<meta name="author" content="Имя автора сайта " />

<meta http-equiv="expires" content="Mon, 31 Dec 2016 00:00:01 PST" />

<meta http-equiv="content-language" content="Russian" />

<meta name="robots" content="index,follow" />

<meta name="revisit-after" content="1 weeks" />

<meta http-equiv="charset" content="utf-8" />

<meta http-equiv="vw96.object type" content="Homepage" />

Теперь давайте проанализируем жизнено важные мета-теги для нашего блога 

первый мета тег это ' title' - название вашего сайта, думаю здесь все понятно, второй мета тег очень важный по этому будьте внимательны потому что содержание этого мета тега будет высвечиваться как краткое описание в поисковиках, и значит описание должно быть краткое и понятное!

На третьем месте у нас ключевые слова, здесь тоже чательно придумайте и проанализируйте с помощью сервисом анализа ключевых лов (wordstat.yandex.ru и Google Adwords ) и далее составляйте не большой список  ключей что подходят именно вам. На четвертом уровне мета тег должен содержать электронную почту автора сайта, а на 5 уровне пишем Имя Автора сайта.Шестой уровень оставляем неимененим, по сути этот мета тег не играет большую роль но пусть участвует в нашем списке.Следующий мета тег это  content-language, язык контента и сайта в целом, на моем блоге  язык и там должно быть Russian.

Следующий  мета тег крайне важен для существования нашего интернет ресурса по этому мета тег robots должен иметь значение index,follow, и это значит что сайт доступен для индексации поисковых машин.Мета тег в нашем списке под номером 9 ' revisit-after' определяет интервал   между посещениями нашего блога поисковых роботов, и принимает значения "1.month - месяц  2.weeks - недели  и 3.days - дни" другими словами если вы желаете чтоб вашего блога поисковые роботы посещали каждую неделю то ставите значение ' 1 weeks' как в примере списка. 

Следует в нашем списке мета тег кодировки, он также очень важен для нашего блога по этому его   задавать правильно, часта используется кодировка utf-8 как и в нашем примере.И на последок в нашем списке мета тег  object type - то есть ты сайта, здесь есть различные значения ( Forum, Faq и.др.) но в нашем случае это Home  Page - в перевод с английского 'Домашняя  Страница ' .Вот и закончили  очередной урок из жизни блогера, если понравилась статия прошу оставьте отзыв или поделитесь ссылкой ;) а если есть вопросы  в комментариях, также следите за новостями, скоро появятся интересные статьи.

1. <meta name="title" content=" Имя вашего сайта " />

2. <meta name="description" content="Короткое описание сайта " />

3. <meta name="keywords" content="ключевые, слова, через, заппятую " />

4. <meta name="owner" content=" Еmail адрес автора сайта , пример: colealucas@gmail.com " />

5. <meta name="author" content="Имя автора сайта " />

6. <meta http-equiv="expires" content="Mon, 31 Dec 2016 00:00:01 PST" />

7. <meta http-equiv="content-language" content="Russian" />

8. <meta name="robots" content="index,follow" />

9. <meta name="revisit-after" content="1 weeks" />

10. <meta http-equiv="charset" content="utf-8" />

11. <meta http-equiv="vw96.object type" content="Homepage" />

* Детство - это когда у фразы "не дам" только один смысл.

Вам нужно установить Облоко тегов на Blogger или на свой сайт? тогда читаем данную статью в которой я рассмотрю возможность быстрой установки данного виджета для Blogger, а также для других сайтов.

- Установка облоки тегов для Blogger совсем не сложный процесс, но данный метод не всегда работоспособный по этому сморим на данный метод по отдельности.Итак давайте опишем все действия, заходим в админку Блоггера, нажимаем на вкладку "Дизайн", выбираем место на странице где мы хотим разместить наш виджет и нажимаем на "Добавить гаджет", далее выбираем не гаджет из списка а находим с левой стороны вкладку "Свой Собственый".


 нам откроется инпут для ввода url адреса гаджета, вот тудамы все стираем и вставляем эту ссылку:  http://b-cumulus.googlecode.com/svn/tags/3.0/b-cumulus.xml и нажимаем далее на ссылку "Добавить по URL ".Вам откроется окошко для настройки гаджета (ширина, высота, цвет фона, цвет меток,прозрачности и.др.) эти настройки уже на ваше усмотрение.

Данный метод не всегда работает и для него есть альтернатива.Есть скрипт написаны на Яваскрипте, называется он "Облоко тегов", его мы можем редактировать на свое усмотрение, а выглядит он таким обозом:

<script type="text/javascript" src="http://orlenok.do.am/swfobject.js"></script><div id="wpcumuluswidgetcontent"><p align="center"> 
Для красивого отображения Облака тегов       
<br /> 
необходим       
<br /> 
Adobe Flash Player 9 
<br /> 
или выше 
<br /> 
<a href="http://www.adobe.com/go/getflashplayer" target="_blank" rel="nofollow"><font color="ff3366"><b>Скачать Adobe Flash Player</b></font></a></p></div><script type="text/javascript">var rnumber = Math.floor(Math.random()*9999999);var widget_so = new SWFObject("http://orlenok.do.am/tagcloud.swf?r="+rnumber, "tagcloudflash", "200", "200", "5", "#ffffff"); widget_so.addParam("allowScriptAccess", "always");widget_so.addVariable("tcolor", "#333333");widget_so.addVariable("tspeed", "150");widget_so.addVariable("distr", "true");widget_so.addVariable("mode", "tags");widget_so.addVariable("tagcloud", "<tags><a href='ВАША ССИЛКА' style='12'>ИМЯ ВАШЕЙ ССЫЛКИ </a><a href='ВАША ССЫЛКА ' style='12'>ИМЯ ВАШЕЙ ССЫЛКИ </a><a href='http://niculucas.blogspot.com/p/cms-wordpress.html' style='12'>Wordpress</a><a href='http://niculucas.blogspot.com/p/blog-page.html' style='12'>Контакты</a><a href='http://dfiles.ru/files/re9ovynh2' style='12'>Скачать Artister 4.0</a><a href='http://niculucas.blogspot.com/' style='12'>Nick Templates</a><a href='http://www.facebook.com/nick.templates' style='12'>NT на Facebook</a><a href='http://www.odnoklassniki.ru/group/54573295337488' style='12'>NT на Odnoklassniki.ru</a><a href='https://twitter.com/Nicuxd' style='12'>NT на Twitter</a><a href='http://vk.com/nick.templates' style='12'>Мы Вконтакте</a></tags>");widget_so.write("wpcumuluswidgetcontent");</script>

* Я выделил  большими буквами места где вы должны ставит ваши ссылки и Имя вашей ссылки, а ниже есть примеры силок и их названия выделены зеленым цветом.
* Только для блоггеров.После редактирования вставляем его в нужное место на странице с помощью  гаджета. HTML/Javascript.

Добро пожаловать на моем сайте.Я опять пишу интересные статьи для своих читателей, а рассмотрим мы сегодня возможность создания 3D каруселях для сайта.Для чего может понадобиться карусель? все очень просто, для динамического взаимодействия с читателем вашего интернет ресурса, и плюс к этом он выглядит роскошно,привлекает внимание "неосторожнйих" посетителей и его можно легко переделать под свой нужды.Итак давайте опишем процедуру для быстрого создания 3D каруселя.

Данное изобретение идет с сайта professorcloud.com.На сайте подробно описано процедура создания каруселя, но мы рассмотрим быструю и внятную методику его генерирования на страницах собственного сайта или блога.

1.Шаг первый
.Для начала нам нужен HTML каркас каруселя, ниже я привожу пример полной HTML страницы которая содержит весь необходимый код разметки а также скрипты языка Javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>  Carusel 3d</title>

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript"  src="js/jquery.js"></script>

<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript"  src="js/cloud-carousel.1.0.5.js"></script>

<script>
$(document).ready(function(){
  
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
xPos: 360,
yPos: 70,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text")
}
);
});

</script>
</head>

<body>
<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:750px; height:400px;background:#2D342C; border:2px solid #3AE2CE; border-radius:4px; overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel"  src="logotip.png" alt="Free Templates For CMS" title="Nick Templates" />
<img class = "cloudcarousel"  src="music-is-my-life.png" alt="Music Is My Life Template" title="Music Category" />
<img class = "cloudcarousel"  src="comunications.png" alt="Comunications Template" title="Relations Category" />
<img class = "cloudcarousel"  src="car-wash.png" alt="Luxury Car" title="Cars Category" />
            <img class = "cloudcarousel" src="artefact.png"  alt="Artefact Template" title="History Category" />
            <img class = "cloudcarousel"src="big city.png"  alt="Big City Template" title="Social Category" />
            <img class = "cloudcarousel"src="template_preview.png"  alt="Counter - Strike Template" title="Games Category" />
        </div>
        
        <!-- Define left and right buttons. -->
        <input id="left-but"  type="image" src="left.png" value="Left" />
        <input id="right-but" type="image" src="right.png" value="Right" />
        
        <!-- Define elements to accept the alt and title text from the images. -->
        <div style=" width:750px; padding-left:10px; color:#D0FF00; height:80px;background:#2D342C; border:2px solid #3AE2CE; border-radius:4px; overflow:hidden;">
<p id="title-text"></p>
        <p id="alt-text"></p>
</div>
</body>
</html>



2.Шаг второй.
Теперь нам нужно подключить библиотеку JQuery и библиотеку cloud-carousel.1.0.5  для правильного отображения каруселя.JQuery  подключаем таким оброзом, между тегами <head> ...  </head> пишем данную строку:
<script type="text/javascript" src="http://ajax.googleapis.com/ajах/libs/jquery/1.3.2/jquery.min.js"> </script> .Это означает что мы подключили JQuery  с  стороннего сайта.Не забываем подключить также библиотеку cloud-carousel.1.0.5 таким оброзом:

<script type="text/JavaScript"  src="js/cloud-carousel.1.0.5.js"></script>
В атрибуте src пишем правельный адрес до этого javascript файла.У меня в примере src="js/cloud-carousel.1.0.5.js"> файл находится в папке js.

3.Шаг третий.
На этом этапе мы подключим свои картинки для их отображения в каруселе, рекомендую подготовить их заранее, и желательно чтоб все они были единого размера.между тегами <body>....</body>  ищем тег <img /> и для атрибута пишем  src="полный адрес картинки" .Привожу пример:
<img class = "cloudcarousel"  src="myhosting/images/template1.png" alt="Template 1 Description" title="Template  1 Title" />
Заметьте что для атрибута src пишем полный адрес до вашей картинки, в атрибуте alt пишем описание данной картинки, а в title ее заголовок, хотя это совсем не обязательно.Если вам нужны 5 картинок в каруселе, у вас должны быть 5 тегов <img />.

4.Шаг четвертый .
Настройка каруселя под своего сайта.После tega <body > находим следующий комментарии:

<!-- This is the container for the carousel. --> это контейнер карусели, а на одну строку ниже находим параметры тега <div > и выглядит это строка так, <div id = "carousel1" style="width:750px;  height:400px; background:#0f0; overflow:scroll;"> 

Для атрибута id ничего не меняем, иначе он не будет работать правильно или совсем не будет слушаться.Менять мы будем значения атрибутов width, height, background, и owerflow.Width это ширина каруселя, height это его высота, background это цвет фона, owerflow определяет что делать с контентом если он не влизает в задание параметры ( например у вас контейнер с шириной и высотой  в 600x400 пикселей, а в нем картинка 640x410 px.).В моем примере скрол означает что контент если видит из заданных приделов он будет показываться  с помощью полос прокрутки, также сушествуют значения hidden (скрытый) и auto (определять автоматически).Таким образом мы настроили внешний вид каруселя.

5.Шаг пятый .
Далее будем настраивать следующие параметры каруселя, расстояние между картинками ориентируясь по осям X и Y.Зададим параметр автоматического ворошения картинок, интервал вращения и его скорость .

- Расстояние между картинками следуем менять окутано ориентируясь по осям, для этого нам нужно сделать следующее:
 Находим в HTML каркасе комментарии // This initialises carousels on the container elements specified, in this case, carousel1.Чуть ниже видим значения: (Пример  xPos: 360 и yPos: 70).Нам придется поиграться с этими зачениями пока не получается  красивое пропорциональное распределение картинок карусели.Далее открываем с помощью блокнота файл cloud-carousel.1.0.5 и прокручиваем его до самого конца, и выгладит он таким образом:

// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
$.fn.CloudCarousel = function(options) {

this.each( function() {

options = $.extend({}, {
  reflHeight:0,
  reflOpacity:0.5,
  reflGap:0,
  minScale:0.3,
  xPos:0,
  yPos:0,
  xRadius:350,
  yRadius:90,
  altBox:null,
  titleBox:null,
  FPS: 30,
  autoRotate: 'yes',
  autoRotateDelay: 1000,
  speed:0.01,
  mouseWheel: false,
bringToFront: false
},options );
// Create a Controller for each carousel.
$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
});
return this;
};

})(jQuery);

Теперь меняем значения  xRadius:350, и  yRadius:90, для создания пространства между картинок и определения угла их отоброжения.Если чтото непонятно, попробуйте поиграться с этими значениями и сами все поймете.

- Ниже наим строку  autoRotate: 'yes', это означает что мы выбрали режим автопрокручивания картинок, если вместо yes писать no то картинки сами не будут крутиться.

- Параметр autoRotateDelay: 1000, определяет через какое время должно повториться прокручивание в миллисекундах.Если вы желаете чтоб они крутились каждые 2 секунды, пишем вместо 1000, 2000.

- Параметр   speed:0.01, определяет скорость прокручивания картинок.В маем слчии он оптимальный, вы с ним тоже можете поиграться.

* Теперь важной пункт оформления каруселя.Для прокрутки картинок используются кнопки left и right, я подумал что будет красивее  если туда вместо классических  кнопок поставить красивые яркие картинки, и соглоситесь что смотрятца лучше.Дале мы можем кросиво выводит ниже стрелок передвижения, имя картинки и ее описание.Для боле професианального уровня можем поставить как background красибю картинку, но это уже на ваше расмотрение.Ну вот и все, мы создали очень красивый и яркий карусель картинок.Исходные материалы вы можете скачать 

Если всео прошло успешно и вы просто довольны статьой  то не поленитесь и посоветуйте ее кому то из друзей или оставьте ваш скромный  LIKE на официальной Facebook странице Nick Templates.