Плаващи бутони за навигацията в 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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}

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

Настройки

Маркираният фон: background:#FF6600; можете да промените на друг цвят. Използвайте тази таблица.

Това е. Благодаря на всички. Ще се видим скоро.

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

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