Cool CSS Hacks For Blogger/Blogspot

I have posted Making more professional blogger blogs before this. I suggest you to play with CSS because it is one of the cool stuff to make blog professional and well manage. And today I am sharing you some cool & good looking CSS hacks for your blog. It helps you to have more professional:) So, let's try it.

Create a stunning 3D push button

Nowadays, we can see 3d push buttons nearly everywhere. Most of them are achieved via JavaScript. The main problem of using these scripts is that there are greater chances that they might get blocked by the browser. And with the advent of many ad blockers it has become a serious drawback. In this situation, the CSS comes to rescue. Thought we can’t create 3d push buttons as professional as created by using JavaScript, we can create a basic 3d push button with the help of CSS.

The main CSS commands you’ll need are:
    a.pushbut {

    border:1px solid;
    border-color:#aaa #000 #000 #aaa;
    width:8em; text-align:center;
    height:2em; line-height:2em;
    background:#fc0; font-weight:bold
    border-color:#000 #aaa #aaa #000
These must be within <style> tag. i.e. ]]></b:skin> tag 

Off course, you can change any settings you want like back color, alignment etc. 
Now to create a button, we must specify the class object as push but within the <BODY> tag…that’s all
<p><a href=”” onclick=”return false” onkeypress=”return false” title=”visit my blog” class=”pushbut”>Visit blogohblog</a></p>
To see the demo, click here
CSS font shorthand notations

When styling fonts with CSS you may be doing like this: 
font-family: Times New Roman,serif;
line-height: 1.3em;
font-weight: bold;
font-style: italic;
font-size: 0.9em;
font-variant: small-caps;
There’s no need to write all these because there is a short hand notation for font.It follows the syntax
font:size/line-height weight style variant family;
For example in the above case we can just write
font: 0.9em/1.3em bold italic small-caps Times New Roman, serif;
Note: This CSS shorthand font version will only work if you’re specifying both the font-size and also the font-family. Moreover, in case you don’t specify the font-weight, font-style, font-variantetc. then these values will automatically filled with default values

Box Model Hack

This will be specified in nearly every css hacks article that you would have come across. Well mine too is not an exception. The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on.
In order to overcome this, all we have to do is use these commands ….
padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em
 More info about Box Model Hack can be found at

 Text transformation commands in CSS

Many people are unaware of this command. The command can be used to transform all the text into either uppercase, lower case or capitalize (Each word in a text starts with a capital letter) 
Usage is:

text-transform: uppercase
This must be included within the <STYLE> tag and you can change “txttrans” name and can use normal or lowercase if u want instead of uppercase 
And now to use this just include <div class=”txttrans”> where u want to start the transformation of text within the <BODY> and off course </div> where you wish to end the transformation

<div class=”txttrans”>
This is a test..
Note that this will apply to all the text in the page including button text etc.

Create A Hover Image Gallery  

Want to create a web page like this using css ? If you hover mouse in the image with result you find picture zoom in. Absolutely it is the magic of CSS. All you have to do is to paste the following contents within the <STYLE> tag. 
Download the Content file

Now to create a image gallery and its preview you have to include this in the <BODY> tag

<ul class=”hoverbox”>
<a href=”#”><img src=”img/image01.jpg” alt=”description” /><img src=”img/image01.jpg” alt=”description” class=”preview” /></a>
<a href=”#”><img src=”img/image02.jpg” alt=”description” /><img src=”img/image02.jpg” alt=”description” class=”preview” /></a>
 In order to add more images you have to follow the same pattern….just change the image location in the img src option. That’s all. Your Hover image gallery is ready.

Note: To apply these CSS effects to your blogger blog, you have to insert CSS code above ]]></b:skin> tag.  

And That's All. If you have some errors, share with me. I can help you :) 


Posts a comment

© geekOgizmo | Gizmos for Geeks, Technology for Technofreaks, Information for Infofreaks
Designed by Jotish Suthar Dinesh Kothari
Back to top