CSS Transition Effect Badge with Pure CSS for Blogger

CSS Transition Effect Badge with Pure CSS for Blogger

14
data:blog.title
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
CSS Transition Effect Badge with Pure CSS for Blogger
4 Stars stars - "CSS Transition Effect Badge with Pure CSS for Blogger" This is often require to create some badge for our blog to display at the blog sidebar. Most o...

your posts are always useful rabbi.
thanks for this.

when my readers are happy then I feel happy. Thanks for commenting.

bro your continuous comments motivate me to work for new.Many many Thanks

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.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *