Как да подменим връзката "прочети повече" с бутон

В мрежата много е писано за това как да направите разрез в текста на публикация. Така една част от нея е на първа страница, а целия текст читателят може да види на друга. Сега в Blogger има много удобна функция в редактора на публикацията, която отговаря за това. По този начин можем да разрежем текста на което място искаме, като кликнем върху иконата. Това действие се нарича "cut" (кат) . А да се промени името на връзката ( препратката ) "прочети повече" на друго, има възможност в раздела "Оформление" ➔ "Публикация". И както е показано на скриншота по-долу, въведете желания текст. При мен е " Read More ".

За да не се прави това всеки път ръчно, може да се промени малка част в кода на шаблона. Но по този въпрос, малко по-късно. А сега нека се опитаме да заменим връзката "прочетете повече", "още" или "по-нататък", у всеки от нас наименованието е различно, с бутон, който ще направим сами. Първото нещо е да изберем картинка или изображение. Всъщност можем да направим свое собствено с всеки редактор. Аз направих моето с този редактор, който е на английски език. Вижте на скриншота.

Въвеждаме желания от нас текст, избираме размера на бутона, шрифта, неговия размер, цвета. И от опцията Download записваме сътвореното изображение на компютъра си, а от там го качваме в блога си както всяко друго изображение. Кликаме върху него с десния бутон на мишката, избираме опцията " копиране адреса на изображението" и го запазваме някъде, в текстови файл, например. Този адрес ще ни трябва малко по-късно и изглежда така:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELCRBE3SDjNK99_pI65a3wZoPLYBh2I66HTFPe5LAeaXh2VNMX64opJu_feH9jjIHfuF20ar0GJ2pNPqSSVq07GvZ99vnimkyGy-CDCYHA62ioFZB-Hsad4x7UNwalMWiPhGkmlCd33M/w140-h51-p/button_poveche+%25282%2529.png

След това отиваме в шаблона, (не забравяйте да направите резервно копие) и намираме с помощта на клавишите Ctrl + F ето тази част от кода:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> <data:post.jumpText/> </A>

</div>

</b:if>

И участъка в него, който е отбелязан с червено, заменяме с тази препратка към нашето изображение.

<img border="0" src="адрес на изображението" />

В резултат на това кодът изглежда по този начин:

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELCRBE3SDjNK99_pI65a3wZoPLYBh2I66HTFPe5LAeaXh2VNMX64opJu_feH9jjIHfuF20ar0GJ2pNPqSSVq07GvZ99vnimkyGy-CDCYHA62ioFZB-Hsad4x7UNwalMWiPhGkmlCd33M/w140-h51-p/button_poveche+%25282%2529.png" /></A>

</div>

</b:if>

Ако при преглеждане на главната страница на блога новият бутон не се вижда, натиснете от клавиатурата клавиш F5. Вече трябва да се появи.

Как изглежда? Ето как.

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

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