Social Media | PLURK:CSS [BADGES]
Plurk Badges have been released to the Plurk community, awarded based on merit. These standard badges I have also detailed below, however, I wanted to play a little and so got to work developing the PLURK:CSS to add in a badge (or two) of my own.
When I informed my friends what I had managed to write, it became a popular request that I release the code, so I am here to share with you how it can be done… “if it can be done”. You are welcome to use any of the code and images I have written without credit, although it is always appreciated.
Limitations:
- This will only work if you have already successfully been awarded a genuine Plurk Badge. The reason for this is that the layer and images we edit, are only incorporated into the profile at this time.
- If you are awarded more than three genuine badges, say goodbye to this working on the first code, I do however have the further CSS trick which is detailed below. Just keep an eye on your badges!
MAKING YOUR NEW PLURK:CSS BADGE
Step 1. Create a blank canvas: 39 x 39 pixels.
Step 2. Go nuts creating your badge (…extensive tutorial here)
Step 3. Save your new badge, I’ve found a .png works well here
Some Badge Ideas (…or free to use)!
* please feel to use any of the above badges and the last one (the enso) is a little tribute to Zen Elements, if you so wish to do so :-))
CODING YOUR PLURK:CSS BADGE (single, double or tripple badges)
.award_bar {
width: 200px;
}
.award_bar img {
padding-right: 48px;
background: url(your_badges_url) no-repeat right;
}
CODING YOUR PLURK:CSS BADGE (four genuine badges)
.award_bar {
width: 200px;
height: 95px;
background: url(your_badges_url) no-repeat left bottom;
}
CODING YOUR PLURK:CSS BADGE (five genuine badges)
… Ummm… ask me when we get to that one.
ZEN ELEMENTS DASHBOARD WITH PLURK:CSS + BADGES
THE GENUINE PLURK BADGES
 |
Inviting 10+ Users |
 |
Inviting 25+ Users |
 |
Inviting 50+ Users |
 |
Creator of a Plurk community site |
 |
Yet to see – 100+ Response Comments to a Plurk…? (Let me know if you see!) |
 |
Translator of Plurk |
 |
Widget implimented on website – Apparently not active yet (thanks fusedreality) |
 |
Reached Plurk Virvana |
 |
Not yet seen |
 |
Has more than 50 fans |
 |
Some of the first Plurkers |
Take care everyone & happy PLURK:CSS’ing!
Alex | Zen
�)
Damn, now everyone knows the secret ;)
Thanks for sharing though, since they released it I’ve been thinking of doing it but been too busy – and you’ve made some nice ones there… I definitely have some other ideas for it though.
And of the last ‘official’ plurk badge – I’m pretty sure that’s for having a widget on one of your sites, and I think I heard somewhere that it hasn’t entirely been implemented yet. Meh.
Thanks for sharing again…
@Craig | fusedreality -
You’re welcome Craig and I’m glad you like them!
I would definitely be interested to see what you come up with, so when you get them on your profile, let me know!! I could add your own badges (and anyone else) here too if you would like. Credit and linkage given too of course ;]
Widgets on sites is what I thought for that one two but was not seeing it anywhere. Thanks.
Alex | Zen
@Craig | fusedreality – I have a question. I have 3 badges, 2 legit and want to add 2 more which DOES make 5. Help?
your delightful,
anathema
@bodhikalisattva -
Hi Anathema,
This is possible but it begins to get a little tricky, which makes it all the more fun in my oppinion ;] What you will have to do, is line up your badges pretty accurately in your actual backgroung graphic and using the code below to set it as the background:
.award_bar {
width: 200px;
height: 90px;
background: url(your_url_here) no-repeat bottom left;
}
This will align your new set of badges to the bottom left, allowing you to place them within your image how you want them. Might take a few tries to get it right but I’m sure you’ll get it.
Look forward to seeing!
Alex | Zen
I found this one : http://www.plurk.com/p/2e3r7
Actually I found another one, wif more than 400 responses, but I forgot the link…
@ZenElements – Thanks a lot for the help, I look forward to doing battle with it soon! Who doesn’t love modification and manipulation? :-P Or more importantly, the people who bring these tools TO us!
Great article! I had at least 10 questions answered and more that I didn’t yet know I had. Curious about some of the badges- I have a few plurks with well over 100 responses but was never awarded that particular badge… hmmm.
@Youfan -
Thanks for linking these Youfan.
I too have seen quite a few posts with over the 100 responces but I’ve never as yet seen the badge be awarded for it… It’ll be like a treasure hunt to find the new ones I think!
Alex | Zen
what should i do to get the “translator of plurk” badge?
As far as I am aware, this badge was achieved by helping the developers of Plurk out with translating content for Plurk. This, I am not sure this is still active as I’ve not seen many new badges being applied from Plurk, however I could be wrong..
Is it possible to achieve the popup mouseover effect with CSS? :)
@RK | There are some effects you can do on :hover, however you need to have the declarations in place for them to be possible. For example, a span tag within a paragraph being {visibility: hidden;} until moused over. You can also style the [ title="" ] tag to do some interesting things too, if combined with Javascript/jQuery… stuff.
Hope that helps!
hMmmm …. i hAppen to be asian can i put a badge in my profile saying iam asian or something?
@Lychan | You can use this technique to apply any badge/graphic you feel you want to have one your profile – so long as you currently have a badge on your profile you can apply this CSS to that is ;) You could have ‘I am asian’ if you want, or perhaps your countries flag in a badge or something. Let your imagination go wild and feel free to share your account in a comment if you use this so others can see too :)
Happy badge making!!
Hello!
I have only one badge, and I was able to put one of your badges on my Plurk site. But I want to put more badges (like 3 or something). What should I do?
Thanks! :)
@Zen Elements – okey… hehehhehe thx..^___^
@Anne | This is possible to create, however it is with your actual graphic and not with CSS :)
Instead your canvas being 39 by 39 pixels, make it 83 by 39 pixels and have your two badges in the one file, with maybe a ’5 pixel’ spacing? Hope this helps and be glad to see the results! :)
@Zen Elements – Thank you so much! :)
where can i get the url of the badges? thanks in advance.
If you right click the image and go to view image (or similar, depending on your browser) you’ll get the URL path in the address bar.
Why isn’t this working? ;__;
.award_bar {
width: 200px;
}
.award_bar img {
padding-right: 48px;
background: url(http://i41.tinypic.com/5kr3nm.png) no-repeat right;
}
Hi Kristine: As far as I can see – having just visited your profile – your badges are working.. looks great too! ;D
Let me know if you are still have any problems though by dropping me an email but think you might have sussed it :)
@Zen Elements: I figured it out. xD I just had to change something in the code. Thanks anyway and thank you for sharing this! ^^,
hey zen! fantastic website! got one query…
is it possible to put separate badges?
thanks!
@rolfyrolfers – nevermind that query. ^__^ didnt see your reply to anne’s. cheers!
Thanks For this!! i totally like them! Takecare :D
i have 3 genuine badges and i made two css badges.. for the first css badge i used the code for triple genuine badges and then for the 2nd badge i used the code for four genuine badges but when i tried to create a third css badge the code for the four genuine badges didn’t work.. how do i make the next badge???
Thanks for this… it looks great on my profile!
i also made a badge for a friend but it didn’t work well… she got only 1 genuine badge so i made a 3 badge layout pic and used the 1st codes,when we tried it it only shows 1 of the badges. its either the right most or the left most depending on right or left part of the code that i used.
Hi Zen, I really appreciate about this article, that’s so awesome for me to know about this.. :)
by the way I want to ask you some questions:
1. Can we add more than 1 badges by using CSS?
2. If we can, could you share the code for us? :)
thank you so much :)
Hello. if we mouse over the genuine badge it will says like “reach plurk nirvana” and stuff.
is there any way to make our ‘own badges’ show something like that when its’ moused over? Thanks.
umm… you see, I have 1 genuine badge and I added 4. for the first 3 badges I used the first code and for the last, the second… But what appears are the genuine badge, the 3rd and the 4th…. the 1st and 2nd doesn’t appear…
thanx for the code but please help me… ^_^
go to mine: plurk.com/animefreak17
Hi Paulina and thanks for the question:
I’m afraid however that what you’re seeing when you mouse over any of these badges is part of Plurks main code, writen using JavaScript over one of the containing layers. A little downside to playing with Plurks badges.
this one is cool! thx for the cheat :P