0

Плаващи бутони за навигацията в 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; можете да промените на друг цвят. Използвайте тази таблица.

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


    Няма коментари :

    Публикуване на коментар


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved |
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита