Create A Css Badge To Promote your Website Or Blog

Create A Css Badge To Promote your Website Or Blog  Just Add Below Code As Shown Below....

Go to Blogger > Layout
Click "Add a Gadget"
Then Click On Add Html/Java Script

Then Add Below Code

<!-- Widget By technofusion.info --><style> .TechnoFusionCSSBadge{background:#fff;border-radius:10%;cursor:pointer;position:relative;width:15em;height:5em;overflow:hidden;transform:translateZ(0);margin:0 auto} .TechnoFusionCSSBadge h1{color:rgba(8,172,233,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:3em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out} .TechnoFusionCSSBadge h1 a{color:rgba(8,172,233,0);text-decoration:none} .TechnoFusionCSSBadge:before,.TechnoFusionCSSBadge:after{border-radius:10%;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} .TechnoFusionCSSBadge:after{transform:rotate(45deg)} .TechnoFusionCSSBadge:hover:before,.TechnoFusionCSSBadge: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)} .TechnoFusionCSSBadge:hover > h1 a,.TechnoFusionCSSBadge:hover > h1{color:rgba(8,172,233,1)}/* Widget by www.technofusion.info */ </style> <div class="TechnoFusionCSSBadge"> <h1><a href="http://www.technofusion.info/">Techno Fusion</a></h1> </div>

Change http://technofusion.info   With Your Blog Page

Change TechnoFusion   With Your Badge Name

Now Save Your HTML/JAVASCRIPT

You All Are Done..

Please write comments about this tutorial or tell me any faults which you found while creating and publishing. I will always there to help you....