Well, it’s a boring and relaxing weekend here for me and i felt like i wanted to do something with my blog. I have seen all around the blogosphere those web2 badges and ribbons here and there. I didn’t want to do that here but i wanted to try out my luck with something like that. You must remember the previous article about the z-index and how to make some cool effects for your site. So, i tried and with my poor photoshop skills i created a small stamp for my posts. I decided to place it on the top right corner of each post just for the heck of it.
If you want to do something similar here is the way to do it in very simple steps:
- Create your image, preferably with transparent background unless you know where it will be hovering over.
- If you want to put it on all the pages of your blog then the index file of your theme is the way to go. If you want to do it like me, on the post page, then open the single.php page.
- Any place you like on the code add a div and put the image just like shown below:
<div class="stamp"><img alt="stamp" src="http://location/to/src/img"></div>
- Then on your style.css add the following
div.stamp{
display:block;
position:absolute;
top:350px;
left: 700px;
}
Please notice that top and left variables are something you have to find out yourself in order for your stamp to appear wherever you like it.
This is the way i added my stamp. I know it looks a bit silly or dorky up there but for now i like it. Who knows maybe tomorow i’ll change my mind 😉
As always, if you have any comments i’ll be glad to hear them out!
I was seeing other posts and suddenly saw that stamp near calender 😯
It isn’t silly but it is cool 😎
Will try to get something like this for my design
Nice! 😀
I will test it,just to see how it works!… 😛
if any of you guys need any help at all please do not hesitate to tell me. i’ll be more than glad to help you out!
Well as usual,I could use your help,because if I had sent you a screenshot of the result,you would be glad that I know how to correct the things at least.
I can’t make it work!!!!! 😥
I don’t really care about that,you know what my big problem is,but,as usual I can’t make anything work right…
#FN$# any time.. whenever we find each other on MSN we can check it out…
great work…please push the stamp to upper part so that It won’t block the calendar text..it’s only my thought though
it does block the calendar text? can you please provide a screenshot of what you see? here is what i see…
#FN$# sent me a screenshot of what really happens with you guys. it is depentent on the screen resolution of the visitor. since i am too lazy to fix it i just removed the stamp 😀 anyways thanks for the feedback guys. i appreciate it…
If only I have the photoshop skills then I would likely have it too… 😉
@Melvin: i don’t have the skills either 🙂 i just copied a small tutorial on stamps. if you need the template let me know 😉
Although I had seen this post some days ago, I just decided to leave a comment! 😛
Well, mine positions well next to my h1. It’s inside another div so its positioned based on the parent div. Its an very good guide and I’m planning to also post this on my blog (in Greek | don’t worry I’ll link back :wink:)
Nice post, for a second time! 🙂
@giannoug: i am really glad you like it. i am not worried about the link back. i will be glad if you do link but if not well… it’s a free world 😉 if you have any problem let me know!