Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save manbearwolf/50683dfb428466d706c3797182c63f79 to your computer and use it in GitHub Desktop.
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
Copy link
Author

manbearwolf commented Dec 6, 2016

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