пятница, 27 февраля 2015 г.

Как украсить блог Blogspot георгиевской ленточкой к 9 мая

георгиевская ленточка

  - Всем привет !!! Скоро приближается праздник 9 мая - праздник 70-летие Дня победы советского народа и Советской армии над фашисткой Германией в Великой Отечественной войне. В этой статье хочу вам рассказать как украсить свой блог Blogspot георгиевской ленточкой к 9 мая.

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


георгиевская ленточка на блоге


  - Сперва нам в HTML коде шаблона блога нужно найти виджет, в котором вставим код георгиевской ленточки.

  - 1) Заходим Панель управления => Шаблон => Изменить HTML


Изменить HTML для вставки кода георгиевской ленточки


  - 2) Из списка виджетов, как показано на рисунке ниже, выбираем Header1, при нажатии нас перебросит в нужное место HTML кода шаблона блога.


Как найти виджет Header1


  - 3) После того как нас переместило к нужному виджету, в самом вверху находим код </header>. Как показано на рисунке, между кодом </div> и </header>, при помощи кнопки Enter опускаемся на строку ниже. Между ними вставляем код георгиевской ленточки.


Перед указанным кодом вставляем код георгиевской ленточки


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


Георгиевская ленточка с анимацией:



анимация георгиевская ленточка


<div id="georgyevskaya-lenta" style="position:absolute;  top:0; left:0; z-index:999999;">
<a><img border="0" src="https://lh5.googleusercontent.com/-Y_iDcBN1HUA/VOjiPQicS-I/AAAAAAAABPM/zOOY732R8QQ/s120-no/Lentochka.gif" alt="Георгиевская ленточка"/></a>
</div>


Гвардейская георгиевская ленточка:



Картинка георгиевской ленточки


<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a><img border="0" src="https://lh6.googleusercontent.com/-jptsd9I1Ryo/VOjiPTJoU_I/AAAAAAAABPs/CEmfaL-qLW0/w134-h98-no/Lentochka1.png"
alt="Георгиевская ленточка"/></a>
</div> 


Бантик из георгиевской ленточки:



Георгиевская ленточка бантиком


<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a><img border="0" src="https://lh3.googleusercontent.com/-5z0W-DpMKts/VOjiQfIyEfI/AAAAAAAABPw/UmJMqZHpIzA/w200-h174-no/Lentochka5.png" alt="Георгиевская ленточка"/></a>
</div>


Петля георгиевской ленточки:



Завязаная георгиевская ленточка



<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a><img border="0" src="https://lh3.googleusercontent.com/-Rsi7xOH8wpg/VOjiQGhwk0I/AAAAAAAABPo/zQj7TmNfsno/w200-h203-no/Lentochka4.gif" alt="Георгиевская ленточка"/></a>
</div>


Георгиевская ленточка с лавровой веткой:



Георгиевская ленточка вокруг лавровой ветки


<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a><img border="0" src="https://lh5.googleusercontent.com/-AzzhSTRjw20/VOjiQFXwoWI/AAAAAAAABPc/ks_lEXaiTY0/w169-h100-no/Lentochka3.png"
alt="Георгиевская ленточка"/></a>
</div>


Лавровая ветка обвита георгиевской ленточкой:



Лавровая ветка с георгиевской ленточкой


<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a><img border="0" src="https://lh5.googleusercontent.com/-Csl7spBwUnE/VOjiP_i8ThI/AAAAAAAABPg/7l5npTwNRXk/w300-h188-no/Lentochka2.png" alt="Георгиевская ленточка"/></a>
</div>


  - Можно изменить расположение картинки ленты слева или справа. отмеченное красным цветом в коде георгиевской ленточки right поменяйте на left, или наоборот. Ссылки в коде также можно заменить на ссылки своих картинок к любым другим праздникам, например с 8 Марта или Новым Годом.

  - Надеюсь моя статья как украсить блог Blogspot георгиевской ленточкой к 9 мая будет для вас полезной, поделитесь ей с друзьями через кнопки соц сетей и подписывайтесь на обновления блога в форме ниже. А мне же остается друзья вас поздравить с наступающими праздниками. Всем удачи, Пока !!!

пятница, 20 февраля 2015 г.

Как разблокировать и заблокировать гаджет в Blogspot (Blogger)

убрать кнопку, включить кнопку

  - Всем привет. Я как то на этом блоге уже писал статью как удалить гаджет на Bloggere, это в том случае, когда при установке шаблона для блога, скачанного с паблика, появляются сторонние гаджеты, у которых отсутствует кнопка удалить, или например вы хотите удалить стандартный гаджет "Заголовок", в который вставляется картинка шапки блога, или гаджет с атрибуцией (название шаблона и технологии), где также отсутствует кнопка удалить. Но бывает разные случаи, где вы например захотите наоборот запретить удалить гаджет, т.е убрать в гаджете кнопку Удалить. Вот я и решил написать сегодня статью как разблокировать и заблокировать гаджет в Blogspot (Blogger). О каких кнопках идет речь смотрите на скриншотах ниже.

  - Без кнопки Удалить:


Без кнопки удалить


  - С кнопкой Удалить:


С кнопкой удалить


  - Перед тем как заблокировать или разблокировать гаджет в блоге, нам надо сначала узнать ID Гаджета.

  - Заходим Панель управления => Дизаин => Нажимаем ссылку Изменить




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


Как узнать ID названия гаджета


  - После того как мы узнали ID нужного гаджета переходим в Панель управления => Шаблон => Изменить HTML. Чтобы разблокировать или заблокировать гаджет в блоге, как показано на рисунке ниже, в верхнем меню нажимаем кнопку "Список виджетов" и дальше как в нашем случае нажимаем Header1.


Найти виджет в коде шаблона блога


  - После нажатия на ссылку названия гаджета, мы находим его в коде шаблона блога. Как на рисунке ниже, обведенным красным кругом, нам надо найти ID гаджета и свойство.


найти свойство гаджета


  - Для разблокировки гаджета свойство true меняем на false. И наоборот, чтобы заблокировать гаджет свойство false меняем на true. С изменением свойства кнопка "Удалить" в управлении гаджета появляется и исчезает.

  - Надеюсь что я с примерами в картинках подробно и доходчиво объяснил как разблокировать и заблокировать гаджет в Blogspot (Blogger). Ничего сложного в этом нет. Ну а пока все, спасибо за внимание, всем удачи, пока !!!

вторник, 10 февраля 2015 г.

Карта блога с картинками для Blogspot (Blogger)

Карта блога с графикой

 - Приветствую вас уважаемые посетители блога Азбука Bloggera. Сегодня в статье карта блога с картинками для Blogspot (Blogger) хочу Вас порадовать новой фишкой для вашего ресурса. Все знают как важна эта функция для своего сайта, она нужна для того, что бы посетитель не заблудиться и побыстрей мог найти то, что ему необходимо. Как выглядит карта сайта с графикой Вы можете посмотреть на странице Демо Блога, если она вам понравилась, тогда давайте начнем её установливать на ваш блог.


  - 1) Заходим Панель управления => Страницы => Создать страницу (См. рис. ниже)




  - 2) Напишите название страницы например: "Карта блога" или любое другое, на ваше усмотрение, переходите в режим редактирования страницы HTML (См. рис. ниже) копируете и вставляете туда код карты блога с картинками.




<style>
  #resultados { /* общий блок */ }
  #loadingscript { /* текст "Загрузка" */ }
  .paginaposts { /* каждого прямоугольника */
    border: 1px solid #FF00CC;
    float: left;
    height: 50px;
    margin: 1px;
    padding: 5px;
    width: 230px;
    background: #faebee;
  }
  .paginaposts a { /* ссылки */
    color: #000000;
    display: block;
    font-size: 11px;
    text-decoration: none;
    text-indent: 0px;
  }
  .paginaposts img { /* изображения */
    float: left;
    height: 40px;
    width: 40px;
    padding: 2px;
    margin: 2px 5px 2px 2px;
  }
  .paginaposts h6 { /* заголовки */
    height: 45px;
    margin: 0;
    font-weight: normal;
  }
  .paginaposts:hover { /* эффект при наведении мышки */
    background-image: -moz-linear-gradient(100% 100% 90deg, #fbcbf0, #fbcbf0);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fbcbf0), to(#fbcbf0));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#fbcbf0', EndColorStr='#fbcbf0');
    border: 1px solid #CC00CC;
  }
  #paginacion { /* нижний контейнер с количеством записей */
    color: #bbb;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    line-height: 28px;
    padding: 20px 0;
    text-align: center;
  }
  #paginacion span, #paginacion a { /* постраничная навигация */
    border: 1px solid #ddcca3;
    color: #d6a87a;
    display: inline-block;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    margin: 0 2px;
    padding: 0 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-indent: 0px;
  }
  #paginacion span.actual { /* текущая страница */
    color: #000080;
    padding: 0 5px;
    -moz-box-shadow: 0 0 30px #fff inset;
    -webkit-box-shadow: 0 0 30px #fff inset;
    box-shadow: 0 0 30px #fff inset;
  }
  #paginacion a:hover { /* наведение на эти ссылки */
    color: #fff;
    -moz-box-shadow: 0 0 20px #666 inset;
    -webkit-box-shadow: 0 0 20px #666 inset;
    box-shadow: 0 0 20px #666 inset;
    text-decoration: none;
  }
  #paginacion .antesdespues { border: none; }
  #paginacion .antesdespues:hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #paginacion span.deshabilitado { /* следующие */
    border: none;
    color: #1621c4;
  }
  #totales {text-align:center;}
</style><script type="text/javascript">
//<![CDATA[
var postporpagina = 60; // число записей на странице
var urlsitio = "http://www.azbukabloggera.ru"; // адрес блога
var minpaginas = 5; // минимальное количество страниц
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "http://3.bp.blogspot.com/_hljKDuw-cxQ/SsmfbhHhGrI/AAAAAAAAOU0/vCmT5Y4wzEo/s1600/vagaPlantilla_resumenpostsnoimage.gif"; // адрес изображения, который будет показан при отсутствии картинки в сообщении
var firsttime = 0;
var paginaactual = 1;
var cantidadpaginas = 0;
var cantidadposts = 0;
function showpageposts(json) {
  var entry, posttitle, posturl, postimg;
  var salida = "";
  if(cantidadpaginas==0) {
    cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
    cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
  }
  for (var i = 0; i < postporpagina; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = imgxdefecto;
    }
    salida += "<div class='paginaposts'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "</div>";
  }
  document.getElementById("resultados").innerHTML = salida;
  paginacion();
}
function paginacion() {
  contadorP = 0;
  salida = "";
  if(paginaactual>1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>следующие</a>";
  } else {
    salida += "<span class='deshabilitado'>следующие</span>";
  }
  if (cantidadpaginas<(maxpaginas+1)) {
    for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
      if (contadorP==paginaactual) {
        salida += "<span class='actual'>" + contadorP + "</span>";
      } else {
        salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
      }
    }
  } else if(cantidadpaginas>(maxpaginas-1)) {
    if(paginaactual<minpaginas) {
      for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
       if (contadorP == paginaactual) {
         salida += "<span class='actual'>" + contadorP + "</span>";
       } else {
         salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
       }
     }
     salida += " ... ";
     salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
     salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
      salida += " ... ";
      salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
      salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
    }
  }
  if (paginaactual<contadorP-1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>предыдущие</a>";
  } else {
    salida += "<span class='deshabilitado'>предыдущие</span>";
  }
  document.getElementById("paginacion").innerHTML = salida;
  var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
  var finalpagina = paginaactual * postporpagina;
  var totales = "Всего опубликовано сообщений: " + cantidadposts + " - из них показано " + iniciopagina + "-" + finalpagina + " записей";
  document.getElementById("totales").innerHTML = totales;
}
function incluirscript(pagina) {
  if(firsttime==1) {removerscript();}
  document.getElementById("resultados").innerHTML = "<div id='loadingscript'>загрузка ...</div>";
  document.getElementById("paginacion").innerHTML = "";
  document.getElementById("totales").innerHTML = "";
  var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);
  var archivo = urlsitio + "/feeds/posts/default?start-index=" + iniciopagina;
  archivo += "&max-results=" + postporpagina;
  archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";
  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivo);
  nuevo.setAttribute('id', 'TEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);
  firsttime = 1;
  paginaactual = pagina;
}
function removerscript() {
  var el = document.getElementById("TEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}
onload=function() { incluirscript(1); }
//]]>
</script>
<div id="resultados" ></div>
<div style="clear:both;"></div>
<div id="paginacion"></div>
<div id="totales"></div>

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

  - Важно:

  - Перед публикацией страницы с картой для Blogger, вам в верхнем коде выделенный красным цветом URL (адреса) моего блога нужно заменить на свой.

  - Выделенные синим коды цвета HTML - цвета стиля окон, бордюров, наведения и т.д подберите на нашем сайте на странице Онлайн генератор цвета и замените на свои.

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

  - Вот в принципе и все, как видите ничего сложного в этом нет, надеюсь с помощью статьи карта блога с картинками для Blogspot (Blogger) вы сделаете свой сайт более удобным, привлекательным и функциональным. До скорой встречи, все удачи, пока !!!

вторник, 27 января 2015 г.

Гаджет рекомендуемые сообщения в конце статьи и партнерка для Blogger


  - Мне уже давно разонравился гаджет похожих сообщений от LinkWithin с миниатюрами и я начал бороздить просторы интернета в поиске подобного сервиса, мои критерии были такие: что бы сервис был бесплатный и максимум настроек для виджета рекомендуемые сообщения в конце статьи для Blogger. И вот я случайно наткнулся на такой сервис под названием Engageya, правда он забугорный, но в помощь как всегда браузер Google с переводчиком.

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

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

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

   - 1) Заходим на сайт сервиса, переходим на главную страницу и как показано на рисунке ниже нажимаете на кнопку Register - регистрация.



  - 2) В появившемся окне заполняете все поля:



  • Username - Имя (логин).
  • Email - Адрес почтового ящика.
  • Website - URL (адрес) вашего сайта (укажите вначале один, потом можно добавить другие).
  • Confirm - Повторно введите пароль для подтверждения.
  • Ниже отмечаете обе галочки (получать обновления и пользовательское соглашение).


После заполнения всех полей нажимаете кнопку Signup.

  - 3) Следом откроется окошко (рис.ниже) в котором вводим код подтверждения, который придет в письме на ваш почтовый ящик, и опять нажмите синюю кнопку Signup.



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

  - 1) Дайте название вашему виджету (английскими буквами не больше 9 символов).

  - 2) Выберите внешний вид, их там огромное множество, ниже картинки с примерами.

  - 3) Выберите из скольких столбцов будет виджет, максимум 2 и только на некоторых.



  - 4) Выбираете цвет шрифта который будет отображаться в виджете.

  - 5) Пишите заголовок, который будет отображаться в статье над виджетом.

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



  - 7) Выбираете платформу Javascpipr любая платформа и нажимаете кнопку Save & Get code - Сохранить и получить код для вставки в шаблон блога.

  - Хочу отметить, что код созданного гаджета вставить в HTML шаблон блога надо всего лишь один раз, а изменять внешний вид виджета и все остальное можно с личного кабинета на сайте онлайн сервиса.



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

  - Ниже представлю вам скриншоты с примерами гаджетов похожих сообщений:


             


             


             


 

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

  - Теперь давайте полученный код гаджета рекомендуемые статьи вставим в HTML код шаблона блога, для этого:

  - 1) Заходим Панель управления => Шаблон => Изменить HTML

  - 2) Нажмите CTRL+F и в строку поиска вставьте код  <data:post.body/> затем нажмите Enter чтобы его найти.

У разных шаблонов разные варианты строк, после которых надо вставлять скрипт похожих статей:


  1. <data:post.body/> 
  2. <div class='post-footer-line post-footer-line-1'> 
  3. <div class='post-footer-line post-footer-line-2'> 
  4. <div class='post-footer-line post-footer-line-3'> 
  5. <b:include data='post' name='post'/>


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

  - 3) После найденного кода <data:post.body/> вставляете скопированный код виджета

  - 4) Затем нажмите Сохранить шаблон.

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

  - Желаю вам удачи и подписывайтесь на новые статьи, дальше будет интересней !!!

четверг, 22 января 2015 г.

Как сделать красивое выпадающее 3D меню для Blogger (Blogspot)


  - Добрый день или вечер !!! Каждый блогер, который ведет свой блог на платформе Blogspot, хочет его немного приукрасить и сделать немного не похожим на другие.

  - Сегодня на своем блоге Азбука Bloggera я продолжу тему изменения стандартного меню на Bloggere. Представлю скрипт и расскажу как сделать красивое выпадающее 3D меню для вашего сайта. Посмотреть как оно выглядит можно на картинке ниже, а как работает красивое меню смотрите на Демо блоге.





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

  - 1) Заходим Панель управления => Шаблон => Изменить HTML

  - 2) Нажмите CTRL+F и в строку поиска вставьте код ]]></b:skin> затем нажмите Enter чтобы его найти.

  - 3) Чуть Выше вставляем код CSS стиля для меню:


#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
.menu3Dflip ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.menu3Dflip ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }


  - После того как вставили в шаблон код CSS стиля выпадающего 3D меню и сохранили, надо вставить код самого меню в шаблон блога.

  - 1) Нажмите CTRL+F и в строку поиска вставьте код </head> или <body> затем нажмите Enter чтобы его найти.

Небольшое отступление: Почему я указал два куска кода </head> или <body>, потому что сразу за кодом </head> находится <body>, которое в разных шаблонах бывает разным, на другом моем блоге оно например такое: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>.

  - 2) Чуть Ниже <body> вставляем этот код 3D меню:


<div id='menufixed'>
<div class='menu3Dflip'>
<ul class='nav'>
<li><a class='top-a' href='#'><b>Home</b></a></li>
<li><a class='top-a' href='#'><b>Menu 1</b></a>
<div class='col3'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
<ul class='col'>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 10</a></li>
<li><a href='#'>Sub Menu 11</a></li>
<li><a href='#'>Sub Menu 12</a></li>
<li><a href='#'>Sub Menu 13</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 2</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 3</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
<li><a href='#'>Sub Menu 5</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 4</b></a>
<div class='col2 left'>
<ul class='colLeft'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
</ul>
<ul class='colRight'>
<li><a href='#'>Sub Menu 5</a></li>
<li><a href='#'>Sub Menu 6</a></li>
<li><a href='#'>Sub Menu 7</a></li>
<li><a href='#'>Sub Menu 8</a></li>
<li><a href='#'>Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#'><b>Menu 5</b></a></li>
</ul>
</div>
</div>


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

  - После всех изменений в шаблоне блога сохраняете его и любуетесь своим новым красивым выпадающим 3D меню для Blogger (Blogspot). Можете еще посмотреть на статью Как сделать анимированное выпадающее меню, может оно вам больше понравиться, ну а я с вами пока буду ненадолго прощаться, всем удачи, Пока !!!

пятница, 9 января 2015 г.

Как добавить страницу в индекс Яндекса и другие поисковые системы


  - Всем привет !!! Рад Вас видеть дорогие посетители на своем блоге AzbukaBloggera.ru. Сегодня я хочу Вам рассказать, как добавить страницу в индекс Яндекса. В поиск Google, как вы уже заметили, статьи попадают через пять минут после её публикации, а вот попасть в индекс яндекса - проблема.

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

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

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

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




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

  - Хочу Вам сразу сказать, что сервис поддерживает только RSS 2.0. Поддержка Atom отсутствует. Например для сайта на платформе WordPress ссылка RSS будет такой: site.ru/feed. Для блогов на платформе Blogspot ссылка RSS будет такой, на платном домене: http://site.ru/feeds/posts/default?alt=rss на бесплатном домене: http://site.blogspot.ru/feeds/posts/default?alt=rss Для других платформ естественно ссылки RSS другие, думаю вы разберетесь сами.

  - После регистрации на сервисе, как показано на скриншоте ниже, нажимаем на вкладку Задачи из RSS для добавления и управления лентой.




  - Далее, как показано на скриншоте ниже, вставляем ссылку RSS сайта или блога, выбираем вариант её обработки, котором я расскажу ниже, и нажимаем кнопку Добавить, вот и все настройки, теперь будет автоматически осуществляться индексация статей в Яндексе сразу после её публикации.




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

  - 1 Вариант - Переход бота. Это значит, что сервис отправит на страницу поискового робота Яндекса, но не берет на себя ответственность за индексацию. В случае если страница не попадет в индекс, деньги не возвратят. Простыми словами они не дают гарантии что страница проиндексируется. Стоимость этого варианта 30 копеек и + 5 твитов с прямыми ссылками.

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




  - 2 Вариант - Быстрый индекс. Это значит, что вы оплачиваете за страницы, которые попали в быстрый индекс Яндекса. Проверка и на попадания в поиск страниц выполняется через 6 - 12 часов после выполнения задания. Одним словом, ваша страница проиндексируется сто процентов и после проверки в течении 6-12 часов с вас снимут денюшку. Стоимость этого варианта 1.02 рубля + 5 твитов с прямыми ссылками.




  - 3 Вариант - Основной индекс. Это значит, что Вы оплачиваете за страницы попавшие в основной индекс Яндекса. Задание завершается после очередного обновления поисковой базы в течении 10-14 суток. Задание стоит 0.62 рубля + 5 твитов с прямыми ссылками.




  - Ещё раз повторюсь, эти варианты выбираются и при автоматической обработки RSS ленты сайта или блога. Цены приведены на момент написания поста. Ну на этом сегодня в статье как добавить страницу в индекс Яндекса я буду заканчивать. Рекомендую Вам этот сервис, которым сам давно пользуюсь, регистрируйтесь и пусть статьи на вашем блоге или сайте всегда будут уникальными. Заходите на мой блок почаще, я вас еще чем нибудь порадую. Всем удачи, пока!!!

воскресенье, 30 ноября 2014 г.

Кнопка Twitter для блога Blogger и WordPress в виде птички


  - Всем привет! И сейчас я хочу в очередной раз на нашем блоге Азбука Bloggera поднять тему продвижения наших блогов в соц сети. Сегодня предложу вам в этой теме необычную, красивую кнопку Twitter в виде лежащей,читающей птички или сидящей на ветке для Blogspota и WordPress.

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

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

  - 1) Заходим Панель управления => Дизаин => Добавить гаджет




  - 2) В открывшимся окне выбираем HTML/JavaScript




  - 3) Дальше в открывшемся окне вставляем этот код:



<a href=' http://www.azbukabloggera.ru/ '></a><div style='position: fixed; bottom: 80%; right: 6%;'/><a href="http://www.twitter.com/AzbukaBloggera" target="_blank"><img src="https://lh4.googleusercontent.com/-u537DO1c2oE/VG4W9PviAWI/AAAAAAAABGQ/4Xf6MzfQ8KM/w105-h130-no/1.png" /></a></div>



  - Теперь в коде, то что выделено синим цветом, замените на свою ссылку аккаунта пользователя Twitter.

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

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

Выберите понравившуюся Птичку для кнопки Twitter в гаджет:



                                           

  - 4) После редактирования и вставки кода нажмите Сохранить гаджет и перетащите его в любое место.

  - Надеюсь Вам дорогие друзья понравилась кнопка Twitter для блога на платформе Blogger (Blogspot) в виде птички. Эту кнопку можно поставить и на блог на платформе WordPress. Если что будет непонятно отвечу в комментариях. Подписывайтесь на обновление в нижней форме подписки и делитесь гаджетом плавающей кнопки Twitter с птичкой в сой. сетях. Всем Удачи!!!