Home
Blogger

CSS Transition Effect Badge with Pure CSS for Blogger

CSS Transition Effect Badge with Pure CSS for Blogger
Badge

This is often require to create some badge for our blog to display at the blog sidebar. Most of the blogger use a small image as badge which is not so attractive. So I have designed a beautiful animated CSS badge with transition effect. This is basically a simple CSS trick which will add some extra spice into your blog. When any visitors will mouse over on the badge then it will open just like shutter and with multicolor and your blog name will be visible. In addition your blog name will be clickable that means when anyone click on the badge it will redirect to your blog or you can add some other link if you want to redirect something. Hope this small widget will help your to make your blog more attractive.

Live Demo
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.


<style>
.BloggerSpiceCSSBadge{background:#fff;border-radius:10%;cursor:pointer;position:relative;width:15em;height:5em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.BloggerSpiceCSSBadge 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}
.BloggerSpiceCSSBadge h1 a{color:rgba(8,172,233,0);text-decoration:none}
.BloggerSpiceCSSBadge:before,.BloggerSpiceCSSBadge: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}
.BloggerSpiceCSSBadge:after{transform:rotate(45deg)}
.BloggerSpiceCSSBadge:hover:before,.BloggerSpiceCSSBadge: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)}
.BloggerSpiceCSSBadge:hover > h1 a,.BloggerSpiceCSSBadge:hover > h1{color:rgba(8,172,233,1)}/* Widget by www.bloggerspice.com */
</style>
<div class="BloggerSpiceCSSBadge">
 <h1><a href="http://www.bloggerspice.com">BloggerSpice</a></h1>
</div>

Customization

  • Replace bloggerspice.com with your blog address.
  • Change BloggerSpice with your blog name

14 comments

  1. Nice one.
    • bro your continuous comments motivate me to work for new.Many many Thanks
  2. your posts are always useful rabbi.
    thanks for this.
    • when my readers are happy then I feel happy. Thanks for commenting.
  3. Hello bro i want to buy custom domain from blogger .....but when i click on add custom domain ..in blogger settings they are not showing any options to buy ....so what should i do...just they are showing advance settings ....please reply fast
    • Nauman if you want to buy custom domain then don't buy through Google because it use GoDaddy and I have seen many problem those who bought Domain from GoDaddy.
    • bro then please help me and say from where to buy and which is best to buy from.....please reply fast....and why blogger is not good to buy from it..thanks
    • Bro there are 2 type of Domain Shared and Dedicated. Try to find Dedicated service provider and USA based server. I have bought from local service provider and they are providing dedicated server. And remember when you buy domain then use your own email not with any re-seller email address.
    • this is the first time i'm buying domain name so i don't know about domain shared and dedicated....and one more thing if i purchased own domain name it effect the popularity and alexa ranking...???
    • Yeh You will lose your all current Google and Alexa rank because your site name will change.
    • please say me which domain provider is good .....i have asked to Muhammad from mybloggertricks and he said go with godaddy.....
    • Many blogger got problem. But positive site is you don't have to install custom domain if you buy from GoDaddy. if you wish you can buy from them.
    • hi i read about your comment about buying domain..is it really going to lose all your current ranking? cause before i thought google blogger made it that once you buy a domain name they will redirect all your link to your new domain name thus maintaining all your current ranking and links? isn't?.
    • Goggle and Alexa generally give Rank on you site name. you would see on alexa site that all the backlinks site list come without http or www. So when you use your blog suppose name with yoursite.blogspot.com then Google and Alexa will give rank on that blg name. Because when you make comment of make social media profile then you would use yoursite.blogspot.com...

      and now if you buy a custom domain suppose yoursite.com so this will be totally new to Google and Alexa and your previous backlinks and alexa rank will start gathering information newly. Because you didn't add your custom domain name on any social media or comment section..so this is totally new and your backlink would be 0..even if you have 100+ backlink on your previous site yoursite.blogspot.com..

      Hope it would make you clear..any more query feel free to ask.
Go Up