Blogger - blogspot, как поменять favicon

Blogger - blogspot, как изменить фавикон (favicon).

Здравствуйте друзья. Нравится мне, когда некоторые из начинающих блогеров задают мне вопрос: "А как поменять вот эту картиночку, ну вот эту квадратную маленькую в самом вверху блога". И ты сидишь такой думаешь, что за чудо картиночка то такая. Хорошо, что некоторые хоть дают примерные координаты: "Ну та, которая находится в браузерной вкладке". Да, есть там такая картиночка и называется она favicon.

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

Изначально в blogger отображается стандартный favicon с его же логотипом. Для замены вам необходимо иметь картинку размером 16х16. Дальше в панели управления нужно выбрать раздел Дизайн, здесь в верхней части страницы вы увидите свой текущий фавикон - значок и ссылку Изменить, кликаем по этой ссылке и при помощи открывшегося окна загружаем со своего компьютера новый favicon. Очень важно, новый значок по началу будет отображаться только в панели управления, через несколько часов изменения вступят в силу и во вкладках браузеров. В Яндексе для этого потребуется намного больше времени.

Dionis премиум шаблон для blogger на русском


Dionis адаптивный шаблон для blogger - blogspot на русском языке.

День добрый друзья. Мы подготовили для вас очередной шаблон для blogger, который заставит поисковые системы полюбить ваш сайт еще больше. Итак Dionis сочетает в себе легкость, простоту и эффективность. Он является одним из самых быстро действенных шаблонов, что очень важно на сегодняшний день. Все его виджеты должным образом подстраиваются под дисплеи разных устройств, что так же является не мало важным фактором. Его можно использовать практически под любую тематику.

Dionis был укомплектован современными виджетами, что в действительности отличает его от предыдущих шаблонов. Правда внешне такого различия не заметить, потому что изменения коснулись внутренней части виджетов. Ко всему добавим, что эти изменения затронули не все его составные. Несколько интересных вещей мы припасли на будущее. А пока что у вас есть возможность поближе познакомится с одним из лучших шаблонов для blogger.

Демо
Приобрести шаблон полная SEO версия

Как начать зарабатывать на своем сайте?

Заработок на сайте

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

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

Три главных шага для заработка на сайте


Первый шаг - завести свой сайт - блог. Ну, это понятно, без удочки на рыбалку нечего идти. В предложенном разделе вы узнаете, как создать свой сайт или блог за 5 минут. Да, самое простое в этом деле это создать, хотя многие думают наоборот, мол создать сайт это нечто непостижимое, а вот заработать на нем раз плюнуть. Так вот, на сегодняшний день это мнение ошибочное. Да, лет так десять назад обзавестись своим сайтом было более проблематично, а вот заработать на нем в те дни, было намного легче. После нужно подобрать подходящий шаблон blogger, потому как стандартные имеют обделенные возможности.

Второй шаг - наполнение сайта - блога содержимым (контентом). Итак, удочка у нас уже есть, но без наживки можем смело разворачиваться и идти в лес по грибы. Правильно поняли в нашем деле наживка это контент сайта - блога, без него не будет улова, то есть посетителей. Перед тем, как завести ресурс вы должны были определится с его тематикой. Если вам трудно писать статьи для своего веб-ресурса в таком случае вы можете обратится к сервисам предоставляющем данную услугу. К примеру на eTXT.ru вы легко можете заказать статью на любую тему.   

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

Итак три несложных шага и вы уже практически на пол пути к желанному заработку.

Партнерки для сайта и блога на любом хостинге

Монетизация сайта и блога с помощью партнерских программ.

Многим известно, что основной заработок вебмастера получают от партнерок. Что такое партнерка? Партнерка - это сайт посредник между вебмастерами (блогерами) и рекламодателями. Когда владельцу, блога или другого веб-ресурса нужно быстро и качественно прорекламировать свой проект с товарами или услугами он обращается к посреднику, заказывает у того рекламу своей площадки и вскоре получает заинтересованных посетителей, ну а вебмастер - блогер, который прорекламировал рекламодателя получает за это определенную плату. Оплата зависит от типа рекламы, к примеру баннеры, контекстная реклама, тизеры, bodyclick, popunder, clickunder, iframe, слайдеры, сообщение вконтакте, icq, youtube и множество других.

Партнерка с высокой оплатой за клик. Принимаются любые сайты - блоги можно использовать соцсети и т.д. Bestchange - это сервис обмена электронных валют, здесь можно не только выгодно обменять валюту но и неплохо заработать. Если у вас сайт о заработке или вы продаете что-то, тогда эта партнерка в самый раз. Оплата идет за переход посетителя на Bestchange.ru чем больше действий он осуществит тем больше денег вам зачислят. За одного посетителя можно получить от 0.04$ до 0.35$ неплохо не так ли. К тому же на Бестчейндж действует 2-ох уровневая реферальная программа. 15% получаете от дохода реферала первого уровня и 5% от реферала второго уровня. В общем все для людей. Накрутка не приемлема, лихачей вычисляют при заказе выплаты и банят без каких либо угрызений совести.


Shorte.st популярная во всем мире партнерка для сайтов - блогов и не только. В основном предлагает заработать своим пользователям на сокращении ссылок, но есть и другие форматы рекламы. Если у вас сайт или сообщество, которые предоставляют своим посетителям услуги скачивания различных материалов тогда вы однозначно будете в плюсе. К примеру у нас есть простая ссылка, которая ведет на другой блог, мы эту ссылку сокращаем в shorte.st выставляем ее на своем сайте или в своей социальной сети и при переходе откроется окно с рекламой, которую нужно просмотреть 5 секунд после этого пользователь нажимает кнопку пропустить рекламу и попадает по нужному адресу. В общем все просто и оплата довольно высокая в среднем 0.0004$ - 0.0005$ за один переход по ссылке. Минимальная сумма выплаты 5 долларов. Заработанные на партнерке деньги можно выводить на платежные системы Webmoney, Paypal и Payoneer. Оплата происходит автоматически, раз месяц.


Для начинающих вебмастеров в самый раз. Работаю с ними уже около года. Заработал на этой партнерке чуть более 10000 тысяч рублей. Формат рекламы баннеры и контекстная рекламы. Оплата насчитывается, как за клики так и за показы. Принимаются любые площадки в том числе и на бесплатном хостинге, с посещаемостью от одного человека в сутки. Минимум к выплате 1 доллар. Выводят в течении 24 часов.


Tak.ru
Так же подойдет для начинающих вебмастеров - блогеров. Принимаются любые сайты. Посещаемость не имеет значения. Формат контекстная реклама. Минималки к выплате нет. Деньги поступают на кошелек в течении часа. Средняя цена за клик 30 копеек. Заработал здесь около 15 тысяч рублей.


Партнерка работает с любыми площадками. Форматы рекламы clickunder (клик в любом месте приводит к переходу пользователя на ресурс рекламодателя), popunder, message, слайдеры. Минималка к выплате 40 рублей. Средняя цена за переход одного пользователя 6 копеек. Выплаты осуществляются раз в неделю по вторникам. Запрещается трафик с CAP сервисов seosprint, wmmail и прочие. Важно!!! Владельцы попандера не так давно решили сменить дизайн. После этого у многих пользователей Popunder.net появились проблемы с заходом, а новые пользователи и вовсе не могут зарегистрироваться. Вся проблема заключается в том, что у таких пользователей установлен в браузере Adblock. Отключите Adblock и проблема решена.


Партнерка платит стабильно, минималки к выводу нет. В среднем за клик по рекламе выходит около 30 копеек. Так же принимаются блоги на бесплатном хостинге. Формат рекламы баннеры и контекстная реклама. После клика по рекламе посетитель должен прописать капчу, чтобы его перекинуло на рекламируемую площадку.


Формат рекламы тизеры, pop-under. Принимают любые сайты с суточной посещаемостью от 200 человек. Минимальная сумма выплат 300 рублей. Должены пройти модерацию. По личному опыту скажу, что на момент регистрации у меня была посещаемость 200 - 400 и больше в день, но даже после спада до 50 - 100 сотрудничество не прекращалось.


Что бы получать более менее нормальный доход от этой партнерки нужно иметь посещаемость хотя бы 300 человек в сутки. Формат рекламы clickunder (клик в любом месте сайта приводит к переходу пользователя на ресурс рекламодателя), autodirect(любое движение мышки приводит к тому же исходу) refhunter. Принимаются любые площадки в том числе и на бесплатном хостинге. Средняя цена за один переход 4 копейки.
Формат рекламы iframe. Принимаются любые сайты. Оплата от 0.3$ до 2.5$ за тысячу переходов. Радует, что партнерки выкупают любой трафик даже с CAP сервисов. Лично я в свое время использовал дешевый серфинг к примеру RubSurf где серфинг стоит от 4.5 рублей за тысячу переходов. Таким способом рекламирую свои проекты и отбиваю потраченные средства на рекламу, не говоря уже о пользователях, которые воспользовались услугами и принесли дополнительную прибыль. Так же можно найти бесплатный автосерфинг (бесплатные посетители) и неплохо зарабатывать таким способом. Минималка к выплате Goldentraff 0.25$ и RuiFrame 1$. Выплаты осуществляются раз в неделю.

Быстрые деньги заработок в интернете без вложений

 Быстрые деньги заработок в интернете без вложений

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

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

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


Заработок и обмен электронной валюты на сайте Bestchange

Доброго времени суток уважаемые пользователи нашего информационного ресурса. Сегодня хотелось бы преподнести вам очень интересную информацию о заработке в интернете без вложений. В сети уже много лет функционирует сайт обмена электронных валют Bestchange, именно благодарю ему можно не только выгодно обменять валюту в интернете, но и неплохо заработать на этом. Итак для того, что бы заработать нам нужно привлекать людей заинтересованных в обмене валют, либо пользователей, которые будут так же рекламировать эту услугу. За каждого человека который перешел по вашей ссылке на Bestchange и совершил на нем один переход, вы уже получаете 0.04$ - это весьма неплохо ведь таких расценок только за переход на сайт почти никто не платит. Более подробное начисление средств за привлечение пользователя вы можете увидеть на сайте в разделе партнерам -> условия партнерской программы.

Так же, вы будете получать дополнительную оплату со своих рефералов, то есть тех, кто зарегистрировался на сайте по вашей реферальной ссылке (реферал второго уровня). В общем числе это 15% от заработка реферала второго уровня и 5% от реферала третьего уровня (реферал третьего уровня это пользователь, который зарегистрировался по ссылке того, кто регистрировался по вашей ссылке).

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


Раскрутка сайта и заработок на Autodengi.com

Доброго времени суток всем трудягам и лентяям. Сегодня в этой теме я расскажу вам, о еще одном способе заработка в интернете, при этом почти ничего не нужно делать. Где-то на днях я модерил свою группу вконтакте о заработке в интернете без вложений и наткнулся на один интересный пост в котором кратко и ясно написали: "Деньги на автомате включил и забыл". Еще не перейдя по ссылке у меня в голове уже возник домысел о том, что же это может быть и я таки оказался прав, это известный многим "арбайтерам" в интернете серфинг сайтов, правда автоматический, который выполняет программа-браузер. Я даже знаю от кого этот проект пошел. Кто читал мои статьи о заработке на сайте знает, что есть такой веб-сервис Livesurf для раскрутки сайтов, там та же схема, правда вместо денег вы получаете кредиты, которые тратите потом на покупку посетителей для своего сайта. А на сайте Autodengi.com оплачивают уже не кредитами, а настоящими деньгами. Оплата происходит в рублях и выплачивается по понедельникам, минимальная сумма для выплаты 15 рублей на webmoney. В общем для того, чтобы начать зарабатывать, вам нужно скачать и установить на свой компьютер программу для просмотра сайтов. Если ваш антивирус начнет ругаться на программу не переживайте, она не несет никакого вреда, знаю по личному опыту ведь уже не один год работаю с их первым проектом Livesurf где используется та же программа. Теперь касательно самой прибыли, за 1000 посещений вам будут начислять где-то около одного - двух рублей, за день на ваш баланс будет капать примерно 5 рублей. Конечно маловато и хотелось бы больше. Но вы ничего не делаете, за вас работает программа, а вы в это время можете продолжать заниматься своими делами. К тому же для большего заработка существует партнерская программа, которая будет оплачивать вам с каждого вашего реферала 21 процент от его заработка. Вот тут уже более интересно, чем больше людей вы привлечете тем больше заработка это понятно. Но где их найти? Можно заходить на тематические сайты о заработке в интернете и оставлять там свои посты или комментарии со своей реферальной ссылкой, так же, как и я увидел этот пост в своей группе. Или же если у вас есть свои сайты пишите и рассказывайте это еще более лучший вариант. Так же можете привлечь реферала воспользовавшись почтовиками (буксами) думаю многие знают, что это такое. Кто не знает, что такое почтовики прокручиваем сию страницу вниз до заработка на сайтах wmmail и seosprint .

Blogger - blogspot как удалить, поменять местами Следующее Предыдущее

Blogger - blogspot как удалить, поменять местами ссылки Следующее Предыдущее

Вечер добрый друзья. Мы продолжаем наше движение в направлении создания идеального сайта - блога. Сегодня приведу в пример очередной жизненный опыт по работе с blogger. Помню на своем первом блоге мне хотелось многое убрать, сюда же относились ссылки Следующее и Предыдущее. И вы знаете, как раз эти составляющие шаблона удалять не следует, не поверите даже могу объяснить почему. В общем эти ссылки важны, как для нормальной сео оптимизации сайта - блога, так и для их посетителей. При них сайт - блог становится более сео дружественным (seo friendly), короче нравится это поисковикам, ведь с помощью ссылок Следующее и Предыдущее им легче метаться по вашим веб-ресурсам. Тоже самое и с посетителями, только дружественным тут уже является не сео оптимизация, а дизайн или функционал кому, как больше нравится . Живой пример, посетитель вашего сайта - блога прочел пост и чтобы не возвращаться на главную страницу он может продолжить чтение вашего контента при помощи этих ссылок.

Итак важность уяснили, удалять не стоит. Как поменять местами ссылки Следующее и Предыдущее. Переходите по ссылке и ознакамливаетесь с материалом.


Создание сайтов бесплатно конструктор

Создать сайт бесплатно на конструкторе

В очередной раз хотелось бы акцентировать ваше внимание на создании собственного сайта на конструкторе blogger (blogspot). Знаю, что многие сейчас думают мол создать сайт это нечто из области фантастики, но на самом то деле все гораздо проще, чем вы себе могли бы представить.

Ну начнем пожалуй с того, что на улице уже 21 век и все, что нам казалось таким недоступным в его начале уже стало вполне прощупываемым. При этом не нужно обладать какими-то специальными знаниями, поскольку благодаря хорошим людям можно осуществить, то чего нам так хотелось. Но это не значит, что нам самим при этом не нужно вникать в эти процессы, если мы уже за что-то взялись, то это обязательно нужно довести до логического завершения. Под этим подразумевается то, что вы по ходу дела должны получить хотя бы минимальные знания, конечно это и не обязательно, ведь с пустым чемоданом путешествовать легче нежели с набитым доверху, но не в нашем случае. К чему это я веду, а к тому, что вы можете получить уже готовый сайт, да да, все верно готовый, нужно всего-то разобраться в его функциональности на что у вас может уйти минимум 2 часа, максимум пол года, в зависимости от того на сколько вы хотите разобраться на 5% или на все 100%. Хотя, если честно вам будет достаточно и тех 5% для нормального и стабильного дохода. Работая с уже готовым сайтом вы потихоньку обучитесь, как развивать его, своими зоркими глазами оцените, что ему нужно, каких элементов не хватает, как приукрасить и определить изюминку вашего веб-ресурса. Лично я, научился всему, что сейчас знаю о сайтах - блогах с помощью гугла, а так же с помощью своей любопытности, ни какими знаниями программирования я не владел, в принципе я и сейчас ими не владею, но это не мешает мне изменить в сайте тот элемент, который нужно. Забавно, не так ли.

Не раз я уже писал о пользе сайта, по-этому в этой статье я не буду говорить об этом. Я считаю, что каждый из вас может сделать свой сайт, для работы, развлечения, да ради Бога за просто так, хотя бы для того, чтобы посмотреть, что это такое и с чем его едят. Почему это интересно? А потому, что существуют разные тематики сайта, спорт, кино, экономика, бизнес, отдых, кулинария, путешествия, красота, мода, форекс, машины и прочие интересные темы, которыми интересуется каждый из вас. Так почему не изложить свое мнение касательно этакой темы в которой вы чувствуете себя комфортно и поделиться этими знаниями с миллионами  людей, получая при этом неплохой доход.

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

Sparkle шаблон для blogger - blogspot

Sparkle шаблон для blogger - blogspot с отзывчивым дизайном.

Вечер добрый дорогие блогеры и вебмастера. Сегодня на нашей улице небольшой праздник так, как мы подготовили очередной шаблон для blogger - Sparkle. Хотим вам сказать, что шаблон довольно таки уникальный. Тип постов на главной странице называется Grid - Сетка. И в большей мере его стиль чем-то напоминает аккаунт в google + так что, если вам нравится подобный тип сайтов, тогда Sparkle вне всякого сомнения это лучший выбор для вашего сайта - блога. Посты на главной странице передают отличное качество, как изображений так и видео (youtube, vimeo и др.). Тематика может использоваться абсолютно разная от развлекательной до новостной. теперь давайте поближе ознакомимся с шаблоном и узнаем, что в нем изменилось. Стандартное главное меню смотрелось неплохо, но оно мешало дальнейшей обработке шаблона, по-этому мы добавили другое меню, которое включает в себя поисковое окно. Ярлыки имеют два разных вида. Добавили хлебные крошки в новой обложке. Комментарии оснащены смайликами. Так же при загрузке главной страницы (это было в шаблоне изначально мы же изменили саму анимацию) и дальше по навигации срабатывает виджет preloader (анимация которая длится ровно столько, сколько загружается страница сайта - блога), недавно мы упоминали, как его установить. И еще много разных мелочей освоилось на новом месте. Лучше всего это можно разглядеть в демо версии.

Шаблон только для блогов на HTTP
Демо
Скачать бесплатную версию
Приобрести шаблон полная SEO версия

Всплывающий виджет похожие сообщения (related posts)

Blogger - blogspot устанавливаем на сайт - блог всплывающий виджет похожие сообщения (related posts).

День добрый друзья, наконец то настала долгожданная суббота, можно отдохнуть и взяться за улучшение своих сайтов и блогов. Сегодня у нас нечто особенное в программе, мы покажем, как установить на сайт - блог крутейший виджет похожих сообщений. Он существенно отличается от своих старших братьев. К примеру он всплывает на странице сообщения после прокрутки страницы вниз, если вернуть страницу в исходное состояние виджет прячется обратно. Так же он имеет несколько других замечательных функций: его можно свернуть или закрыть, как страницу браузера и естественно в нем присутствует функция отзывчивого дизайна (responsive design). Еще к плюсам можно отнести его легкость, то есть он не так нагружает страницу, как предыдущие версии. Пример виджета смотрим на тестовом блоге.

Для установки нужно перейти в раздел Шаблон - Изменить HTML ищем код ]]></b:skin> и перед ним вставляем:


/* Recommended Widget */
#chslidingbox{background:#fff;width:100%;max-width:355px;height:305px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out;}
.chslidingbox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}a#chslidingbox-close, a#chslidingbox-close {margin-right:15px;}
.chslidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}.chslidingbox-container > div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container > div > span {font-size:14px;}.show{bottom:84px;}
.hide{bottom:-145px;}
.related-post{font-size:70%}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}.related-post-style-2 li:first-child {border-top:none}.related-post-style-2 
.related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title {color:#95a5a6;transition:all .4s ease-out;}
a:hover.related-post-item-title {color:#2ecc71;text-decoration:none;}.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}

Затем ищем код <data:post.body/> которых в шаблоне может быть два, нам нужен второй по счету и после него выкладываем следующий код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:left;margin:0 15px;'>Рекомендуем </span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#215;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#8722;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
    </div>
    <div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 4,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://cdn.rawgit.com/Indzign/theme/master/recommended.js' type='text/javascript'/>         
</div>
</div>
</b:if>
 
И последний шаг, находим код </body> и перед ним добавляем код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>

Сохраняете свой шаблон и проверяете, что в итоге получилось. 

Модернизируем на страницах с постами ссылки Предыдущее - Следующее.

Blogger - Blogspot делаем стильные кнопки под ссылки Предыдущее - Следущее на страницах с постами и заодно выставляем их под правильное направление.

Всем привет. Итак сегодня без прелюдий, сразу перейдем к обсуждаемой теме. по собственному опыту знаю и с  неохотой вспоминаю, как меня бесили эти несуразные ссылки Предыдущее и Следующее к тому же они по стандарту находятся в непривычном для нас расположении, Следующее с левой стороны, Предыдущее с правой и это еще не все, по идеи они должны появляться сразу по окончинаии текста поста, а не под комментаримями. Так же под стандартнимы ссылками не отображается название следующего и предыдущего постов (сообщений) И сегодня мы с вами одним выстрелом положим даже не двух, а сразу четырех зайцев. Если вкратце, то мы выставим правильное расположение этих ссылок и придадим им более стильный вид.

Для начала переходим в раздел Шаблон - Изменить HTML ищем код <head> и после него вставляем:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

    <link href='http://fonts.googleapis.com/css?family=georgia' rel='stylesheet' type='text/css'/>
 
Затем ищем код ]]></b:skin> и перед ним выставляем следующий код:

.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }

.mbt-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
}
.mbt-pager li.previous a { padding-right: 24px;  }

.mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }

.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

.mbt-pager li i { color: #ccc; font-size: 18px; }

.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:georgia, sans-serif, arial; margin-bottom:10px;}

.mbt-pager li a span { font-size: 15px; color: #666;  font-family:georgia,Helvetica, arial; margin:0px;}
.mbt-pager li a:hover span,
.mbt-pager li a:hover i { color: #ffffff; }
.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbt-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }

.mbt-pager li.next i, .mbt-pager li.previous i ,
.mbt-pager li.next,  .mbt-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }

.fa-chevron-right {padding-right:0px;}

Следующий шаг, ищем код <data:post.body/> их может быть два нам нужен тот, который располагается ниже и после него вставляем код:



    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <ul class='mbt-pager'>

            <li class='next'>
    <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
    <b:else/>
    <i class='fa fa-chevron-right'/><a rel='next'><strong>Следующий пост</strong> <span>Это самый первый пост</span></a>
    </b:if>
    </li>

        <li class='previous'>
    <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
    <b:else/>
    <i class='fa fa-chevron-left'/><a rel='previous'><strong>Предыдущий пост</strong> <span>Это самый последний пост</span></a>
    </b:if>
    </li>

        </ul>


    <script type='text/javascript'>
    //<![CDATA[
    (function($){   
        var newerLink = $('a.newer-link');
        var olderLink = $('a.older-link');
        $.get(newerLink.attr('href'), function (data) {
         newerLink.html('<strong>Следующий пост</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');   
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>Предыдущий пост</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');   
        },"html");
    })(jQuery);
    //]]>
    </script>

          </b:if></b:if> 
Отлично движемся дальше. Находим код <b:includable id='nextprev'> и после него нам нужно вставить код:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
     <span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
     </span>
   </b:if>

   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>

   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

   <b:if cond='data:mobileLinkUrl'>
     <div class='blog-mobile-link'>
       <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
     </div>
   </b:if>

</div>
<div class='clear'/> 
</b:if></b:if>

Если готово, тогда сохраняем шаблон и передвигаемся к своему сайту - блогу, открываем любой пост и радуемся уже не ссылкам, а кнопкам Предыдущий пост и Следующий пост.

Анимационное украшение для сайта - блога при загрузке страницы.

Blogger и другие платформы, устанавливаем на сайт - блог анимацию всплывающую при загрузке страниц.

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

Пример анимации можно увидеть на нашем тестовом блоге. Анимация в виде вращающегося кубика-рубика. 

Для установки виджета preloader вам нужно перейти в раздел Шаблон - Изменить HTML найти код ]]></b:skin> и перед ним вставить следующий код:

.loader {
background-color: #fff;
background-image: url(http://2.bp.blogspot.com/-oPGZaNs5sVA/VjMsQ7sIZQI/AAAAAAAAA9w/q9k-wOikJQI/s1600/preloader.gif);
background-position: center center;
background-repeat: no-repeat;
background-size: 70px 70px;
bottom: 0px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 9999;
}

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

 http://1.bp.blogspot.com/-2IKobKg7qTg/VjtC2zU7aQI/AAAAAAAAiBU/BTWeYS66OLk/s1600/preloader%2B%25285%2529.gif

 
http://2.bp.blogspot.com/-u2ibzymo5Jo/VjtDPbaP07I/AAAAAAAAiDI/DD0ROOQIqgY/s1600/54f4ca1edced7ed62ba934b4_infinite-gif-preloader.gif

http://2.bp.blogspot.com/-7SUv4u8eRPY/VjtDPeS47-I/AAAAAAAAiCM/QwTzMPfPwaM/s1600/042413_square_loader%2B%2%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://2.bp.blogspot.com/-sMcOp-KyYUI/VjtDPR6f1VI/AAAAAAAAiBs/AUGeDnAbWmI/s1600/1338614bf6bda949333801c917d9e988.gif

http://4.bp.blogspot.com/-FxdtsBfSXx4/VjtDP23S_fI/AAAAAAAAiC0/AuebzQdPd3Y/s1600/9080607321ab98fa3e70dd24b2513a20%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://2.bp.blogspot.com/-P5otrHI1RXA/VjtDQyzPqII/AAAAAAAAiCs/HcVcf4H6k34/s1600/animation3%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://1.bp.blogspot.com/-hOKwIARc0og/VjtDRH4QLmI/AAAAAAAAiCw/Ys1vMVHy5F0/s1600/e95a921638100a6e21b3143002d05a0f%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.jpg

http://2.bp.blogspot.com/-byt7TPCRU0g/VjtDR9PKTpI/AAAAAAAAiD4/iuznV3qDmNM/s1600/free-preloaders1.gif

http://2.bp.blogspot.com/-j4pZvsYffXg/VjtDSWqy-6I/AAAAAAAAiEY/vVa-t8Qbdkk/s1600/gear.gif

http://1.bp.blogspot.com/-1IaURx_Pr9o/VjtDSdPGI-I/AAAAAAAAiD0/43DI6vgPb08/s1600/loading%2B%25281%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://1.bp.blogspot.com/-K_flPsge4v4/VjtDTW8glKI/AAAAAAAAiEs/Ws13-xYpgd4/s1600/loading%2B%25282%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif

http://4.bp.blogspot.com/-3-2lmFUorVA/VjtDTap1tpI/AAAAAAAAiEc/yebArfNyXVc/s1600/loading%2B%25283%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


http://4.bp.blogspot.com/-TVcBl1kUwZU/VjtDTpJcYPI/AAAAAAAAiEk/xUdtLa22MT0/s1600/logo_dark_nobg%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


http://2.bp.blogspot.com/-mi47tJm0jZ8/VjtDUEcPRxI/AAAAAAAAiEA/lbnR-JT87GQ/s1600/preloader%2B%25281%2529.gif

http://3.bp.blogspot.com/-6zmnUH8VwGA/VjtDUDJURVI/AAAAAAAAiEU/QSt4tzWhBlM/s1600/preloader%2B%25282%2529%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


http://1.bp.blogspot.com/-00HPLuClFMs/VjtDUru56wI/AAAAAAAAiEQ/A3Qta1QFFw4/s1600/preloader%2B%25284%2529.gif

http://1.bp.blogspot.com/-1DAaJ_s8oxs/VjtDQahIrEI/AAAAAAAAiEw/sofg8c4DlJA/s1600/Preloader_8%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif


http://2.bp.blogspot.com/-2-xhiuaRtmA/VjtDQKYc1ZI/AAAAAAAAiCc/Tum9Q_9JG08/s1600/Preloader_10%2B-%2B%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif




Дальше находим код <body> и после него вставляем следующий код:

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='loader'/>
  </b:if>

Если хотите, чтобы виджет работал на всех страницах, а не только на главной, в таком случае не копируйте код выделенный оранжевым цветом.

И завершающий этап, ищем код </body> перед которым пристраиваем следующий код:

<script type='text/javascript'>//<![CDATA[

$(window).load(function() {

    fixSizes();
    $(".loader").delay(1000).fadeOut('slow');

});


$(window).resize(function() {

    fixSizes();

});

function fixSizes() {

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    $(".fullscreen").css('height', windowHeight);
    var c = $(".demo .variation").length;

    if (windowWidth > 768) {

        $(".demo .variation").css('width', 100/c + '%');
        $(".demo .variation").css('height', windowHeight);

    } else {

        $(".demo .variation").css('height', windowHeight/c + 'px');
        $(".demo .variation").css('width', windowWidth);

    }

    $(".demo .variation .inner").each(function() {
        $(this).css('margin-top', ($(".demo .variation").height() - $(this).height()) / 2);
    });
}
 
//]]>
</script>

Сохраняем шаблон и проверяем, как работает ваш новый виджет.