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

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

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGR8zG0TRfNy3DY9C9G70n375E_rav0i9FiIEo2_wUy1oAaKvHr_cvB6fCcN8HwEgsolzIeCBburj73Ybb3k8pREcrBAbbkQtvffEV-k72CorgXDgiqQQ3vILwcuSWvnvJdb0-dctD3w/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KG-o_c55wsfjaHG0Z7F-a9yUm8Ep8Oi89UGAM4Dj2JnRsMi7z-cqzVtbItQ7mGHwHdG-sWXINB3ZRjfJkb2CjDDxpEYTcPlpIRQZ_FZXFnCA-QxqRqOiTNPodBV0LMOE2I64manKVTk/h120/forward-icon.png'/></a>

</span>

</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtTur8ue4yzB3T8iU12xB5rGK0I5AqTiShUKJTRUP8s7Mlm8csJk95OJDXScKmsO86jziO8ibCPr_I28QJcDAFySTBLP3bpNlM1EruatFPQm6iUw-bSadAcbUzBXCLsUHB5m4Zfvzpn-Q/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 ) и с него заменете маркирания участък. Използвайте опцията "визуализация", за да проверите какво сте направили. То трябва да изглажда така. Запаметете промяната в темата (шаблона) си.

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

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

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