Сегодня, по прошествии долгого времени, я публикую замечательное руководство для блогеров, этот замечательный виджет поможет вам создать профессиональный блог за считанные минуты. Наличие виджета пагинации в Blogger обязательно с точки зрения функциональности и удобства пользователя. Это поможет вам организовать ваши сообщения в блоге самым профессиональным образом. Этот виджет, основанный на простых скриптах, работает быстро и надежно. Установить этот виджет очень просто и несложно.
Пойдем дальше и посмотрим, как добавить виджет нумерации страниц в Blogger — 2021.
Почему виджет разбивки на страницы важен?
Если вы придерживаетесь формата по умолчанию для блоггера, то есть кнопка перехода по страницам Предыдущая и Следующая, это ограничивает функциональность вашего блога, в то же время это сильно ухудшает навигацию вашего блога, поскольку пользователи не могут легко перемещаться по вашему блогу, и им приходится просматривать каждую страницу, где, как если бы вы использовали этот виджет разбиения на страницы, они могут проверить любую страницу, которую они хотят, просмотр различных сообщений станет легким, не только это функционально, но и придаст вашему блогу профессиональный вид.
Что особенного в нашем виджете?
Хорошо, все говорят, что они сделали лучший виджет, и это нормально, но я утверждаю, что у вас будет виджет, которого нет ни у кого. Да, это правда. Наш виджет профессионально оптимизирован, чтобы показывать каждое сообщение без пропусков, и он загружается с помощью Ajax, что ускоряет его загрузку !! Yepieee (очень быстрая загрузка). Также скрипт, который мы используем, удобен для мобильных устройств.
Начнем с шага 1 ( добавление CSS )
Перед редактированием мы рекомендуем вам сделать резервную копию вашего шаблона, чтобы что-то пошло не так, у вас по-прежнему был дизайн вашего блога в безопасности.
Первое, что вам нужно сделать, это войти в свою учетную запись Blogger и перейти в >> Темы >> Редактировать HTML и выполнить поиск по тегу ]]></ b:skin> и сразу над ним вставить следующий код.
/* ######## Pagination Widget by SoraBloggingTips ######################### */ #blog-pager{ clear:both; text-align:center; margin:0 } #blog-pager-newer-link a,#blog-pager-older-link a{ display:block; float:left; margin-right:6px; padding:0 13px; border:1px solid #010101; text-transform:uppercase; line-height:32px; font-weight:700; color:#010101 } #blog-pager-newer-link a:hover,#blog-pager-older-link a:hover{ background-color:#010101; color:#fff!important } .showpageNum a,.showpage a,.showpagePoint{ display:block; float:left; margin-right:6px; padding:0 12px; border:1px solid #010101; text-transform:uppercase; line-height:32px; font-weight:700; color:#010101 } .showpageNum a:hover,.showpage a:hover{ background-color:#010101; color:#fff!important } .showpageNum a i,.showpage a i{ transition:all .0s ease; -webkit-transition:all .0s ease; -moz-transition:all .0s ease; -o-transition:all .0s ease } .showpagePoint{ background-color:#010101; color:#FFF } .showpageOf{ display:none!important }
Шаг 2 ( добавление скрипта ) — самый важный !!
Это самая важная часть урока, и вы должны делать ее очень осторожно. В шаблоне найдите тег </body> и прямо над ним вставьте следующую код HTML.
<b:if cond=’data:blog.pageType != "item"’> <b:if cond=’data:blog.pageType != "static_page"’> <script type=’text/javascript’> var postperpage=7; var numshowpage=3; var upPageWord ='<< Prev’; var downPageWord =’Next >>’; var urlactivepage=location.href; var home_page=»/»; </script> <script type=’text/javascript’> //<![CDATA[ var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html=»;nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+=»<span class=’showpageOf’>Page «+nomerhal+’ of ‘+maksimal+»</span>»;var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis==»page»){html+='<span class=»showpage»><a href=»‘+home_page+'»>’+upPageWord+'</a></span>’}else{html+='<span class=»showpageNum»><a href=»/search/label/’+lblname1+’?&max-results=’+postperpage+'»>’+upPageWord+'</a></span>’}}else{if(jenis==»page»){html+='<span class=»showpageNum»><a href=»#» onclick=»redirectpage(‘+prevnomer+’);return false»>’+upPageWord+'</a></span>’}else{html+='<span class=»showpageNum»><a href=»#» onclick=»redirectlabel(‘+prevnomer+’);return false»>’+upPageWord+'</a></span>’}}}if(mulai>1){if(jenis==»page»){html+='<span class=»showpageNum»><a href=»‘+home_page+'»>1</a></span>’}else{html+='<span class=»showpageNum»><a href=»/search/label/’+lblname1+’?&max-results=’+postperpage+'»>1</a></span>’}}if(mulai>2){html+=’ ‘}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class=»showpagePoint»>’+jj+'</span>’}else if(jj==1){if(jenis==»page»){html+='<span class=»showpageNum»><a href=»‘+home_page+'»>1</a></span>’}else{html+='<span class=»showpageNum»><a href=»/search/label/’+lblname1+’?&max-results=’+postperpage+'»>1</a></span>’}}else{if(jenis==»page»){html+='<span class=»showpageNum»><a href=»#» onclick=»redirectpage(‘+jj+’);return false»>’+jj+'</a></span>’}else{html+='<span class=»showpageNum»><a href=»#» onclick=»redirectlabel(‘+jj+’);return false»>’+jj+'</a></span>’}}}if(akhir<maksimal-1){html+=»}if(akhir<maksimal){if(jenis==»page»){html+='<span class=»showpageNum»><a href=»#» onclick=»redirectpage(‘+maksimal+’);return false»>’+maksimal+'</a></span>’}else{html+='<span class=»showpageNum»><a href=»#» onclick=»redirectlabel(‘+maksimal+’);return false»>’+maksimal+'</a></span>’}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis==»page»){html+='<span class=»showpageNum»><a href=»#» onclick=»redirectpage(‘+nextnomer+’);return false»>’+downPageWord+'</a></span>’}else{html+='<span class=»showpageNum»><a href=»#» onclick=»redirectlabel(‘+nextnomer+’);return false»>’+downPageWord+'</a></span>’}}var pageArea=document.getElementsByName(«pageArea»);var blogPager=document.getElementById(«blog-pager»);for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=»}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf(«/search/label/»)!=-1){if(thisUrl.indexOf(«?updated-max»)!=-1){lblname1=thisUrl.substring(thisUrl.indexOf(«/search/label/»)+14,thisUrl.indexOf(«?updated-max»))}else{lblname1=thisUrl.substring(thisUrl.indexOf(«/search/label/»)+14,thisUrl.indexOf(«?&max»))}}if(thisUrl.indexOf(«?q=»)==-1&&thisUrl.indexOf(«.html»)==-1){if(thisUrl.indexOf(«/search/label/»)==-1){jenis=»page»;if(urlactivepage.indexOf(«#PageNo=»)!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf(«#PageNo=»)+8,urlactivepage.length)}else{nomerhal=1}document.write(«<script src=\»»+home_page+»feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\»><\/script>»)}else{jenis=»label»;if(thisUrl.indexOf(«&max-results=»)==-1){postperpage=20}if(urlactivepage.indexOf(«#PageNo=»)!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf(«#PageNo=»)+8,urlactivepage.length)}else{nomerhal=1}document.write(‘<script src=»‘+home_page+’feeds/posts/summary/-/’+lblname1+’?alt=json-in-script&callback=hitungtotaldata&max-results=1″ ><\/script>’)}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName(‘head’)[0];var newInclude=document.createElement(‘script’);newInclude.type=’text/javascript’;newInclude.setAttribute(«src»,home_page+»feeds/posts/summary?start-index=»+jsonstart+»&max-results=1&alt=json-in-script&callback=finddatepost»);nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName(‘head’)[0];var newInclude=document.createElement(‘script’);newInclude.type=’text/javascript’;newInclude.setAttribute(«src»,home_page+»feeds/posts/summary/-/»+lblname1+»?start-index=»+jsonstart+»&max-results=1&alt=json-in-script&callback=finddatepost»);nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis==»page»){var alamat=»/search?updated-max=»+timestamp+»&max-results=»+postperpage+»#PageNo=»+nopage}else{var alamat=»/search/label/»+lblname1+»?updated-max=»+timestamp+»&max-results=»+postperpage+»#PageNo=»+nopage}location.href=alamat} //]]> </script> </b:if> </b:if>
Примечание . — Если вы хотите отображать больше сообщений, измените значение, выделенное красным в приведенном выше коде. Если вы хотите увеличить числа в виджете, замените синее значение.
Если вы используете этот виджет и некоторые из ваших сообщений пропускаются, помните одну вещь: вы должны поддерживать одинаковое количество сообщений в настройках вашего блога и виджете разбивки на страницы. Существует ограничение в 1 МБ со стороны блоггера, только 1 МБ изображений или текста, которые вы можете показать на домашней странице, и если вы превышаете этот предел, и это причина того, что остальная часть сообщения размещается на следующей странице, нет никакого решения, но вы можете попробовать разрыв страницы после 1-го абзаца в каждом посте, может быть, это поможет.
Заключение
Поздравляю !! Вы сделали это. теперь вы узнали, что « Как добавить виджет нумерации страниц в Blogger — 2021» . Посетите свой блог и проверьте этот замечательный виджет вживую. Надеюсь, вам понравился этот урок. Если вам понравилось, поделитесь им с друзьями, мы прилагаем все усилия, чтобы разработать больше таких замечательных виджетов, пожалуйста, следите за нами.
