Навигация с номерами страниц для Blogger

По умолчанию на главной странице блога показываются только 7 последних сообщений. Для просмотра более старых постов необходимо нажать на ссылку “Предыдущие” внизу страницы. Будут показаны другие семь статей блога. Внизу появятся еще две ссылки “Следующие”, для перехода на более свежие посты, и "Главная страница". Так, с помощью ссылок, можно передвигаться по главной странице туда – сюда и просматривать по семь постов на каждом шаге.

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

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

Постраничная навигация для блогов на Блогспот

Вариант навигации, которая работает на этом сайте.

В коде HTML темы, в шаблоне блога (окно поиска Ctrl+F) находим тег ]]></b:skin> и перед ним добавляем код стилей CSS :

.showpageOf{display:inline-block;font-size:90%;padding:7px 12px;vertical-align:top;line-height:20px;} .showpagePoint{background:#333;color:#fff;display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-left:1px solid #f0f0f0;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:initial} .showpage a,.showpageNum a{display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-left:1px solid #f0f0f0;transition:color .3s} .showpage a:hover,.showpageNum a:hover{background-color:#fefefe;color:#454545;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:color .3s}

В код шаблона, перед тегом </body> , добавляем код скрипта меню нумерации по страницам:

<b:if cond='data:blog.pageType == &quot;index&quot;'> <script type='text/javascript'> /*<![CDATA[*/ var postperpage=7;var numshowpage=3;var upPageWord ='Обратно';var downPageWord ='Дальше';var urlactivepage=location.href;var home_page="/"; /*]]>*/ </script> <script> var _0xc844=[&quot;&quot;,&quot;\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x73\x68\x6F\x77\x70\x61\x67\x65\x4F\x66\x27\x3E\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430\x20&quot;,&quot;\x20\u0438\u0437\x20&quot;,&quot;\x3C\x2F\x73\x70\x61\x6E\x3E&quot;,&quot;\x70\x61\x67\x65&quot;,&quot;\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22&quot;,&quot;\x22\x3E&quot;,&quot;\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E&quot;,&quot;\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x4E\x75\x6D\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x2F\x73\x65\x61\x72\x63\x68\x2F\x6C\x61\x62\x65\x6C\x2F&quot;,&quot;\x3F\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D&quot;,&quot;\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x4E\x75\x6D\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x23\x22\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x22\x72\x65\x64\x69\x72\x65\x63\x74\x70\x61\x67\x65\x28&quot;,&quot;\x29\x3B\x72\x65\x74\x75\x72\x6E\x20\x66\x61\x6C\x73\x65\x22\x3E&quot;,&quot;\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x4E\x75\x6D\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x23\x22\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x22\x72\x65\x64\x69\x72\x65\x63\x74\x6C\x61\x62\x65\x6C\x28&quot;,&quot;\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x4E\x75\x6D\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22&quot;,&quot;\x22\x3E\x31\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E&quot;,&quot;\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x50\x6F\x69\x6E\x74\x22\x3E&quot;,&quot;\x70\x61\x67\x65\x41\x72\x65\x61&quot;,&quot;\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x4E\x61\x6D\x65&quot;,&quot;\x62\x6C\x6F\x67\x2D\x70\x61\x67\x65\x72&quot;,&quot;\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64&quot;,&quot;\x6C\x65\x6E\x67\x74\x68&quot;,&quot;\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C&quot;,&quot;\x66\x65\x65\x64&quot;,&quot;\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73&quot;,&quot;\x2F\x73\x65\x61\x72\x63\x68\x2F\x6C\x61\x62\x65\x6C\x2F&quot;,&quot;\x69\x6E\x64\x65\x78\x4F\x66&quot;,&quot;\x3F\x75\x70\x64\x61\x74\x65\x64\x2D\x6D\x61\x78&quot;,&quot;\x73\x75\x62\x73\x74\x72\x69\x6E\x67&quot;,&quot;\x3F\x26\x6D\x61\x78&quot;,&quot;\x3F\x71\x3D&quot;,&quot;\x2E\x68\x74\x6D\x6C&quot;,&quot;\x23\x50\x61\x67\x65\x4E\x6F\x3D&quot;,&quot;\x3C\x73\x63\x72\x69\x70\x74\x20\x73\x72\x63\x3D\x22&quot;,&quot;\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x73\x75\x6D\x6D\x61\x72\x79\x3F\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x31\x26\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x68\x69\x74\x75\x6E\x67\x74\x6F\x74\x61\x6C\x64\x61\x74\x61\x22\x3E\x3C\x2F\x73\x63\x72\x69\x70\x74\x3E&quot;,&quot;\x77\x72\x69\x74\x65&quot;,&quot;\x6C\x61\x62\x65\x6C&quot;,&quot;\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D&quot;,&quot;\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x73\x75\x6D\x6D\x61\x72\x79\x2F\x2D\x2F&quot;,&quot;\x3F\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x68\x69\x74\x75\x6E\x67\x74\x6F\x74\x61\x6C\x64\x61\x74\x61\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x31\x22\x20\x3E\x3C\x2F\x73\x63\x72\x69\x70\x74\x3E&quot;,&quot;\x68\x65\x61\x64&quot;,&quot;\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65&quot;,&quot;\x73\x63\x72\x69\x70\x74&quot;,&quot;\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74&quot;,&quot;\x74\x79\x70\x65&quot;,&quot;\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74&quot;,&quot;\x73\x72\x63&quot;,&quot;\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x73\x75\x6D\x6D\x61\x72\x79\x3F\x73\x74\x61\x72\x74\x2D\x69\x6E\x64\x65\x78\x3D&quot;,&quot;\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x31\x26\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x66\x69\x6E\x64\x64\x61\x74\x65\x70\x6F\x73\x74&quot;,&quot;\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65&quot;,&quot;\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64&quot;,&quot;\x3F\x73\x74\x61\x72\x74\x2D\x69\x6E\x64\x65\x78\x3D&quot;,&quot;\x65\x6E\x74\x72\x79&quot;,&quot;\x24\x74&quot;,&quot;\x70\x75\x62\x6C\x69\x73\x68\x65\x64&quot;,&quot;\x2F\x73\x65\x61\x72\x63\x68\x3F\x75\x70\x64\x61\x74\x65\x64\x2D\x6D\x61\x78\x3D&quot;,&quot;\x3F\x75\x70\x64\x61\x74\x65\x64\x2D\x6D\x61\x78\x3D&quot;,&quot;\x68\x72\x65\x66&quot;];function loophalaman(_0x160bx2){var _0x160bx3=_0xc844[0];nomerkiri= parseInt(numshowpage/ 2),nomerkiri== numshowpage- nomerkiri&amp;&amp; (numshowpage= 2* nomerkiri+ 1),mulai= nomerhal- nomerkiri,mulai&lt; 1&amp;&amp; (mulai= 1),maksimal= parseInt(_0x160bx2/ postperpage)+ 1,maksimal- 1== _0x160bx2/ postperpage&amp;&amp; (maksimal-= 1),akhir= mulai+ numshowpage- 1,akhir&gt; maksimal&amp;&amp; (akhir= maksimal),_0x160bx3+= _0xc844[1]+ nomerhal+ _0xc844[2]+ maksimal+ _0xc844[3];var _0x160bx4=parseInt(nomerhal)- 1;nomerhal&gt; 1&amp;&amp; (_0x160bx3+= 2== nomerhal?_0xc844[4]== jenis?_0xc844[5]+ home_page+ _0xc844[6]+ upPageWord+ _0xc844[7]:_0xc844[8]+ lblname1+ _0xc844[9]+ postperpage+ _0xc844[6]+ upPageWord+ _0xc844[7]:_0xc844[4]== jenis?_0xc844[10]+ _0x160bx4+ _0xc844[11]+ upPageWord+ _0xc844[7]:_0xc844[12]+ _0x160bx4+ _0xc844[11]+ upPageWord+ _0xc844[7]),mulai&gt; 1&amp;&amp; (_0x160bx3+= _0xc844[4]== jenis?_0xc844[13]+ home_page+ _0xc844[14]:_0xc844[8]+ lblname1+ _0xc844[9]+ postperpage+ _0xc844[14]),mulai&gt; 2&amp;&amp; (_0x160bx3+= _0xc844[0]);for(var _0x160bx5=mulai;_0x160bx5&lt;= akhir;_0x160bx5++){_0x160bx3+= nomerhal== _0x160bx5?_0xc844[15]+ _0x160bx5+ _0xc844[3]:1== _0x160bx5?_0xc844[4]== jenis?_0xc844[13]+ home_page+ _0xc844[14]:_0xc844[8]+ lblname1+ _0xc844[9]+ postperpage+ _0xc844[14]:_0xc844[4]== jenis?_0xc844[10]+ _0x160bx5+ _0xc844[11]+ _0x160bx5+ _0xc844[7]:_0xc844[12]+ _0x160bx5+ _0xc844[11]+ _0x160bx5+ _0xc844[7]};akhir&lt; maksimal- 1&amp;&amp; (_0x160bx3+= _0xc844[0]),akhir&lt; maksimal&amp;&amp; (_0x160bx3+= _0xc844[4]== jenis?_0xc844[10]+ maksimal+ _0xc844[11]+ maksimal+ _0xc844[7]:_0xc844[12]+ maksimal+ _0xc844[11]+ maksimal+ _0xc844[7]);var _0x160bx6=parseInt(nomerhal)+ 1;nomerhal&lt; maksimal&amp;&amp; (_0x160bx3+= _0xc844[4]== jenis?_0xc844[10]+ _0x160bx6+ _0xc844[11]+ downPageWord+ _0xc844[7]:_0xc844[12]+ _0x160bx6+ _0xc844[11]+ downPageWord+ _0xc844[7]);for(var _0x160bx7=document[_0xc844[17]](_0xc844[16]),_0x160bx8=document[_0xc844[19]](_0xc844[18]),_0x160bx9=0;_0x160bx9&lt; _0x160bx7[_0xc844[20]];_0x160bx9++){_0x160bx7[_0x160bx9][_0xc844[21]]= _0x160bx3};_0x160bx7&amp;&amp; _0x160bx7[_0xc844[20]]&gt; 0&amp;&amp; (_0x160bx3= _0xc844[0]),_0x160bx8&amp;&amp; (_0x160bx8[_0xc844[21]]= _0x160bx3)}function hitungtotaldata(_0x160bx2){var _0x160bx3=_0x160bx2[_0xc844[22]],_0x160bx4=parseInt(_0x160bx3[_0xc844[23]].$t,10);loophalaman(_0x160bx4)}function halamanblogger(){var _0x160bx2=urlactivepage;-1!= _0x160bx2[_0xc844[25]](_0xc844[24])&amp;&amp; (lblname1= -1!= _0x160bx2[_0xc844[25]](_0xc844[26])?_0x160bx2[_0xc844[27]](_0x160bx2[_0xc844[25]](_0xc844[24])+ 14,_0x160bx2[_0xc844[25]](_0xc844[26])):_0x160bx2[_0xc844[27]](_0x160bx2[_0xc844[25]](_0xc844[24])+ 14,_0x160bx2[_0xc844[25]](_0xc844[28]))),-1== _0x160bx2[_0xc844[25]](_0xc844[29])&amp;&amp; -1== _0x160bx2[_0xc844[25]](_0xc844[30])&amp;&amp; (-1== _0x160bx2[_0xc844[25]](_0xc844[24])?(jenis= _0xc844[4],nomerhal= -1!= urlactivepage[_0xc844[25]](_0xc844[31])?urlactivepage[_0xc844[27]](urlactivepage[_0xc844[25]](_0xc844[31])+ 8,urlactivepage[_0xc844[20]]):1,document[_0xc844[34]](_0xc844[32]+ home_page+ _0xc844[33])):(jenis= _0xc844[35],-1== _0x160bx2[_0xc844[25]](_0xc844[36])&amp;&amp; (postperpage= 20),nomerhal= -1!= urlactivepage[_0xc844[25]](_0xc844[31])?urlactivepage[_0xc844[27]](urlactivepage[_0xc844[25]](_0xc844[31])+ 8,urlactivepage[_0xc844[20]]):1,document[_0xc844[34]](_0xc844[32]+ home_page+ _0xc844[37]+ lblname1+ _0xc844[38])))}function redirectpage(_0x160bx2){jsonstart= (_0x160bx2- 1)* postperpage,nopage= _0x160bx2;var _0x160bx3=document[_0xc844[40]](_0xc844[39])[0],_0x160bx4=document[_0xc844[42]](_0xc844[41]);_0x160bx4[_0xc844[43]]= _0xc844[44],_0x160bx4[_0xc844[48]](_0xc844[45],home_page+ _0xc844[46]+ jsonstart+ _0xc844[47]),_0x160bx3[_0xc844[49]](_0x160bx4)}function redirectlabel(_0x160bx2){jsonstart= (_0x160bx2- 1)* postperpage,nopage= _0x160bx2;var _0x160bx3=document[_0xc844[40]](_0xc844[39])[0],_0x160bx4=document[_0xc844[42]](_0xc844[41]);_0x160bx4[_0xc844[43]]= _0xc844[44],_0x160bx4[_0xc844[48]](_0xc844[45],home_page+ _0xc844[37]+ lblname1+ _0xc844[50]+ jsonstart+ _0xc844[47]),_0x160bx3[_0xc844[49]](_0x160bx4)}function finddatepost(_0x160bx2){post= _0x160bx2[_0xc844[22]][_0xc844[51]][0];var _0x160bx3=post[_0xc844[53]][_0xc844[52]][_0xc844[27]](0,19)+ post[_0xc844[53]][_0xc844[52]][_0xc844[27]](23,29),_0x160bx4=encodeURIComponent(_0x160bx3);if(_0xc844[4]== jenis){var _0x160bx5=_0xc844[54]+ _0x160bx4+ _0xc844[36]+ postperpage+ _0xc844[31]+ nopage}else {var _0x160bx5=_0xc844[24]+ lblname1+ _0xc844[55]+ _0x160bx4+ _0xc844[36]+ postperpage+ _0xc844[31]+ nopage};location[_0xc844[56]]= _0x160bx5}var nopage,jenis,nomerhal,lblname1;halamanblogger() </script> </b:if>

В первых строчках кода скрипта, селекторы postperpage=7; и numshowpage=3; определяют количество постов, выводимых на одной странице, =7, и количество кнопок с номерами страниц, отображаемых в меню, =3. Эти цифры можно менять на ваше усмотрение.

Важное условие. Число в селекторе postperpage=7; должно совпадать с числом, установленным для количества постов в настройках темы. Для проверки условия, в меню панели управления блога, открываем  “Дизайн”, в гаджете “Сообщения блога” - “Изменить”. В открывшемся окне вверху смотрим “Количество сообщений на главной странице =7 [Сообщения ] . Условие выполнено!

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

Настройка постраничной нумерованной навигации на странице ярлыков

Если открыть страницу ярлыка с гаджета Ярлыки в сайдбаре, то на странице показываются 20 постов, а в конце страницы появляются старые кнопки навигации Главная - Предыдущие. И если кликнуть на Предыдущие, то открывается страница с другими 20 постами, но уже в с постраничной навигацией с номерами страниц.

Для правильной нумерации страниц рубрик, в коде шаблона ищем: 'data:label.url' , и все найденные меняем на: 'data:label.url + "?&max-results=7"'Число 7 - это количество сообщений, которое должно показываться на одной странице ярлыков и главной.

Открываем рубрики и убеждаемся в том, что, и на страницах ярлыков, новая навигация с номерами страниц работает как надо .

Смотрим окно браузера и видим, что URL страницы рубрики изменился. На конце URL ярлыка появился "хвост": ?&max-results=7 . Следовательно, на сайте необходимо найти все старые ссылки на рубрики и изменить их на новые.

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

https://iuzh.blogspot.com/search/label/%D0%A1%D0%B0%D0%B9%Blogger?&max-results=7;

Сохраняем изменения, но в ответ, над окном HTML, появляется сообщение:

Ошибка при синтаксическом анализе XML (строка 710, столбец 155): The reference to entity "max-results" must end with the ';' delimiter.

Правильный URL ссылки для вставки в код шаблона, будет такой:

https://iuzh.blogspot.com/search/label/%D0%A1%D0%B0%D0%B9%Blogger?&amp;amp;max-results=7;
На конце ссылки, после знака ? должно быть: &amp;amp;max-results=7;

Как включить навигацию с номерами на страницах Архив

На сайт можно установить гаджет виджета “Настроить архив”, который на страницу выводит все сообщения, созданные за определенный период, например, за март 2018 года. Для включения навигации с номерами на страницах архива, в коде шаблона темы ищем код: <!-- navigation -->
<b:include name='nextprev'/>и заменяем его на код: <!-- navigation -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>Так как виджет “Настроить архив” на сайтах используется редко, то скрипт постраничной навигации на страницах архива отключен. Для того, чтобы скрипт заработал на страницах архива необходимо в коде скрипта (код смотри выше), в самом начале, найти и удалить тег: <b:if cond='data:blog.pageType == &quot;index&quot;'> , а в самом конце скрипта вырезать закрывающий тег </b:if> .

Запрещаем показ старой навигации на страницах

Показ старой блогспотовской навигации со ссылками на главной странице лучше отключить, чтобы не мешалась. Рекомендую старую навигацию не показывать и на статических страницах, например, на странице Карта сайта. Там постраничная навигация просто не нужна.
Для запрета показа старой навигации, в коде темы ищем код:
<!—navigation -->
<b:include name='nextprev'/>
и заменяем его на этот код: <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
</b:if>

Другой вариант навигации с номерами страниц для Blogger

Код скрипта:

<script type='text/javascript'>
var pageresults=7;
var numshowpage=3;
var upPageWord=&#39;&lt;i class=&quot;fa fa-angle-double-left&quot;&gt;&lt;/i&gt;&#39;;
var downPageWord=&#39;&lt;i class=&quot;fa fa-angle-double-right&quot;&gt;&lt;/i&gt;&#39;;
var urlactivepage=location.href;
var home_page=&quot;/&quot;;
</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
// Page Navigation Scripts
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('6 M;6 i;6 h;6 u;1h();C 1k(15){6 5=\'\';J=I(U/2);4(J==U-J){U=J*2+1}A=h-J;4(A<1)A=1;d=I(15/j)+1;4(d-1==15/j)d=d-1;F=A+U-1;4(F>d)F=d;5+="<3 7=\'1G\'>1D "+h+\' 1C \'+d+"</3>";6 18=I(h)-1;4(h>1){4(h==2){4(i=="o"){5+=\'<3 7="1y"><a b="\'+B+\'">\'+13+\'</a></3>\'}c{5+=\'<3 7="g"><a b="/s/r/\'+u+\'?&9-m=\'+j+\'">\'+13+\'</a></3>\'}}c{4(i=="o"){5+=\'<3 7="g"><a b="#" y="L(\'+18+\');v z">\'+13+\'</a></3>\'}c{5+=\'<3 7="g"><a b="#" y="K(\'+18+\');v z">\'+13+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a b="\'+B+\'">1</a></3>\'}c{5+=\'<3 7="g"><a b="/s/r/\'+u+\'?&9-m=\'+j+\'">1</a></3>\'}}4(A>2){5+=\'  \'}1j(6 k=A;k<=F;k++){4(h==k){5+=\'<3 7="1B">\'+k+\'</3>\'}c 4(k==1){4(i=="o"){5+=\'<3 7="g"><a b="\'+B+\'">1</a></3>\'}c{5+=\'<3 7="g"><a b="/s/r/\'+u+\'?&9-m=\'+j+\'">1</a></3>\'}}c{4(i=="o"){5+=\'<3 7="g"><a b="#" y="L(\'+k+\');v z">\'+k+\'</a></3>\'}c{5+=\'<3 7="g"><a b="#" y="K(\'+k+\');v z">\'+k+\'</a></3>\'}}}4(F<d-1){5+=\'\'}4(F<d){4(i=="o"){5+=\'<3 7="g"><a b="#" y="L(\'+d+\');v z">\'+d+\'</a></3>\'}c{5+=\'<3 7="g"><a b="#" y="K(\'+d+\');v z">\'+d+\'</a></3>\'}}6 1b=I(h)+1;4(h<d){4(i=="o"){5+=\'<3 7="g"><a b="#" y="L(\'+1b+\');v z">\'+1g+\'</a></3>\'}c{5+=\'<3 7="g"><a b="#" y="K(\'+1b+\');v z">\'+1g+\'</a></3>\'}}6 D=x.1J("D");6 1d=x.1K("1L-1M");1j(6 p=0;p<D.O;p++){D[p].1i=5}4(D&&D.O>0){5=\'\'}4(1d){1d.1i=5}}C 1e(S){6 Y=S.Y;6 1f=I(Y.1O$1N.$t,10);1k(1f)}C 1h(){6 f=n;4(f.e("/s/r/")!=-1){4(f.e("?X-9")!=-1){u=f.E(f.e("/s/r/")+14,f.e("?X-9"))}c{u=f.E(f.e("/s/r/")+14,f.e("?&9"))}}4(f.e("?q=")==-1&&f.e(".5")==-1){4(f.e("/s/r/")==-1){i="o";4(n.e("#G=")!=-1){h=n.E(n.e("#G=")+8,n.O)}c{h=1}x.1w("<l Q=\\""+B+"N/P/V?9-m=1&11=12-W-l&T=1e\\"><\\/l>")}c{i="r";4(f.e("&9-m=")==-1){j=1H}4(n.e("#G=")!=-1){h=n.E(n.e("#G=")+8,n.O)}c{h=1}x.1w(\'<l Q="\'+B+\'N/P/V/-/\'+u+\'?11=12-W-l&T=1e&9-m=1" ><\\/l>\')}}}C L(H){Z=(H-1)*j;M=H;6 R=x.1x(\'1l\')[0];6 w=x.1u(\'l\');w.1o=\'1n/1m\';w.1v("Q",B+"N/P/V?1p-1q="+Z+"&9-m=1&11=12-W-l&T=1a");R.1t(w)}C K(H){Z=(H-1)*j;M=H;6 R=x.1x(\'1l\')[0];6 w=x.1u(\'l\');w.1o=\'1n/1m\';w.1v("Q",B+"N/P/V/-/"+u+"?1p-1q="+Z+"&9-m=1&11=12-W-l&T=1a");R.1t(w)}C 1a(S){17=S.Y.1I[0];6 1r=17.1s.$t.E(0,19)+17.1s.$t.E(1A,1z);6 16=1F(1r);4(i=="o"){6 1c="/s?X-9="+16+"&9-m="+j+"#G="+M}c{6 1c="/s/r/"+u+"?X-9="+16+"&9-m="+j+"#G="+M}1E.b=1c}',62,113,'|||span|if|html|var|class||max||href|else|maksimal|indexOf|thisUrl|showpageNum|nomerhal|jenis|pageresults|jj|script|results|urlactivepage|page|||label|search||lblname1|return|newInclude|document|onclick|false|mulai|home_page|function|pageArea|substring|akhir|PageNo|numberpage|parseInt|nomerkiri|redirectlabel|redirectpage|nopage|feeds|length|posts|src|nBody|root|callback|numshowpage|summary|in|updated|feed|jsonstart||alt|json|upPageWord||banyakdata|timestamp|post|prevnomer||finddatepost|nextnomer|alamat|blogPager|hitungtotaldata|totaldata|downPageWord|halamanblogger|innerHTML|for|loophalaman|head|javascript|text|type|start|index|timestamp1|published|appendChild|createElement|setAttribute|write|getElementsByTagName|showpage|29|23|showpagePoint|of|Page|location|encodeURIComponent|showpageOf|20|entry|getElementsByName|getElementById|blog|pager|totalResults|openSearch'.split('|'),0,{}))
//]]>
</script>
</b:if>

Для другого, второго варианта навигации, код стилей CSS:

.showpageNum a, .showpage a, .showpagePoint {display: block;float: left;margin-right: 6px;padding: 0 12px;background-color: #272727;color: #f2f2f2;border: 0;text-transform: uppercase;line-height: 31px;font-weight: 500;border-radius: 3px;transition: all .3s ease } .showpageNum a:hover, .showpage a:hover {background-color: #446cb3;color: #fff }.showpageNum a i, .showpage a i {font-size: 14px;font-weight: 400;transition: color 0 }.showpagePoint {background-color: #446cb3;color: #fff }.showpageOf {display: none!important }

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

Best Remove Powered By Blogger Attribution From Blog

Best Remove Powered By Blogger Attribution From Blog

 This post is based on a really standard tutorial on how to take away Powered by blogger attribution from blogger blog. It might be primary details but each individual newbie blogger will likely be keen to understand it. Driven by blogger connection at footer is really a copyright industry to blogger. It can be optional to help keep in the blog site. You could take away it if you do not need to offer credit to blogger. Primarily bloggers clear away this attribution from their blog site to make their blog extra Experienced. There are actually three ways which you could adhere to to eliminate this attribution from your blog site. So, Permit see those three strategies one by one.

Be aware: Be sure to comply with any one way to remove blogger attribution.

Take away Powered by blogger Attribution Down below I'm listing all of the 3 ways that can be use to get rid of powered by blogger url from blogger blog quickly. Allow see all of them one by one.

Скрипт для вставки рекламы в статью Blogger

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

Вставляем пять блоков рекламы в пост

Рекламные блоки в пост вставляем в следующие места:

1. Перед статьей (before)
2. После первого абзаца (opening paragraph)
3. После верхней 1/4 части статьи (upper quarter),
4. В середине статьи(middle),
5. После статьи (after),

Для вставки пяти рекламных блоков, в коде HTML темы блога ищем строку:
<data:post.body/>(вставляем в окно поиска Ctrl+F). В коде имеется несколько таких строк. Находим вторую сверху строку и вместо неё копируем и вставляем этот код:

<!-- Adsense article start -->
<div id='jobmiddlenew'>
 <div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='adsense-quarter-article'>
<!-- Adsense upper quarter article  -->
<span> Код блока рекламы</span>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'>
 <div class='adsense-before-article'>
<!-- Adsense before article --> 
<span> Код блока рекламы</span>
 </div>
<data:post.body/>
 <div class='adsense-after-article'>
<!-- Adsense after article --> 
<span> Код блока рекламы </span>
 </div>
 </div>
 </div>
 <!-- Скрипт upper quarter Adsense article -->
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/4);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
 <div id='addcodemiddle'>
<div class='adsense-middle-article'>
<!-- Adsense middle article -->
<span> Код блока рекламы</span>
</div>
 </div> 
 <div id='AdCode'>
<div class='adsense-paragraph-article'>
<!-- Adsense opening paragraph article -->
<span> Код блока рекламы</span>
</div>
 </div>                                    
<!-- Adsense article end -->

Скрипт для вставки блоков рекламы

Для вставки трех блоков рекламы внутрь текста сообщения необходимо для каждого блока добавить в код темы свой скрипт.
Скрипт для рекламного блока opening paragraph находится в коде (см. выше), который уже добавлен в тему сайта. Но для его работы необходима загрузка на сайт библиотеки jQuery. В тему блога перед тегом </head> необходимо вставить код загрузки библиотеки:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
Проверьте, возможно в теме блога похожий код уже есть. Цифры 2.1.3 - это версия библиотеки, могут быть в вашей теме другими.
Два других скрипта, для отображения блоков middle и opening paragraph, добавляем в код HTML темы. Для этого копируем и вставляем перед тегом </body> следующий код двух скриптов:

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

<!-- Скрипт вставки рекламы после первого параграфа opening paragraph -->
<script>
$AdCode = $(&quot;#AdCode&quot;).html();
$(&quot;#jobmiddlenew br:lt(1)&quot;).replaceWith($AdCode);
$(&quot;#AdCode&quot;).remove();
</script>

<!-- Скрипт вставка рекламы в середину поста middle  --> 
<script type='text/javascript'> var str1=document.getElementById(&quot;jobmiddlenew&quot;).innerHTML; var str2=str1.length; var str3=str2/2; var substr = str1.substring(str3, str2); var n = substr.search(&quot;&lt;br&gt;&quot;); if(n&lt;0) { n = substr.indexOf(&#39;.&#39;); if(n&lt;0) { n=0; } var firsthalf = str1.substring(0, str3+n+1); var secondhalf = str1.substring(str3+n+1, str2); } else { var firsthalf = str1.substring(0, str3+n+4); var secondhalf = str1.substring(str3+n+4, str2); } var addcode=document.getElementById(&quot;addcodemiddle&quot;).innerHTML; var newbody=firsthalf+addcode+secondhalf; var strnew=document.getElementsByClassName(&quot;post-body entry-content&quot;); strnew[0].innerHTML=newbody; document.getElementById(&quot;addcodemiddle&quot;).innerHTML=&quot;&quot;; </script> 

</b:if>

Скрипт, обеспечивающий вставку в пост рекламного блока upper quarter, переносить к тегу </body> не следует. Скрипт там работать не будет.

Алгоритм работы скриптов

Верхняя строка кода <b:if cond='data:blog.pageType == &quot;item&quot;'> разрешает выполнение скриптов только на страницах сообщений.
Первый скрипт, opening paragraph, вставляет рекламный блок в сообщение после первого абзаца. Число абзацев можно менять. Для этого, участок кода br: lt (1) необходимо заменить на br: eq ( 3 ) , где 3 (число можно менять), это количество абзацев, тегов <br> , после которых в статье появится реклама.
Если в статье меньше трех абзацев (тегов <br>), или тегов совсем нет, то объявление не показывается. Необходимое условие для показа объявлений этим скриптом - это наличие в статье разделителя абзацев, тега переноса строки <br>.

В редакторе, перед написанием сообщения необходимо в "Настройках сообщения" выбрать "Параметры" > "Переносы строк" > "Использовать тег <br>".

Алгоритм скрипта, вставляющего рекламу в середину сообщения, middle, определяет общее количество абзацев в тексте статьи по тегу <br> или предложений - по знаку препинания "точка" в посте. Затем определяет середину поста и вставляет рекламный код в ближайший разрыв между абзацами (тег <br>) или перенос строки клавишей Enter. Для правильной работы этого скрипта перенос строк в сообщении можно делать любым способом, использовать тег <br> или клавишу Enter. Если алгоритм скрипта middle, по какой-то причине не находит места для вставки рекламы в середине поста, то рекламный блок отображается в конце сообщения.
Алгоритм скрипта для блока объявлений upper quarter также определяет общее количество в статье абзацев, делит на 4, и вставляет код рекламного объявления после примерно 1/4 части статьи сверху. Если в этом участке кода: length/4) , цифру 4 заменить, например, на 5 , то реклама появится в статье примерно на уровне 1/5 сверху.

Вставка кода рекламного блока

Код рекламного блока размещают в коде темы вместо строки: <span> Код блока рекламы </span>
Код блока рекламы от Рекламной сети Яндекс имеет формат HTML. Темы Blogger закодированы на языке HML. Перед вставкой кода рекламы в тему блога, необходимо код HTML рекламного объявления преобразовать, конвертировать в формат HML. Делать это удобно с помощью виджета Converter HTML / HML.

Converter HTML / HML

Инструкция:

1. Введите код HTML в поле.
2. Нажмите на кнопку "Convert".
3. Скопируйте полученный код HML.
4. Очистка поля кнопкой "Clear".

Преобразованный код блока рекламы вставляют в код темы блога вместо строки:
<span> Код блока рекламы </span>
Если код рекламного блока вставляют в виджет (гаджет) HTML/JavaScipt, то преобразовывать код с помощью Converter не требуется. Виджет сам конвертирует коды.
До недавнего времени приходилось конвертировать коды и рекламных блоков AdSense. В настоящее время конвертация кодов объявлений AdSense не требуется. Шаблоны тем Blogger теперь принимают коды AdSense в исходном виде.

Как запретить показ рекламных блоков

Совсем не обязательно вставлять в статью все пять блоков рекламы. Если вы решите какой-то рекламный блок не вставлять, то просто участки кода и скрипт этого блока удалите из кода темы блога.
Если не показывать в статье рекламный блок upper quarter, то просто удалите строки кода выделенные голубым цветом.
Выше в статье, участки кода других блоков расположены в тегах <div ... </div> , выделенных жирным шрифтом. Для удаления блока рекламы необходимо удалить строки с этими тегами и все что между ними.
Строчки кода, выделенные зеленым цветом, можно вырезать, если удален код сразу двух блоков opening paragraph и middle. Если хотя бы один из этих блоков остается, то зеленые строчки убирать нельзя.
Иногда необходимо, чтобы рекламный блок отображался только на мобильном или только на декстопном компьютере. Для этого, код рекламного блока внутри жирных тегов <div ... </div> обертывают тегом <b:if cond='data:blog.isMobileRequest . Например, рекламный блок middle будет отображаться только на мобильном, если код будет выглядеть так:

<div id='addcodemiddle'>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<div class='adsense-middle-article'>
<!-- Adsense middle article -->
<span> Код блока рекламы</span>
</div>
</b:if>
</div>

Этот же блок middle будет виден только на декстопе, если:

 <div id='addcodemiddle'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='adsense-middle-article'>
<!-- Adsense middle article -->
<span> Код блока рекламы</span>
</div>
</b:if>
</div>

Рекламные блоки какого вида вставлять в статью

Для вставки в середину и в верхнюю половину статьи рекомендую использовать код нативных объявлений от Google AdSense. Этот вид объявлений был разработан специально для вставки в текст сообщения. Впрочем, сейчас и в Рекламной сети Яндекса появились похожие форматы рекламных блоков.
Перед статьей и после, удобно разместить рекламные блоки AdSense адаптивного формата. Адаптивные блоки сами подстраиваются под размер экрана компьютера.
Если на сайте размещают несколько рекламных блоков AdSense, то этот скрипт из кода объявления: <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>достаточно вставить в код темы сайта только один раз, с кодом объявления вверху страницы. Для сайтов, которые работают на Blogger с URL на https:// рекомендуется этот скрипт рекламных блоков AdSense вставить на сайт один раз и в таком коде:

<script type='text/javascript'>
//<![CDATA[
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
//]]>
</script>

Стили CSS блоков рекламы

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

Пример стилей CSS блоков рекламы

В код HTML темы, перед тегом ]]></b:skin>добавляем стили блоков рекламных объявлений:

.adsense-before-article {clear:both;width:100%;text-align: center;margin: 30px auto;}
.adsense-paragraph-article, .adsense-quarter-article,.adsense-middle-article {clear:both;width:100%;text-align: center;border: 1px solid #ecf0f1;margin: 30px auto;}
.adsense-after-article {clear:both;width:100%;text-align: center;margin: 30px auto;}

Стили CSS для мобильной версии сайта Blogger

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

Настройка показа мобильной версии блога

В Blogger имеется возможность настройки показа мобильной версии сайта в двух вариантах. В одном, для показа на мобильном производится перевод сайта с одной темы, декстопной, на другую. В качестве другой, мобильной темы блога используется одна из стандартных (дефолтных) тем Blogger.
В другом варианте, для показа используется та же тема, что и на декстопе, если она адаптирована к показу на мобильных устройствах.
Для настройка показа мобильной версии сайта в меню Blogger выбираем раздел "Тема" и под окном "На мобильных" нажимаем на звездочку.
В открывшемся окне отмечаем пункт "Да, использовать мобильную версию темы при просмотре блога на мобильных устройствах" - если хотите перейти на стандартную, дефолтную блоггеровскую тему . В открывшемся окне необходимо просмотреть и выбрать одну из понравившихся по дизайну тем и сохранить настройки.
Если после нажатия на звездочку, выбрать пункт: "Нет, использовать обычную версию темы при просмотре блога на мобильных устройствах", и сохранить настройки, то на мобильных будет показываться та же тема, что и на декстопных компьютерах.

Пример стилей CSS рекламы для мобильной версии сайта

В зависимости от выбранного варианта настройки показа мобильной версии блога, стили CSS оформляются по разному.
Если используется дефолтная мобильная тема блога, то стили CSS, которые должны исполняться в мобильной версии обертываются в тег <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
В следующем примере рекламный блок before, перед статьей, в мобильной версии сайта будет ограничен по высоте размером 100рх :

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
.adsense-before-article {clear:both;width:100%;text-align: center; max-height: 100px; margin: 20px auto;}
</b:if>

Если в мобильной версии настроен показ той же темы,что и на декстопе, то код CSS, который будет исполняться на мобильном заключают в тег @media .
Например, тот же код для блока before, будет выглядеть так:

@media screen and (max-width:480px){
.adsense-before-article {clear:both;width:100%;text-align: center; max-height: 100px; margin: 20px auto;} }

А в этом примере в мобильной версии не будет отображаться рекламный блок middle:

@media screen and (max-width:480px){
.adsense-middle-article {display: none; margin: 0;} }

Где, 480px - это максимальная ширина экрана мобильного или планшета, на котором не будет отображаться реклама. На экранах большего размера этот код CSS выполняться не будет, реклама будет видна.
Если рекламный блок middle не должен отображаться на декстопном компьютере, то код CSS для этого случая:

@media screen and (min-width:480px){
.adsense-middle-article {display: none; margin: 0;} }

В последнем примере, код CSS исполняется при показе на экранах шириной более 480px.
Коды стилей CSS для мобильной версии добавляем в код темы блога перед тегом ]]></b:skin>
Кроме того, следим за тем, чтобы коды CSS для мобильной версии были расположены на странице ниже соответствующих стилей декстопной версии.

Файл ads.txt

В меню Blogger перейдите в "Настройки", далее в "Настройки поиска", найдите "Персонализированный файл ads.txt", выберите "Изменить", "Использовать персонализированный файл ads.txt?", "Да".
В открывшееся окно добавьте: google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0
Вместо нулей необходимо вставить 16 цифр своего Идентификатора аккаунта AdSense.

Зачем нужен файл ads.txt

В справке AdSense на этот вопрос отвечают так:
При наличии файла ads.txt Google по его содержанию определяет, каким аккаунтам продавцов разрешен показ объявлений в этом корневом домене.
Когда запрашивается объявление для конкретного сайта, мы проверяем, содержит ли корневой домен этого сайта файл ads.txt. Если нет, никаких действий с нашей стороны не последует. Если файл ads.txt присутствует и ваш идентификатор издателя указан правильно, мы проведем аукцион и покажем выигравшее объявление. Если идентификатор издателя неверен, аукцион для этого запроса проводиться не будет.
Наша система автоматически проверяет наличие новых и обновленных файлов ads.txt. Обратите внимание, что при обновлении или удалении файла ads.txt может пройти до 24 часов, прежде чем наша система зарегистрирует изменения.
После размещения файла ads.txt в вашем домене поисковый робот Google будет выполнять следующие действия:

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

Файл ads.txt, расположенный по адресу www.domain.com/ads.txt, будет обрабатываться только в том случае, если на него выполняется перенаправление с адреса domain.com/ads.txt.
Проверьте, чтобы файл ads.txt был доступен по URL как с HTTP, так и с HTTPS.
Убедитесь, что при запросе файла возвращается код ответа HTTP 200 ОК .

Пример размещения рекламы на сайте Blogger

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

Guidelines for Before Ad sense Applying

Guidelines for Before Ad sense Applying

Welcome to websduniya ; Today we are back with another most important article for newbie bloggers. Somehow many of new blogger users makes huge mistakes on applying ad-sense.

So here we discuss about mistakes and giving few most common informative tips about adsense applying. 

Guidelines for Before Ad sense Applying

Our all articles are genuine try to help others honestly. 

So Let's read mistakes about ad-sense on taken by bloggers users.

Mistakes of Ad-sense Apply:

we find  many bloggers doing huge mistakes during adsense apply, following are the mistakes.

★Mistake- 1. Not choose proper templates which theme haven't responsive navigation also applying free blogger template which are include credit link, 😕 yes Template credit link affect on your blog on adsense approval. 

★Mistake- 2. is another important part of adsense ; using blogger as just as timepass, blogging is passion and sharing experiences platform. blogging use for first time as a like you are a best professional writer not for earning.

★ Mistake- 3. Another mistakes are huge and major mistakes by bloggers is - many people create a blog then buy a domain for quick adsense approval. that's they are wrong. as a blogger blogging experiences we are say's first working on defaults domain {blogspot.com domain}.

3-4 months and post regularly. make your blog popular and famous then apply adsense.

Important note* 

Advantages of apply ad-sense blogspot domain site : when you working blogspot domain and get adsense then you set top level domain .What will happen in it that there will be no shortage of visitors to your blog, yor site can get easily approved adsense. If you apply first on toplevel domain then next time accidentally you decided change domain or no need to renew your blog or used blogspot domain then again going to verify your blog google adsense. sometimes not getting there adsense same blog. 

 So we are suggested or tips : First try adsense on blogspot domain.

★Mistake- 4. Many blogger create a blog copied content from another blogs; use many tools for copy post , translator that's very wrong idea. we suggest write your blog article must be unique ,genuine simple languages.

★Mistake- 5. Using multiple language in blog content. never used multiple language first choose a language ; write your all content that same language.

Mistake- 6. Not adding important pages. we are say's when you create a blog then first create following pages on your blog and adding on main navigation. 

About us, Contact Us, Privacy Policy. etc.

Mistake- 7. Not following ad-sense policy. Google have a lot of restrictions on the kind of content likes- pirated site, shock , hacking cracking software, malware , adult, apk contents.

Mistakes- 8. Blogger SEO Optimization, This the most important part of before applying ad-sense.  following are the mistakes likes- 

Not verify blog on google, not set proper meta tags, image optimization, font customization. etc. other seo basic knowledge.

Mistakes- 9. This is the final and last mistake some users used third party ads and applying ads this most major mistake, when you applying adsense then remove other ads from your blog.

 That's It. Enjoy Blogging. Keep in Touch With us On subscribing and commenting our blog.

Conclusion: 

Last Word : Never used top level domain during starting blogger ,because if you luckily got adsense then can't get sufficient earning because your blog not popular so visitors not comes on your blog. It may be that you do not get what you spent for that domain, Further renew that domain. if you left domain then never get back adsense on that blog. because again verify your blog. so here we share our guidelines and experiences. Hope You are like our article; our mission is all blogger can get success his/her blogging.

Share this post with your friends.  please share your mention below.

How to Download YouTube Video

How to Download YouTube Video Without Any Software

Welcome to websduniya fans today we are coming with new amazing article ; in this article we are showing how to you tube video, and mp3 without any software or app in computer & mobile devices. 😃

How to Download YouTube Video 

Many user using many software and apps to download you-tube content, but your known that's app and software reduce you device storage & sometimes may faced with unwanted ads, malware program. 

 So here we share a simple tweak for download you tube video without any hassle, safely.

Lets Follow Our Below Step 👇

Download Youtube Videos & Mp3 👀

💦Open a video on YouTube which you wish to download.

💦After the ‘YouTube’ before the '.com'  Add ‘pp’

Exam: 

BEFORE : https://www.youtube.com/watch?v=-g6k8OKvwRo
AFTER :   https://www.youtubepp.com/watch?v=-g6k8OKvwRo

Click enter you will seen an another page looks like below

Download YouTube Video 

💦Now select the quality of the video.

💦Download the videos by clicking the right green download button.

💦Wait for few moment { depends on your network speed}

That's It. Enjoy.

Advantage of This Tricks:

No Hassle, Easy To Used.

Without Error

Virus Free 

Get Many Formats Of Youtube Video

Get Many Quality Of Videos

Easily Can Convert Your Video To Make Mp3 With Quality.

Conclusion:✔

This  tweak and tips are so simple that whether you are a computer or mobile devices. If you have any question then comments below. hopefully this article may be helpful for you then share this article with your friends.

Липкий плавающий сайдбар для виджетов Blogger

Когда необходим плавающий виджет в сайдбаре

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

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

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

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

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

Как сделать липкий плавающий сайдбар в Blogger

Колонку сайдбара в теме Blogger выгодно разделить по высоте на две части. В верхней части оставить обычный, стандартный формат сайдбара, id="sidebar". А ниже разместить липкий плавающий сайдбар, id="sidebar-2" . В таком сайдбаре удобно разместить любые виджеты, которые прилипнут к экрану вместе с сайдбаром.

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

Наиболее востребованным сценарием поведения плавающего сайдбара является следующий: по мере прокрутки страницы сайта, когда верхняя граница сайдбара поравняется с верхней границей окна браузера, сайдбар прилипает к экрану и остается неподвижным; сайдбар отлипает - когда его нижняя граница поравняется с нижней границей секции id="main" темы сайта. Эта граница проходит на главной колонке сайта ниже комментариев. При таком варианте плавающий сайдбар не перекрывает виджеты в футере сайта.

Описанный выше сценарий работы плавающего сайдбара реализован на этом сайте.

Создаем секцию sidebar-2 в коде темы

Секцию сидебар-2 в коде темы создаем стандартным способом, который многократно описан в различных источниках. В HTML коде темы находим: <b:section class='sidebar' , ниже ищем закрывающий тег:
 </b:section>
и после него добавляем:

<!-- Start sidebar-2  -->
<b:section class='sidebar' id='sidebar-2' maxwidgets='3' name='Sidebar-2 (fixed)' showaddelement='yes'>
</b:section>
<!-- End sidebar-2 -->

Цифра 3 в коде определяет максимальное число виджетов, которое можно добавить в sidebar-2. В меню Blogger открываем "Дизайн" и смотрим - рядом с секцией sidebar, должна появиться еще одна секция с названием Sidebar-2 .

Скрипт липкого плавающего сайдбара

В конец кода темы, перед тегом </body> добавляем скрипт:

<!-- Плавающий #sidebar-2 отцепляется, когда его нижний край поравняется с нижним краем #main. Скрипт отключен на мобильном -->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script>
//<![CDATA[
(function(){
var a = document.querySelector('#sidebar-2'), b = null, P = 10;
window.addEventListener('scroll', Ascroll, false);
function Ascroll() {
  if (b == null) {
    var Sa = getComputedStyle(a, ''), s = '';
    for (var i = 0; i < Sa.length; i++) {
      if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
        s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
      }
    }
    b = document.createElement('div');
    b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
    a.insertBefore(b, a.firstChild);
    var l = a.childNodes.length;
    for (var i = 1; i < l; i++) {
      b.appendChild(a.childNodes[1]);
    }    
  }
  var Ra = a.getBoundingClientRect(),
      R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#main').getBoundingClientRect().bottom);  // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
  if ((Ra.top - P) <= 0) {
    if ((Ra.top - P) <= R) {
      b.className = 'stop';
      b.style.top = - R +'px';
    } else {
      b.className = 'sticky';
      b.style.top = P + 'px';
    }
  } else {
    b.className = '';
    b.style.top = '';
  }  
}
})()
//]]>
</script>
</b:if>

В коде скрипта жирным шрифтом выделены: #sidebar-2  - это id липкого блока на сайте; #main - это id блока, с которым, поравнявшись нижними границами, липкий блок будет отлипать; цифра 10 - это число пикселей от верхней границы окна браузера до липкого блока.

Первая строка кода, которая начинается с условного тега <b:if , запрещает работу скрипта при показе страницы на смартфонах.

Стили CSS плавающего сайдбара

Перед тегом ]]></b:skin> в код темы блога добавляем:

/*--- Плавающий sidebar-2, плавает только на декстопе---*/ 
@media screen and (min-width: 992px) { 
.sticky {position: fixed;z-index: 101;} 
.stop {position: relative;z-index: 101;} 
} 
#sidebar-2 {display: block;margin: 0 auto;} /*--- В sidebar-2 oтступы margin-top у верхнего и bottom у нижнего виджетов =0 ---*/

На планшете и смартфоне, при размерах экрана, при которых боковой колонки нет, плавающий сайдбар ведет себя как обычный. Ширину экрана, 992px, при которой сайт становится двухколоночным, необходимо изменить применительно к вашей теме Blogger. У каждой темы это может быть своя цифра.

В Sidebar-2 размещаем любой виджет и проверяем работу плавающего сайдбара на странице сайта. Необходимо проследить, чтобы в стилях CSS виджета, отступы margin-top i margin-bottom были равны нулю, т. е. не выходили за границы sidebar-2. Иначе, в моменты залипания и отлипания, сайдбар будет подпрыгивать.