Плаващи бутони за навигацията в Blogger

Здравейте, приятели. Мисля, сте съгласни с мен, че навигацията в дизайна на стандартните шаблони на Blogger не са привлекателни. Едва забележимо панелче в края на страницата.
И не всеки ще му обърне внимание. Следователно, всеки нов посетител може да не вижда връзката към предишните или следващите публикации в блога.

Въведение

Има много навигационни стилове. Вече написах за навигацията в блога и как да се промени тя в няколко публикации. Можете да добавите и горна навигационна лента.
Предлагам да направим днес оранжеви бутони за навигация, които се плъзгат, докато страницата се превърта и винаги ще бъдат видими за посетителите.
По този начин, използвайки ги, лесно можете да намалите степента на отпадане, защото хората ще имат по-проста опция за разглеждане на повече публикации.

Инсталиране

За да приложите тази опция, отворете раздела Teмa. Стъпките са две.

Първа стъпка:

С помощта на клавишите CTRL+ F намираме този ред

<b:includable id='nextprev'>

Маркирайте всичко от <b:includable id='nextprev'> до </b:includable> и го заменете с кода, посочен по-долу:

<b:includable id='nextprev'><div class='blog-pager' id='blog-pager'><div class='arrowNav'><b:if cond='data:newerPageUrl'><span id='blog-pager-newer-link'><div class='arrowLeft'><a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' id='nextLink'><span class='arrow'/><span class='prevnext'><img src="http://i.imgur.com/4sieEVz.png"/></span></a></div></span></b:if><b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><div class='arrowRight'><a class='next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle' id='prevLink'><span class='arrow'/><span class='prevnext'><img src="http://i.imgur.com/1uAQUbN.png"/></span><br/></a></div></span></b:if></div><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></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>

Втора стъпка:

По същия начин намерете в кода на темата реда ]]></ b: skin> и веднага над него, впишете кода:

.arrowLeft a{-moz-transition:.2s ease-in;-o-transition:.2s ease-in;-webkit-transition:.2s ease-in;left:-5px;padding:25px 20px;position:fixed;top:45%;transition:.2s ease-in;z-index:100}.arrowLeft a:hover{-moz-transition:.2s ease-in;-o-transition:.2s ease-in;-webkit-transition:.2s ease-in;color:#fff;left:0;transition:.2s ease-in}.arrowRight a{-moz-transition:.2s ease-in;-o-transition:.2s ease-in;-webkit-transition:.2s ease-in;padding:25px 20px;position:fixed;right:-5px;top:45%;transition:.2s ease-in;z-index:100}.arrowRight a:hover{-moz-transition:.2s ease-in;-o-transition:.2s ease-in;-webkit-transition:.2s ease-in;color:#fff;right:0;transition:.2s ease-in}.arrowNav a{background:#FF6600;color:#fff;font-size:25px;text-decoration:none}

Сега кликнете върху "Запазване на шаблона" и актуализирайте блога си, за да видите плаващите бутони в лявата и дясната страна на главната си страница. Те ще изглеждат така: