Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save manbearwolf/50683dfb428466d706c3797182c63f79 to your computer and use it in GitHub Desktop.

Select an option

Save manbearwolf/50683dfb428466d706c3797182c63f79 to your computer and use it in GitHub Desktop.
Circlepop RI – 3.5 "]]></b:skin>" Above Blogger (Part B) https://eutectics.blogspot.com/2015/01/add-next-previous-post-navigation-in-blogger.html
.svg-wrap{position:absolute;width:0;height:0;overflow:hidden;overflow-x:hidden;overflow-y:hidden}.nav-circlepop a{position:fixed;top:50%;display:block;outline:0;text-align:left;z-index:1000;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.nav-circlepop a.prev{left:0}.nav-circlepop a.next{right:0}.nav-circlepop a svg{display:block;margin:0 auto;padding:0}.nav-circlepop a{margin:0 30px;width:50px;height:50px}.nav-circlepop a::before{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:gray;content:'';opacity:0;-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s;-webkit-transform:scale(0.9);transform:scale(0.9)}.nav-circlepop .icon-wrap{position:relative;display:block;margin:10% 0 0 10%;width:80%;height:80%}.nav-circlepop a.next .icon-wrap{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.nav-circlepop .icon-wrap::after,.nav-circlepop .icon-wrap::before{position:absolute;left:25%;width:3px;height:50%;background:black;content:'';-webkit-transition:-webkit-transform .3s,background-color .3s;transition:transform .3s,background-color .3s;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nav-circlepop .icon-wrap::before{-webkit-transform:translateX(-50%) rotate(30deg);transform:translateX(-50%) rotate(30deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.nav-circlepop .icon-wrap::after{top:50%;-webkit-transform:translateX(-50%) rotate(-30deg);transform:translateX(-50%) rotate(-30deg);-webkit-transform-origin:0 0;transform-origin:0 0}.nav-circlepop a:hover::before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.nav-circlepop a:hover .icon-wrap::after,.nav-circlepop a:hover .icon-wrap::before{background:#fff}.nav-circlepop a:hover .icon-wrap::before{-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg)}.nav-circlepop a:hover .icon-wrap::after{-webkit-transform:translateX(-50%) rotate(-45deg);transform:translateX(-50%) rotate(-45deg)}
@manbearwolf

manbearwolf commented Dec 3, 2016

Copy link
Copy Markdown
Author

@manbearwolf

manbearwolf commented Dec 6, 2016

Copy link
Copy Markdown
Author

You can change red to black by searching for red in this code... and changing it to black, instead, at least in original coding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment