Да заменим номерата на страниците с изображения

Скъпи приятели, читатели и гости. Да е добър днешния ден за всички. В моя предишна публикация ви разказах как да номерирате страниците в блога. Всъщност така ние заменихме надписите „ предишна страница, главна страница, следваща страница“ с притурка, даваща на всяка страница от публикациите ни съответен пореден номер.
Днес ви представям един друг вариант. Ще заменим номерата на страниците с изображения, чрез които можем да отидем на следваща страница, да се върнем на предишна или на главната страница. Този вид преход е по-
атрактивен и „оживява“ посвоему блога. Съветвам ви да търсите унисон с вашия дизайн. Онези от вас, които смятат, че този начин за преминаване от страница към страница подхожда на дизайна на блога, нека го използват. Първата задача е да сложите изображенията в редактора на публикации, както всяко друго изображение, без да ги публикувате. Изображенията са три икони и всяка си има име.

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> <img src='https://lh3.googleusercontent.com/-cDIok6GGTVM/WJl9HOFDEGI/AAAAAAAAC_Y/j9jxlUBUZo46I0G1C8ITSfXjMZABn7nrgCLcB/h120/back-icon.png'/></a>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'> <img src='https://lh3.googleusercontent.com/-edbf2D7MNFU/WJl9ItR0pPI/AAAAAAAAC_c/53-Tib-Z3AQO9ViM4H2giS_z3E1aMHGgwCLcB/h120/forward-icon.png'/></a>

</span>

</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'> <img src='https://lh3.googleusercontent.com/-zITrkF_nB1I/WJl9KOQ7qjI/AAAAAAAAC_g/CFYPhG-f4OUwOXhIMSECswlSSrEnN3q8QCLcB/h120/home-icon.png'/></a>

<b:if cond='data:mobileLinkUrl'>

<div class='blog-mobile-link'>

<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>

</div>

</b:if>

</div>

<div class='clear'/>

</b:includable>

След това заменете адресите на моите изображения в кода по-горе, маркирани са в червено, с вашите. Смятам, че ще се ориентирате за местата им в кода по наименованията им. Вашият код вече е готов. И сега е ред на по-отговорната част от задачата. Да замените един участък от HTML кода на шаблона с кода, който вече сте приготвили. Админ панел ➔ шаблон ➔ резервно копие на шаблона ➔ редактиране на HTML кода, ( Ctrl + F ) и в прозореца за търсене вписвате фрагмента

 <b:includable id='nextprev'> 

Натиснете Enter. Ако пред този фрагмент има черна стрелка, щракнете върху нея, за да се отвори целия код. Внимателно маркирайте всичко от

<b:includable id='nextprev'>  надолу до  </b:includable> включително. 

Не го изтривайте, копирайте кода, който вече сте приготвили в уърдовския файл с ( Ctrl + C ) и с него заменете маркирания участък. Използвайте опцията "визуализация", за да проверите какво сте направили. То трябва да изглажда така. Запаметете промяната в темата (шаблона) си.

Надявам се да сте заменили успешно номерата на страниците с изображения. 

Успех! Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: