HackingUniversity - Hacks . Tricks . How-To's

07 February 2013

How to add Awesome Pressing Effect in Blogger using CSS

Well this thing has been requested by many readers, they just love the way everything presses down on my blog, like you can check out this effect by pressing any link or my header logo everything presses down and gives out a nice effect. Well the last request made was by "Anand". So obviously I replied him that I will post this thing as many of other people will be wondering too on how its done, so check out below tutorial.

So now this effect is achieved by just using simple CSS no JavaScript is used so its faster and works good in every browser.

  1. Visit Blogger –> Template –> Edit HTML.
  2. Now press Ctrl + F and search for ]]></b:skin> tag and paste below code above it.


  3. Now the above code will automatically add that pressing effect to every link on your blog.
  4. So now if you want to add specific widget this effect just add its id and it will get that same effect, well you can see my CSS what I am using to give effect to header, footer etc.

    a:active,#HU-Bar-Right .Random a:active,#HU-Bar-Right .btt a:active,.HU-emailsubmit:active,#Label1 a:active,.headerleft:active,#ptb img:active{position:relative;top:1px}

  5. So now when you are done just Save your Template that's it.
  6. So now refresh your blog and see the effect live running on it.