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

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

<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/AVvXsEi_t4cnEyB9vxou07CiDpyYjV93c7jMkpL5J3VW0dI_quW0DZ6oQoVjSIbNSrgDr7Bbr9HCIMVPqZg44pSImBv498NNDKmceyVWY5TX4RMhrxybzp-plSgLu9huI9gVmbsb_FQ1H7jlPcE/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/AVvXsEgLInV9ACt_vxq_XqZfOMyyVJ5SPrYD3QD1bQRryAFogZG25MGnegDEhkxlLc3ZeVjS5SGN-Bx7u5_N1SDtpWYeuiPccv4BgwvKGZ1vxFetJX6nIOer4J7zgVMSGJlyh48wjQvgqZXNTtc/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/AVvXsEh1VCkfTTmIKl9VM5gasssaiT4eyf6dhmlb5wpzHwJyCaloRfUtLchWGxOyuAbeUsk1sL59hgSaaXWJK-1gojntGXAIn-i_Ftm148IOrumkauFJcr7bOjJbt8iKUcTo2GDFS2SyCbWO15A/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 ) и с него заменете маркирания участък. Използвайте опцията "визуализация", за да проверите какво сте направили. То трябва да изглажда така. Запаметете промяната в темата (шаблона) си.

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

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

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