demo of this widget can be seen just below.
To add this badge to your sidebar/posts or anywhere where HTML is supported just add the below code.
<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circle">
<<h1><a href="http://www.cambo-template.com">Your Blog</a></h1>
</div>
After Adding the Code change the text/URL which is in Bold and add your desired text/URL.
You are done now. Now you and your blog visitors can see this Cool Badge with CSS Effect in your blogger blog.
