Blogspot как изменить шрифт. Change font in posts

Здравствуйте дорогие друзья. Давненько на горизонте не появлялись наши новые статьи о blogger. И сегодня мы подготовили полезный для многих из вас материал о том, как изменить шрифт текста в сообщениях blogger - blogpsot.

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

Та же читайте: Шрифт для сайта (блога) - плагин шрифтов

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

Итак, чтобы изменить или увеличить шрифт в blogger:

вам нужно перейти в раздел Шаблон - Изменить HTML нажать клавиши CTRL + F и появившемся поисковом окошке вставить и найти следующий код:
.post body {  

И сразу после него нужно прописать следующий код:
font-size: 16 px;

Этот код задает размер шрифта, для того, чтобы сделать его более жирным нужно прописать код:
font-weight: bold;

Или вместо bold записать значение от 100 до 1000.

Чтобы задать стиль своему шрифту нужно дописать код:
font-family: times new roman;

Вместо times new roman записываете любой другой шрифт подходящий для blogger.

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

Виджеты для blogger, гаджеты blogspot, html коды оформления блога 2017

Blogger список всех виджетов и гаджетов: Новые сообщения - список последних сообщений, Всплывающее окно видео youtube, Плагин содержания статьи, Форма подписки по Email, Lightbox jquery, Последние комментарии Disqus, Переводчик сайта, Кнопка мне нравиться, Карта сайта, Кнопка вверх, Кнопки социальных сетей, Виджет самые комментирующие сообщения, Виджет популярные сообщения, Выпадающее меню, Спойлер, Кнопки Демо и Скачать, Скроллинг блога в процентах, Меню для боковой панели, Форма связи, Сообщения по ярлыкам, Случайные сообщения, Постраничная навигация.

Лучшие плагины для blogspot, html коды для оформления блога


Популярные виджеты:
Table of contents - виджет содержания
Предназначен для более качественного оформления статьи. Использование плагина добавляет больше шансов на то, что страница окажется выше в поиске.

Форма подписки по Email
Виджет который поможет удержать большее количество посетителей сайта

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

Переводчик для Сайта
Самый стильный переводчик для Blogger

Скроллинг блога в процентах
Поможет читателю узнать на сколько велика статья.

Весь список виджетов:

    Blogspot, как продвигать сайт, блог с несколькими тематиками

    Blogspot, как продвигать сайт, блог с несколькими тематиками

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

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

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

    2). Дальше нам нужно более подробно изложить о чем раздел, написать хотя бы пару строк, в общем задайте ему описание, чем больше напишите, тем лучше.

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

    4). Следующий шаг задаете описание в мета тегах и само собой настраиваете прямую ссылку.

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

    Итак почти половина пути пройдена, хотя пускай будет половина. А вы то думали, что после публикации дело в шляпе и теперь с поисковиков к вам подтянуться толпы юзеров, а вот и нет, нужно еще продвигать этот ваш созданный раздел. Для этого ему нужно придавать ссылочную массу. К примеру вы написали очередную новость относящеюся к этому разделу,  в ней вам нужно где-то вписать анкор, сочетание слов, которое существует либо в заголовке главного раздела, либо где-то в его описании к примеру "Видео игра" и прикрепить к этому сочетанию ссылку на главный раздел. И так в каждом посту, который относится к теме. Можно так же это делать на сторонних сайта, блогах, форумах и т.д., что в принципе еще лучше, главное, чтобы у сайта был тИЦ не менее 10 или PR не менее 50.

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

    Установить - добавить кнопки социальных сетей на сайт - блог

    blogger - bogspot кнопки социальных сетей

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

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

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

    /* CSS Share Button */
    .tombol-berbagi-arlina{display:block;position:relative;height:35px;line-height:35px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
    .tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:18%;padding:0 10px;height:inherit}
    .tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:17%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
    .tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-mK6_DlC8Xg4/VgJ6HKzdhwI/AAAAAAAAhho/O9vQOCbUF3M/s1600/191.jpg') no-repeat;width:42px;height:41px;margin-right:3px;background-position: 0px -62px; }
    .tombol-berbagi-fb-label{color:#2d609b}
    .tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
    .tombol-berbagi-tw{background-position:0 -32px}
    .tombol-berbagi-tw-label{color:#00c3f3}
    .tombol-berbagi-gp{background-position:0 -2px}
    .tombol-berbagi-gp-label{color:#f00}
    .tombol-berbagi-lin{background-position:0 -152px}
    .tombol-berbagi-arlina a{color:#999;transition:all .3s;height:30px}
    .tombol-berbagi-arlina a:hover{color:#7cb0ed}
    
    @media only screen and (max-width:640px){
    .tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
    .tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}


    Затем копируете наш следующий код и вставляете его туда где должны появиться ваши кнопки:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='tombol-berbagi-arlina'>
    <div class='tombol-berbagi-arlina-fb'>
    <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>  Facebook</a>
    </div>
    <div class='tombol-berbagi-arlina-tw'>
    <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'> Twitter</a>
    </div>
    <div class='tombol-berbagi'>
    <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'> Google+</a>
    </div>
    <div class='tombol-berbagi'>
    <a class='tombol-berbagi-lin' expr:href='&quot;http://vk.com/share.php?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'/>
    <a class='tombol-berbagi-lin-label' expr:href='&quot;http://vk.com/share.php?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'>  Vkontakte</a>
    </div>
    </div>
    </b:if>
    Если вы не знаете, куда устанавливать последний код, в таком случае вы можете посмотреть, как мы делали это в предыдущей теме, о кнопках соцсетей, где мы рассказывали, как установить кнопки социальных сетей от сервиса Pluso. 

    Стильный виджет последних сообщений от заданного ярлыка


    Всем привет! Сегодня наша тема для тех кто находится в поиске, (вернее находился поскольку  уже нашел) стильного виджета последних сообщений отображающего посты в зависимости от заданного ему ярлыка.

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

    Итак копируем следующий код:
     <style scoped="scoped" type="text/css">
    /* Multi Recent Post */
    .post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
    .list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:350px;float:left;font-size:80%;}
    .list-entries ul,.list-entries li{margin:0;list-style:none}
    #feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;}
    #feed-list-container ul li:hover{background:#fff;}
    #feed-list-container ul li:last-child{border-bottom:0;}
    .list-entries .main-title{padding:0;overflow:hidden;}
    .list-entries .main-title h4{position:relative;display:block;font:inherit;font-weight:700;padding:1em 1.5em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:120%;margin-top:0!important}
    .list-entries .main-title h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#4384b3;color:#fff;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;top: -4px;}
    .list-entries .title a{font-size:13px;text-decoration:none;line-height:.5em;color:#333;font-weight:700;transition:all .3s;}
    .list-entries .title a:hover{color:#4f93c5}
    .list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
    .list-entries .summary{overflow:hidden;color:#999}
    .list-entries .more-link{border-bottom:none;}
    .list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#444;padding:1em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s; }

    .list-entries .more-link a:hover{background-color:#f97e76;color:#fff;}
    .list-entries .more-link a:after{display:inline-block;content:"\f054";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;transition:all .3s;top: -4px;}
    .list-entries .more-link a:hover:after{background-color:#ea726a;color:#fff;}
    .widget .post-body ul, .widget .post-body ol {position:relative;}

    @media (max-width:640px){
    .list-entries {width:100%;}
    .list-entries{margin:2.5% 1%;}}
    </style>

    <br />
    <div id="feed-list-container">
    </div>
    <div style="clear: both;">
    </div>
    <script type="text/javascript">
    var multiFeed = {
        feedsUri: [
            {
                name: "Заработок в сети",
                url: "http://www.shablonu-dlya-blogger.ru/",
                tag: "Заработок"
            },

    ],
        numPost: 7,
        showThumbnail: true,
        showSummary: false,
        summaryLength: 0,
        titleLength: "auto",
        thumbSize: 72,
        containerId: "feed-list-container",
        readMore: {
            text: "Смотреть все сообщения этой категории",
            endParam: "?max-results=7"
        }
    };
    </script>
    <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/multi-feed.js" type="text/javascript"></script>
    После идем в раздел Дизайн - добавить гаджет - HTML\Javascript вставляем туда наш код и сохраняем гаджет.

    Выделенное красным меняете на свои значения:
    1.Название виджета
    2.Адрес вашего блога - сайта
    3.Название самого ярлыка сообщения - посты, которого должны отображаться в виджете
    4.Количество отображаемых постов - сообщений.

    Сохраняете гаджет и проверяете результат.

    Blogger как установить на сайт комментарии Disqus


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

    Для чего комментарии на сайте мы уже разобрались. Теперь обсудим стандартные  комментарии от blogger. Что тут сказать, наша блогеровская форма комментариев полезна лишь тем из нас кто ведет блоги о нашей же платформе. Если у вас любая другая тематика к примеру кино, музыка, игры, спорт и т.д., то в таком случае вам явно нужно переходить на нечто другое. А почему так? Та все потому, что не так и много людей имеют аккаунты в гугл, хотя с каждым годом их становится все больше и больше. Скорее всего человек не будет регистрироваться в гугле из-за того, чтобы оставить комментарий на вашем блоге, ну разве что ему аж край, как нужно что-то узнать. Просто большинству лень это все делать, вот для таких и придумали интегрированные комментарии в блоггер от Facebook, Vkontakte и прочих социальных сетей. Но беда в том, что придется накидать в шаблон кучу скриптов, а это уже не есть хорошо для сайта - блога, будет долго загружаться. Что же делать, как быть? Оказывается выход есть, благодаря системе комментирования Disqus, подключив которую мы сможем упростить задачу нашим самым ленивым посетителям. Ведь, чтобы оставить комментарий им нужно иметь аккаунт хотя бы на одном из следующих четырех сайтов: Disqus, Facebook, Twitter и Google. К тому же Disqus имеет несколько плюсов, всех их пересчитывать не будем, назовем лишь самые главные. Первое все комментарии сохраняются в базе данных и при переезде на другой хостинг или аккаунт вы с легкостью сможете все восстановить. И что самое главное наши новые комментарии будут индексироваться поисковыми системами.

    Итак, если вы решились установить на свой блог - сайт комментарии от Disqus, тогда выполняем следующие шаги, все довольно просто:

    Для начала переходим на сайт Disqus.  Там вы увидите, что уже выбрана платформа blogger.

    Вверху справа жмем кнопку Get Disqus fot your site. В открывшейся странице заполняем свои данные нажимаем кнопку Next Step и в следующем окне заполняем имя сайта и жмем кнопку Finish Registration.

    В новом окне выбираем платформу Blogger, в следующем окне жмем кнопку Add to my blogger site. На следующей странице выбираем свой сайт и кликаем по кнопке Добавить виджет.



    После возвращаемся на страницу SETUP INSTRUCTIONS FOR и во втором пункте кликаем по ссылке Tools > Import.


    В новом окне кликаем по кнопке Import comments for Blogger.


    Вот и все заходите на свой сайт - блог и проверяете, вместо стандартной формы комментариев blogger должна появиться форма комментариев от Disqus.

    Мета теги, ключевые слова и заголовки.

    Blogger-meta tags-keywords

    Добавление мета тегов и ключевых слов. Оптимальное количество символов.

    Снова здравствуйте. Сегодня мы подготовили важнейшую тему в плане SEO оптимизации блогов и сайтов не только на платформе Blogger но и для веб-ресурсов созданных на других движках.

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

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

    Так же стоит добавить, что есть определенные рамки установленные поисковыми системами Google и Yandex, для описания мета тегов, которое должно содержать не менее 70 и не более 140 символов. Так же с недавних пор Blogger добавил для своих пользователей возможность добавлять мета теги для каждого сообщения отдельно. В редакторе сообщений с правой стороны выбираете Описание для поисковых систем и в появившейся строке записываете свое описание. Здесь уже нет ограничений в 80 - 90 символов.

    В общем если вы хотите задать полноценное описание для мета тегов тогда в разделе Шаблон - Изменить HTML после кода <head> добавляете следующий код, если конечно у вас его нет:

     <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='YOUR KEYWORDS HERE' name='description'/>
    <meta content='YOUR, KEYWORDS, HERE' name='keywords'/></b:if> 

    Слова выделенные красным меняете на свои и сохраняете шаблон.

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

    Вроде бы все популярно объяснили, если что форма комментариев ждет.  

    Как защитить контент от кражи

    Как защитить статью от кражи blogspot
    Здравствуйте друзья. Сегодня у нас очень важная тема. Думаем, что многие из вас уже сталкивались с такой проблемой, как кража контента, а те кто нет еще могут ощутить на себе это малоприятное событие.

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

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

    В этой статья мы выделим три способа защиты контента.

    1). Есть код при добавлении которого пользователь вашего блога - сайта не сможет копировать его содержимое. Перейдите в раздел Шаблон - Изменить HTML найдите там код <body>
    И допишите к нему этот код oncopy="return false;" в итоге у вас должен выйти такой код:

    <body oncopy="return false;">

    2) Второй способ добавляет прямую ссылку к вашей статье. Когда похититель вставляет текст на своем сайте - блоге вместе с ним вставляется живая ссылка на ваш ресурс. Для этого нужно перейти в раздел Шаблон - Изменить HTML найти код </head> и перед ним вставить следующий код:
    <script type="text/javascript">
    //<![CDATA[
    function addLink() {
        var body_element = document.getElementsByTagName('body')[0];
        var selection = window.getSelection();

        // Вы можете изменить текст в этой строчке
        var pagelink = "<p>Источник: <a href='"+document.location.href+"'>"+document.location.href+"</a> Название блога &copy; адрес_сайта.ru </p>";
        var copytext = selection + pagelink;
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        body_element.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);
        window.setTimeout( function() {
            body_element.removeChild(newdiv);
        }, 0);
    }
    document.oncopy = addLink;
    //]]>
    </script>

    Название блога и адрес сайта меняете на свое.

    Итак первые два способа готовы, но есть одно но, их можно обойти. Самый верный это третий способ.

    3) Лучше всего защитить свой контент можно при помощи сервисов гугла и яндекса. Сервис гугла быстро индексирует вашу статью и тут же добавляет ее в поиск. Мы уже писали о том, как это можно сделать. Теперь о яндексе. Недавно в своей веб-мастерской яндекс создал раздел в котором вы можете добавлять свою статью еще до публикации на своем сайте и уже никто не сможет отобрать то, что принадлежит вам. Правда для того, чтобы вы смогли работать с этим разделом нужно, чтобы ваш сайт - блог индексировался Яндексом. В разделе вебмастер есть пункт Содержимое , туда и кидаете свою статью.

    Добавить карту сайта — google файлы sitemap

    Добавить карту сайта в гугл (файлы sitemap)


    Бонджорно сеньоры и сеньориты засевшие у руля blogger. За окном уже четверг, неделя перевалила за экватор ну, а мы продолжаем совершенствовать свои блоги и сайты. Не так давно мы с вами разбирались, как добавить на свой блог пользовательскую карту сайта, сегодня же мы вновь будем добавлять карту сайта вот только уже не пользовательскую, а карту для поискового робота google. Сейчас объясним зачем это нужно. Для достижения успеха в вашей карьере блогера, вы должны генерировать органический трафик. Под термином органического трафика я имею ввиду такой трафик, который приходит на ваш блог - сайт через поисковые системы Гугл, Яндекс и другие. Все вебмастреа и блогеры рано или поздно знакомятся с таким инструментом, как Google Webmaster Tools. Не сложно догадаться кому он принадлежит, все верно гуглу. Этот инструмент очень полезен для всех вебмастеров и блогеров. Там можно увидеть показатели вашего блога или сайта, что им мешает, что нужно добавить, изменить, как индексируется и сканируется ваш блог.  Где-то год назад мы начеркали публикацию, о том как с помощью Google Webmaster Tools мгновенно просканировать и добавить в поисковик только что написанную статью.

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

    Как добавить карту сайта в гугл (файлы sitemap)


    Итак приступаем к подтверждению карты сайта. Для начала вам нужно добавить свой блог - сайт в Google Webmaster Tools. Там вам нужно перейти в Search Console и выбрать нужный блог. С левой стороны кликаем по ссылке Сканирование выбираем из списка файлы Sitemap, затем вверху, с правой стороны кликаем по красной кнопке ДОБАВЛЕНИЕ \ ПРОВЕРКА ФАЙЛА SITEMAP в появившейся строке вставляем следующий код:
    atom.xml?redirect=false&start-index=1&max-results=500
    И нажимаем синюю кнопку Отправить файл Sitemap. Наши поздравления, только что вы завершили процесс подтверждения и добавления карты сайта для своего блога. Но это еще не все, этот код работает только для первых пятьсот сообщений, если у вас их больше тогда вам нужно добавить еще один код:
    atom.xml?redirect=false&start-index=501&max-results=500
    Вот сейчас действительно все. Теперь всякий раз когда вы будете обновлять свой блог или сайт новыми статьями, карта будет помогать поисковой системе гугла индексировать ее.

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

    Так же читатйте: Добавить в Яндекс карту сайта (файлы sitemap)

    Blogger как отключить региональное перенаправление

    Всем привет. Сегодня у нас очень важная тема, которая напрямую касается продвижения наших блогов. Возможно большинство из вас уже знает, что где-то еще в 2011 или 2012 году компания google решила внести одно, не совсем приятное для блогеров изменение. Блогеру было задано региональное перенаправление. Объясним, что это такое для тех кто не знает. Изначально мы создаем блог на платформе (движке) Blogger с таким адресом название.blogspot.com но после этого нововведения для пользователей разных стран название домена стало меняться, вместо com там может быть ru, если посетитель блога из России, или tr, если посетитель блога из Турции. В общем для каждой страны прописывается ее домен. Эти домены считаются зеркалами нашего основного домена и увы склеить их в блогспоте нереально, что очень и очень плохо.

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

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

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

    Решение проблемы.
    Вот такая неприятная вещь приключилась с нашей любимой платформой blogger. Но не все так страшно. Посещения с яндекса будут хоть и не так много, но все же будут. Дальше, гугл никто не отменял там все, как и было до. Третье, есть возможность устранить проблему с виджетами, тИЦ и PR. Уже давно написали код который хоть и не решает всю проблему в корне, но от части это такой себе круг спасения. В разделе Шаблон - Изменить HTML найдите код </head> и перед ним вставьте следующий код:
    <script type='text/javascript'>
          var blog = document.location.hostname;
          var slug = document.location.pathname;
          var ctld = blog.substr(blog.lastIndexOf("."));
          if (ctld != ".com") {
            var ncr = "http://" + blog.substr(0, blog.indexOf("."));
            ncr += ".blogspot.com/ncr" + slug;
            window.location.replace(ncr);
          }
    </script>
    При добавления этого кода, каждого кто зашел на ваш блог перенаправляет на стандартный домен com. А вот робот яндекса и дальше будет считать ваш блог за отбросы, увы. Кстати, до этого Яндекс вел себя нормально, жил в гармонии с региональным редиректом гугла и продолжал добавлять страницы моего блога, но спустя 2-3 года  все изменилось, как вы уже знаете в худшую сторону. В общем очередное свидетельство нелюбви Яндекса к блогспоту. Главное лекарство, которое может помочь вам в данном случае и избавится от всех вышеуказанных проблем это установка собственного домена. Стоит это не так и много, домен зоны ru от 1,5$ и домен зоны com от 10-12 долларов в год.

    Еще одно бесплатное решение проблемы.  Вы можете забросить свой блог на blogger и перейти на бесплатный блог от WordPress, или любой другой, но это не значит, что проблемы с Яндексом будут решены, ведь он не терпит все бесплатное, что существует в этом мире.)

    Так же мы забыли добавить, что сам гугл посоветовал использовать в своих блогах тег rel="canonical". Этот тег уже давно прописывается автоматически при создании нового блога. И он так же не решает проблему с Яндексом.

    Cоздать бесплатный блог на WordPress


    Создание бесплатного блога на WordPress

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

    Бесплатный конструктор сайтов.

    В общем хватит теории давайте перейдем к практике. Для создания бесплатного блога переходим на WordPress.com. Нажимаем по синей кнопке Для начала. Заполняем несложную форму регистрации и заодно придумываем адрес блога к примеру leistone.wordpress.com. Там вам будут предлагать приобрести домен, но я бы не рекомендовал покупать его, ведь у них он почти в три раза дороже, можно найти и подешевле. А еще ниже вы увидите тарифы на хостинг, которые так же слегка завышены. Минус бесплатного варианта это отсутствие возможности устанавливать на блог вебдизайнерские шаблоны, только стандартные от WordPress, второе нельзя устанавливать плагины и третий гвоздь нельзя добавлять кода javascript, jquery и php только html. В общем зарабатывать на сайте - блоге при помощи рекламы будет немного трудновато, но все таки возможно, разместить баннер или ссылку будет не сложным делом. В общем выбираете Wordpress Начинающий кликая по кнопке внизу Создать блог. В новом окне вам предложат заполнить строку Тэглайн (описать блог) и выбрать язык на котором вы будете вести свой блог. Нажимаем следующий шаг и выбираем тему (шаблон) для своего блога. Есть, как платные, так и бесплатные, потом эту тему можно будет поменять, так что не переживайте. Лично я выбрал шаблон Baskerville для меня он более удобен. После этого вам предложат связать свой блог с аккаунтом в Twitter или Facebook в общем хотите подключаете, не хотите, не подключаете. Следующий шаг ожидаем создания блога, вас перекинет в раздел сообщения, чтобы создать первый пост, так же вам нужно будет подтвердить адрес своей почты, пока вы этого не сделаете вы не сможете публиковать посты. Чтобы перейти в одну из панелей управления блогом нажмите вверху, справа кнопку Мой сайт. Здесь вы сможете управлять работой своего блога. И, чтобы посомтреть, что вы там создали вверху панели кликаем по ссылке Посмотреть сайт.

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

    Адаптивность сайта это

    обложка



    Для чего нужен адаптивный дизайн сайта

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

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

    адаптивность сайта

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

    Что же такое адаптивный дизайн или, как говорят на западе Responsive design? Это такой сайт, которому задается функция автоматической регулировки ширины в соответствии с размером дисплея того устройства на котором просматривается этот сайт. К примеру, когда этой функции еще не было и посетитель заходил на сайт со своего смартфона ему приходилось весьма не сладко, потому что ему нужно было свершать много движений влево и вправо, чтобы рассмотреть контент сайта. В настоящее время дизайнеры и разработчики шаблонов проводят много усилий в направлении адаптивного дизайна для Blogger, WordPress, Joomla, Magento, Prestashop и т.д.. В сочетании с большим количеством привлекательных и приятных для газ функций. Сейчас такие шаблоны уже существуют и доступны для любого человека, даже можно найти бесплатные версии.

    С добавлением сайту адаптивности к разным устройствам, они стали автоматически регулироваться и от сего выглядеть более аккуратно и привлекательно. Но есть и недостатки в этом шаблоне с добавлением этого кода загрузка сайта \ блога немного замедляется. Но это не не смертельно, главное, чтобы ваш контент был интересным и полезным. Ну и напоследок, не так давно компания google объявила, что сайты с адаптивным дизайном будут занимать более высокие позиции в поисковике, нежели те, которые не приспособлены к мобильным устройствам.  

    Blogspot widget most commented posts


    Доброе утро страна или страны, в общем доброе утро весь мир. На сегодня у нас запланировано несколько новых статей по блогеру и подготовка нового шаблона. Данная статья расскажет и покажет о виджете самых комментируемых сообщений вашего блога. Не сложно понять, что это виджет, который отображает список тех сообщений, которые комментируются больше всего. Что-то наподобие виджета популярных сообщений блога, где все работает от количества просмотров. В общем смысл тот же, вы видите пост и количество комментариев, которое к нему написано, чем больше комментариев, тем выше позиция сообщения. Какая польза от виджета? Ну этот аспект сложно оценить, вот к примеру человек смотрит ваш сайт, видит этот виджет и думает себе: "О! Анука я посмотрю этот пост, там много комментариев интересно, что там пишут". Ну как то так. Если вам нравятся интересные виджеты, тогда забирайте его себе, вам понравится. Вот его предпросмотр.

    Итак, чтобы добавить в свой блог этот виджет вам нужно в разделе Дизайн добавить новый гаджет - HTML/Javascript и вставить туда следующий код:

    <style>
    /* ######### Most Commented Widget by MBT ##########*/
    .commentbubble {
    background: #292D30;
    width: 49px;
    float: left;
    margin: 2px 20px 35px 0px;
    font-weight: bold;
    font-size: 1.3em;
    text-align: right;
    font-family: georgia,Helvetica;
    padding: 0px 0px 5px 0px;
    text-align: right;
    color: #FFF;
    text-shadow: 4px 1px #202022;
    position: relative;
    top: 5px;

    }
    .commentbubble:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 0px;
    top: 100%;
    border-width: 5px 8px;
    border-style: solid;
    border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    top: 34px;
    right: 6px;
    }
    </style>

    <script type="text/javascript">
    function getYpipePP(feed) {
    document.write('<ul style="list-style:none; ">');
    var i;
    for (i = 0; i < feed.count ; i++)
    {
    var href = "'" + feed.value.items[i].link + "'";
    var pTitle = feed.value.items[i].title;
    var pComment = + feed.value.items[i].commentcount;
    var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important; border-bottom: 1px dashed #dedede; line-height:1.25em; "> <div class="commentbubble">' +pComment +  "&#160;&#160;</div>" +  "<a href="+ href + '" target="_blank">' + pTitle ;
    document.write(pList);
    //to remove comment count delete this line
    document.write('</a></li>');
    }
    document.write('</ul>');
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?
     YourBlogUrl=http://www.mybloggertricks.com
    &ShowHowMany=6
    &_id=390e906036f48772b2ed4b5d837af4cd
    &_callback=getYpipePP
    &_render=json"
    type="text/javascript"></script>

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

    На этом все, надеемся принесет вам пользу.

    Отсутствует картинка, когда делитесь постом в Facebook

    Вроде бы норму мы уже на сегодня выполнили добавив новый шаблон, но у нас появилось свободное время и мы нашли весьма полезную статью для пользователей блогами на платформе blogger. Думаю многие из нас, как те у которых блоги хорошо раскручены так и те у кого не совсем пока все гладко сталкивались с проблемой, когда нужно поделиться постом в Facebook и при этом очень важно, чтобы в нем отображалась миниатюра (картинка) но ее по какой-то причине там нет. В основном это происходит из-за того, что поисковая система Facebook не успевает считать данные поста и отображает только ссылку. Но порой бывают и сдвиги этой системы и  картинка публикуется вместе с ссылкой, вот только ее размеры не превышают 90*90 пикселей. Если вы уже давно ищете способ, как устранить этот баг, тогда вам нужно всего навсего добавить к своему шаблону два кода.

    Переходим в раздел Шаблон - Изменить HTML находим код </head>
    и перед ним вставляем следующий код:

    <!-- [ Social Media meta tag ] -->
    <b:if cond='data:blog.url == data:blog.homepageUrl'> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
    <b:if cond='data:blog.url'>
    <meta expr:content='data:blog.url' property='og:url'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.pageName'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    </b:if></b:if></b:if></b:if>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <b:else/>
    <meta content='website' property='og:type'/>
    </b:if>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
    </b:if></b:if>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta content='ISI DESKRIPSI ALTERNATIF DISINI' property='og:description'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='KODE-APLIKASI' property='fb:app_id'/>
    <meta content='KODE-ADMIN' property='fb:admins'/>
    <meta content='en_US' property='og:locale'/>
    <meta content='en_GB' property='og:locale:alternate'/>
    <meta content='id_ID' property='og:locale:alternate'/>

    Затем находим код </body>
    и перед ним вставляем следующий код:

    <div id='fb-root'/> <script> window.fbAsyncInit = function() { FB.init({ appId : 'KODE-APLIKASI', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>

    Вот и все жмем сохранить шаблон, заходим на блог и пробуем поделиться постом в Facebook, миниатюра должна появится.